SELECTED CASE STUDIES

Loren Heiman

2:30

PLACES
All the places you love - all in one place

CONTEXT

I was asked to design an application that showcased my

companys location API.
I conceived the application, specified its features and
designed concepts for the interface.
This case study showcases the design of the Places mobile
app and associated interaction workflows.

PROBLEM

In 2014, there is no shortage of great websites, applications,

and services to help people discover, save, and share great
places to eat, drink, visit and enjoy. Services such as Yelp,
UrbanSpoon, TripAdvisor, Foursquare etc all have rich
catalogs with strong communities that provide valuable
reviews on millions of restaurants, attractions and businesses.
So whats the problem?

PLACES LOREN HEIMAN

SILOED DATA

All these great places become trapped in the application in

which it was discovered. Youve curated these great places
but theyre siloed from one another; each application with its
own set of bookmarks, capabilities and interfaces.

Bookmark lists of various business review services on a mobile device

PLACES LOREN HEIMAN

SOLUTION

A mobile application accompanied with a back-end service

that allows people to bookmark points of interest found in
existing services, business review applications, etc and store
them all in one place for quick lookup later.

PLACES LOREN HEIMAN

USE CASES

I started by identifying the major use cases. These were

compiled from conversations with friends and colleagues
who already use services such as Yelp, Foursquare and
TripAdvisor and derived from common scenarios that are
encountered.
SAVING PLACES OF INTEREST

Friend recommends a restaurant or bar

He/she reads about a new restaurant on a blog
In preparation for an upcoming trip, he/she searches
TripAdvisor for restaurant, attraction and activity
recommendations
RETRIEVING SAVED PLACES

After going to an event in an unfamiliar neighborhood, he/

she wants to find a restaurant nearby
He/she wants to check out one of the bars a friend has
recommended to him tomorrow night
While on vacation, he/she wants to see all the attractions
he/she has saved to plan the day

PLACES LOREN HEIMAN

INSIGHTS

After analyzing the core use cases, I developed many ideas

and insights then identified the ones I felt would have a
strong impact on making the application successful:

Proximity: Proximity of the places location to the user is a

primary decision factor.
Categorization: A rudimentary categorization or tagging
system is critical to exclude types of places that are not
appropriate.
Linking: Providing a link to the original content source and
additional third party review sites would be very helpful in
remembering why the place was saved as well as what
popular opinion is on a variety of communities.
SKETCHES

Initial mobile application sketches

PLACES LOREN HEIMAN

INITIAL
WIREFRAMES
1
2

Initial wireframes of mobile application

Emphasis was placed on the locations proximity by using large type and
making it the default sort order.

Initial concepts used a tagging system for categorizing and filtering

places.

PLACES LOREN HEIMAN

REVISED
WIREFRAMES
1

Revised mobile application wireframes

The tagging system was replaced with a simple category selector to

reduce the time it takes to switch between different sets of places.

The map/list toggle was moved and given more prominence to provide
better accessibility.

PLACES LOREN HEIMAN

QUESTIONS

INSIGHT

How will users bookmark these businesses, restaurants and

bars? Will they have to search for them in Places after
already finding them in Yelp? (If so, people probably wouldnt
even bother)
Most established, popular business review services have a
web interface and therefore provide a dedicated web page
for each business (which includes pertinent information such
as the business name, address, contact information etc).

Examples of business pages from various business review services

SOLUTION

Similar to how Pocket, Instapaper, and Evernote Web Clipper

scrape content from a webpage, once presented with the
URL, Places can do the same and then pass those details
down to the mobile application.
PLACES LOREN HEIMAN

PASSING URLS

ANDROID

Passing URLs to the Places service requires different

mechanisms for each platform/device due to varying
capabilities.
Fortunately, Android offers a universal sharing system which
allows data (in this case, business details and URL) to be
passed between one application to another without either
having to know about each other.
Place app sends
URL to back-end
service
1

Back-end service
scrapes data and
sends down to
mobile app

Mobile app
presents edit/
confirmation dialog

Saving a place workflow, Android

Android also allows applications to be overlaid on top of one another

which we can use to quickly provide an edit/confirmation dialog
without leaving the current application.

PLACES LOREN HEIMAN

iOS

While iOS applications sometimes offer a share button,

each destination application has to specifically integrated by
the source application. Places is unlikely to be integrated as a
destination application, but Email is almost always an option
and therefore can be used to send the URL to the back-end
service.
User selects
Email from Yelp,
Foursquare,
TripAdvisor etc

add@places.com

Back-end service
takes URL, scrapes
data and sends a
notification to the
mobile device

Box Kitchen on Yelp

Users add the

Places email
address

Box Kitchen
431 Natoma St
San Francisco, CA, 94103
(415) 580 - 7170
http:/.yelp.com/biz/box-kitchensanfrancisco

Upon opening the

notification, the
mobile app
presents an edit/
confirmation
dialog

Saving a place workflow, iOS

PLACES LOREN HEIMAN

MIGO PLAYER
The $39 high definition personal television

CONTEXT

At Migo Entertainment, our goal was to make high quality

entertainment accessible and affordable to emerging market
consumers. Initially that meant leveraging their existing
mobile device by turning their feature phones into personal
televisions. However, with a typical screen size of ~2, we
knew there was great demand for a richer experience and so
we set out to design, build, and retail a dedicated large
screen video player.
As the lead UX designer and product manager, I co-defined
the product requirements with our CEO, managed the
industrial design of the hardware, defined and designed the
entire product user experience while acting as the creative
director for visual design.
This case study showcases the design and development
process of the Migo Players physical and software user
interface.

MIGO PLAYER LOREN HEIMAN

FEATURES

With an extremely low cost target of ~$30 I had to be

ruthless in determining what features were necessary and
what features were nice-to-haves.
We settled on the following features:
REQUIRED FEATURES
Large, highresolution display

Loud speaker

10+ hour battery

life

Button-based physical user interface

(resistive touch panels generally
performed poorly and capacitive touch
panels were outside our budget)

NICE-TO-HAVE FEATURES

TV-out via 3.5mm A/V port

Proprietary dock connector for charging and TV-out

MIGO PLAYER LOREN HEIMAN

FUNCTIONS

The next step was to establish what the core functions of the
device were so we could begin designing the devices form
factor and physical user interface.
CORE DEVICE FUNCTIONS

PHYSICAL UI

Download content (TV

episodes) from Migo
kiosk

Watch downloaded
content

Delete watched
content

Browse Migo
content catalog

To determine the functions and layout of the devices buttons

we evaluated the function that demanded the most out of the
interface: watching video. While watching a video requires no
interaction, it has many associated functions which demand
instant accessibility. I felt that if the design accommodated
these functions, it would also accommodate all other core
functions satisfactorily.
FUNCTIONS ASSOCIATED WITH VIDEO PLAYBACK
Pause / play *

Adjust volume *

Fast forward /
rewind *

Adjust brightness
manually

* demand instant accessibility

Toggle subtitles
on/off

MIGO PLAYER LOREN HEIMAN

BUTTON
MAPPING

To define the button requirements, I first evaluated the basic

device states and determined which functions were
applicable. I then generated possible button layouts that
could accommodate this combination of functions and device
states and assigned the functions to buttons.
Functions

States
Playing Video

Button Assignment*
Paused

Layout A

Layout B

Select

Select

Select

Select

Fast forward

Nav Up

Nav Right

Rewind

Nav Down

Nav Left

Pause
Play

Increase volume

Vol Up

Nav Up

Decrease volume

Vol Down

Nav Down

* Both layouts also require a

Back and Power/Sleep button.

Function, state, button mapping

We decided on Layout A because it had fewer navigational

buttons, reducing the chance of confusion, while still
supporting one of the simplest interface navigational models.
Prevalent throughout feature phone software and all
generations of non-touchscreen iPods, the up/down/select/
back interface navigation model is proven, ubiquitous, and
familiar to all.
MIGO PLAYER LOREN HEIMAN

EARLY DESIGN

I relayed the button requirements along with other

ergonomic requirements and brand guidelines to our
contracted industrial designer. After a few revisions, I found
many areas for improvement in the physical user interface
with regards to button design and placement.

Up
Down
Select
Back
3

PHYSICAL UI IMPROVEMENTS
1 Move volume buttons to topleft shoulder position to
allow access with left index
finger without having to readjust hands in a two-handed
grip.

1
2

Provide tactile affordances

(texture, z-height, etc) to
volume buttons to enable
eyes-free actuation.

Move charging port and

headphone jack from top of
device to the left side of the
device to prevent cables from
laying over and obstructing
the screen.

Early hardware design concept

MIGO PLAYER LOREN HEIMAN

REVISED
DESIGN

With my feedback and a few iterations we arrived at a design

that we felt satisfied with, both aesthetically and functionally.

Up
Down
Select
Back

Revised design incorporating my feedback

MIGO PLAYER LOREN HEIMAN

FUTURE
PROOFING

FINAL DESIGN

We later changed course and decided to go with button

Layout B (with up/down/left/right directional buttons) to
future-proof the device and preserve our ability to later add
more interactive and demanding activities such as gaming.
After many iterations, we felt confident enough to begin
engaging OEMs for manufacturing and I set off to craft the
user experience and software interface.

Back
Up
Left

Right

Select

Down

Final hardware design

MIGO PLAYER LOREN HEIMAN

SOFTWARE
INTERFACE

It was time to craft the software interface and fortunately I

did not have to start from scratch. I decided to start with our
current mobile application which I had previously designed as
a baseline because:
i) It would provide consistency to our users as most device owners would
have had prior experience with the Migo mobile app
ii) User testing had shown that users generally found our mobile app easy
to use
iii) It made sense from a feature parity/product development standpoint
and we were a startup so if it aint broke dont fix it!

MIGO PLAYER LOREN HEIMAN

To understand how the Migo Player UI was developed, lets

take a moment to review the major functionality of the Migo
mobile app.
WATCH

NOW PLAYING

BROWSE

MANAGE

Main screen where

downloaded videos are
selected for playback

The paused screen

(unfortunately any kind
of overlay on top of
video is not possible
with J2ME applications)

The Browse screen

displays a catalog of the
content currently
available to download
from the Migo kiosk

This screen allows users

to delete videos (and
free up space on their
memory card)

MIGO PLAYER LOREN HEIMAN

NAVIGATION
AND IA

A flat, tabbed navigation was used for the mobile app

because it contained few screens and we wanted to offer
relief from the phones typically heavily menu-driven
interface which required extensive navigation to launch the
Migo app.
Unlock
Phone

Open
Menu

Go to
Apps

3rd Party
Apps

Launch
Migo

Interaction flow for launching the Migo mobile app on a typical users phone

Watch

Browse

Manage

Migo mobile app main navigation

Fortunately, the Migo Player was a dedicated device so as

soon as it was unlocked, it was ready to play video. Coupled
with the intent to add significant features later convinced me
that we should move to a more traditional hub and spoke
navigation model for the Migo Player.
Home

Watch

Browse

Manage

Settings

New Feature
1, 2, 3 etc

Migo Player main navigation

MIGO PLAYER LOREN HEIMAN

X AND Y NAV

With the absence of tabbed navigation (which was used in

the mobile app), I tried to figure out how to use the devices
left/right keys throughout the navigation.

2
1

[Ep. Graphic]

Early wireframe concepts for Home and Watch screens utilizing all four directional keys

With one menu item (paused episode) on a row above all the other
menu items, selecting the desired menu item was not intuitive and
often required the use of both an up or down key and a left or right
key.

Left/right keys were used to switch between various views.

After several iterations and forced attempts to use the left/

right keys, I decided that just because they were there didnt
mean they had to be utilized so I explored interfaces that
didnt require their use.
MIGO PLAYER LOREN HEIMAN

Y ONLY NAV

After relieving myself of having to use the left/right keys, the

interface began to simplify itself.

[Ep. Graphic]

Revised wireframe concepts for Home and Watch screens utilizing only up/down keys

[Show Graphic]

1
1
[Ep. Graphic]

[Show Graphic]

Final wireframes for Home and Watch screens utilizing only up/down keys

Rich show artwork was utilized to add visual enhancement without

cluttering the interface.

MIGO PLAYER LOREN HEIMAN

VISUAL DESIGN

The visual design carried was carried over from our other
applications and brand materials with a focus on the content
and its associated artwork.

Final visual design

MIGO PLAYER LOREN HEIMAN

THANK YOU
loheiman@gmail.com / 415 535 6806

APPENDIX

MIGO PLAYER STATE DIAGRAM

Description: State diagram for a portable Android media device w/ TV out

Device3Mode:3output3display3to3Device

TV3out3Mode:3output3display3to3TV

1.3LKD_STBY_S3seconds3
inac<vity
2.3Power3BuBon3pressed
1.3Power3BuBon3pressed
2.3Power3connected
3.3Power3removed

Locked

1.3SVR_STBY_M3mins3
inac<vity
2.3Power3BuBon3pressed
3.3Power3removed

Screensaver

Standby

1.3Power3BuBon3pressed
2.3NORM_STBY_M3mins3inac<vity,3
baBery3power,3not3during3playback

Any3key3pressed
(except3Power)
NORM_SVR_M3mins3inac<vity,3
DC3power,3not3during3playback

1.3Headphones3inserted
2.3Center3buBon3pressed
Power3BuBon3pressed
X3seconds3inac<vity3(user3set),
Not3during3playback

TV3out3cable3removed

Interrupted

BaBery3<3BATT_LOW_TH3
%
BaBery3<3BATT_LOW_TH3
%

Removed3from3USB3
host3before3ejec<on

Ejected

1.3Power3BuBon3pressed
2.3Power3connected

TV3out3cable3inserted

BaBery3<3BATT_LOW_TH3
%

Docked

Power3O
Disconnected
from3USB3host

23mins

Display3TV3Out3
Enabled3on3Device3
Display

Connected3to
USB3Host

INT_LKD_S3seconds3
inac<vity

Any3key
pressed

Normal

Turn3Device3Display3
O

Headphones3inserted

Normal

Standby

Ejected3from3USB
mass3storage3mode

BaBery3>3BATT_OP_TH,3in3Device3
mode

BATTE_PWROFF_
S
seconds

BaBery3Empty

Connect3to3Power

Connect3to3Power

Migo3Bootloader3
Graphic

Migo3Graphic

BaBery3>3BATT_OP_TH,3
in3TV3mode

APPENDIX LOREN HEIMAN

PLACES BROWSER EXTENSION

APPENDIX LOREN HEIMAN

SAMPLE NAVIGATION FLOW DIAGRAM

XYPRO Tesla v0.5 Information Architecture v6.0
Screen/Actions Architecture
Nav. bar label:

Monitors

Monitor: Results
All
Monitor: Export

Resize/Reorder/
Sort by/Group by/
Hide/Show/Filter
Column

Show Pending
Alerts

Specify
Attributes
and Filters

Comment
Alert
Clear Alert

Save

Re-arrange
Group Widget

Clear Alert

Change Group
in Widget

Comment Alert

Sort by/Group
by Column

View Alert in
Monitor:
Results All

Change Trend
Time Period

Logout

Create New
Group

Create New
Monitor

Rename
Group

Rename
Monitor

Delete Group

Delete
Monitor

Reset

Save As New
Monitor

Jump to
Monitor:
Results All
Toggle Alert
Summary Chart
Type (Bar/Pie)

Edit Monitor
Properties

Edit Monitor
(in any way)

Dashboard: All
Alerts

Dashboard

Clear Alerts of
Row

Monitor:
Definition
Monitor: Alerts

Modify Export
Settings

Dashboard

Toggle Alert
Summary Chart
Type (Bar/Pie)

Login

Login

Show Pending
Alerts

Legend
Clear All Alerts

Export

Bounding box indicates

screens that have
actions in common

Logout

User Action,
described in detail in
subsequent pages

Save As New
Monitor

Screen

User Action

APPENDIX LOREN HEIMAN

Return to
previous screen

Return to
previous screen
Go to (new)
Monitor

XYPRO Tesla v0.5 Information Architecture v6.0

Modal Interaction Flows

SAMPLE INTERACTION FLOWS

Legend

Delete Group
User Action

Delete Group

Save As New Monitor

Leave Monitor With Unsaved Changes

Modal Name

Save As

Leave Monitor

Delete Group

Input field & description

Delete [Group] Group?

Action
Cancel

Save As New Monitor

Save
Monitor

Discard
Changes

Go to Save As
New Monitor
Flow
Rename Group

Create New Group

Create New
Group

Rename Group

New Monitor Group

Rename Group

Enter New Group Name

Create
Group

Cancel

Name same
as another

Display: Group
[Name] already
exists. Please enter
another name.

Deactivate Monitor
Cancel

Return to
previous screen

Yes

Delete [Monitor Name]?

No
Confirm
Delete

Rename Monitor
Rename
Monitor

Go to next
New Monitor Monitor
Enter Monitor Name

Remove All Attributes

Remove All
Attributes

Return to
previous screen

Remove

Yes

Return toMonitor
previous screen

Create
Monitor

Remove all attributes from this monitor?

No

Cancel

Create New Monitor

Cancel

Name same
as another

Remove All Attributes

Monitor
contain
outstanding
alerts?

Create New

Notify user
Alerts must be
cleared before
deleting Monitor

Save

Return to
previous screen

Delete Monitor

Cancel

Display: Group
[Name] already
exists. Please enter
another name.

[Group Name]

Deactivate
Monitor

Delete Monitor

Monitor
contain
outstanding
alerts?

Save As
New Monitor

Save

Continue

Delete Monitor

System Action

Would you like to save your changes?

Return to
previous screen
Go to (new)
Monitor

Action

Save Changes

Display: Monitor
[Name] already
exists. Please enter
Return
to
Name same
another name.
as another previous screen

Enter New Monitor Name

Cancel

Confirm
Delete

Name same
as another

Display: Monitor
[Name] already
exists. Please enter
another name.

Notify user
Alerts must be
cleared before
deactivating
monitor

Return to
previous screen

Rename Monitor

Return to
previous screen Display: Monitor

[Monitor Name]
Cancel

Save

Name same
as another

[Name] already
exists. Please enter
another name.

Return to
previous screen
Go to (new)
Monitor

APPENDIX LOREN HEIMAN

Capella Core Information Architecture v4.1

Sub Unit Level (Employee)
Capella
Performance
SAMPLE
DETAILED
INFORMATION
ARCHITECTURE
Capella CoreMy
Information
Architecture
v4.1

Nav. Bar Label:

Customers

Sub Unit Level (Employee)

1.1 - Dashboard

2.1 - Performance Home

3.1 - Customers Home

Module A
- Announcements
Nav. Bar
Label: (If applicable)
My Capella
- Dismiss Announcement (If applicable)

Module G

Performance

- My Action Plan Tasks (indicate new)

- My Assigned Cases (indicate new)

- Assign/Close Action Plan Task

- Assign/Close Case
- Go to Survey Details (3.2)

Customers

Module G
- My Assigned Cases
(indicate
new)
1.1
- Dashboard

- My Actions Plans w/ Improvement

2.1 -Metrics
Performance

- Assign/Close Case
- Go
to Survey Details (3.2)
- Announcements
(If applicable)

- Go to Performance Details (2.2)

Home

- Survey Table w/ Performance Scores (All

Module G
surveys keyed to current user)

Module A

- My Action Plan Tasks (indicate new)

Module A

- Go to Survey Details (3.2)

- Assign/Close Action Plan Task

- Dismiss Announcement (If applicable)

2.2 - Performance Details

- My Actions Plans w/ Improvement Metrics

- My Assigned Cases (indicate new)

3.2 - Survey Details- Survey Table w/ Performance Scores (All

surveys keyed to current user)

- My Action Plan Tasks (If applicable)

- Performance
Plan Info
w/Improvement Metrics
- Assign/Close
Case
(If applicable)

- Go to Survey Details (3.2)

- Go to Performance Details (2.2)

- Assign/Close Action Plan Task (If applicable)

- Case Details and History (If assigned to user)

- Go to Survey Details (3.2)

- Update Performance Plan (If applicable)

Module A
- My Action Plan Tasks (indicate new)
- My Performance Metrics

- Assign/Close Action Plan Task

- Go to Surveys (3.2)

- Performance Plan Info w/Improvement Metrics

(If applicable)
- Update Performance Plan (If applicable)

- My Assigned Cases (indicate new)

- Assign/Close Case
- Go to Survey Details (3.2)

- My Action Plan Tasks (indicate new)

Module G Action Plan Task

- Assign/Close

3.1 - Customers Home

- Update/Close Case (If assigned to user)

- Performance Plan Info w/Improvement Metrics
(If applicable)
- Create/Update Performance Plan (If
applicable)
2.2 - Performance

Details

- Customer Contact Info (If case is assigned to

user?)
- Survey Response Data

3.2 - Survey Details

- My
Plan
Tasks (If applicable)
- Action Plan Details
and Action
History (If
applicable)
- Trend, Rank, Response Distribution
- Assign/Close Action Plan Task (If applicable)

- Case Details and History (If assigned to user)

- Comment Cloud
- Employee Cloud

- Update/Close Case (If assigned to user)

- Performance Plan Info w/Improvement Metrics

- View Comment Details
(If applicable)
- My Performance Metrics

- Go to Comments (2.3)

- Create/Update Performance Plan (If

applicable)

- Go to Surveys (3.2)

- Customer Contact Info (If case is assigned to

user?)
- Survey Response Data

2.3 -- Comments
Action Plan Details and History (If applicable)
- Trend, Rank, Response Distribution
- Categories
- Keywords
- Emerging Trends
- Comments

- Comment Cloud
- Employee Cloud

6.1 - Account
- User Info

- View Comment Details

- Go to Comments (2.3)

- Edit User Info

- Preferences

Legend:
Primary Screen Title
- Information Displayed
- Available Actions

[All Screens]

2.3 - Comments
- Categories
- Keywords
- Emerging Trends
- Comments

- Edit Preferences

- Send Feedback

- Security Settings

- Logout

- Edit Security Settings

APPENDIX LOREN HEIMAN

6.1 - Account

- User Info
- Edit User Info

SAMPLE INTERACTION MODEL

APPENDIX LOREN HEIMAN

THE END