2. Design Process | Worldview
Collaboration and prototyping are the foundations
for designing great experiences.
3. Design Process | Methods
Gain Awareness & Empathy
for the User
Activities
Environments
Interactions
Objects
Users
4. Design Process | Methods
Leadership & Facilitation
of Collaborative Groups
• Hosted the 2013 KC
Service Jam
• Importance of diverse
thinking types
Capture the best ideas
5. Vehicle Mode Attributes Study
Date: September 24th 2014
Owner: Joseph Jancsics
Stakeholders: Kip Dondlinger, (need to find out)
Usability Research Questions
What attributes does a user find most important for vehicle mode?
What attributes are least desirable?
Can we identify features that have not been considered yet?
Participant Requirements
Familiar with concept of “Vehicle Mode”
Some experience owning a (preferably newer) vehicle
Preliminary conversation about car maintenance knowledge
Design of Usability Evaluation
Each participant will be presented with Attribute Cards and an Importance Scale (Fig. 1). Each card will
show a unique feature/attribute, which may or may not be suitable for “Vehicle Mode” experience. The user
will then sort, or place, the cards on the Importance Scale in one of the following categories: Must have;
Nice to have; Sounds Interesting/Cool; Don’t Care (Indifferent); Don’t need/want.
Figure 1. Attribute Importance Test (based on Kano Model Analysis
1
)
For each card placed the participant may be asked questions:
Why did you place ‘X’ attribute there?
How would you see ‘X’ feature being used? (probe for use case)
Wild Cards (I.e., blank) will be provided for participants to write/suggest their own features for the exercise.
Participants will be asked to ‘think-aloud’ while completing the exercise.
Required Resources
Paper printouts (Attribute Cards & Importance Scale)
Paper and pen to take notes
Timeline & Deliverables
Running Study – Week of Oct. 6
th
Preparing Findings report – Week of Oct. 20th
1 http://www.mindtools.com/pages/article/newCT_97.htm
Design Process | Methods
Participatory Design
• Extract information
Requirements gathering
• Document results
• Integrate into the
experience
6. Design Process | Methods
Rapid Prototyping
• Make mistakes early
Identify weak designs
• Get them out of the way!
To produce strong designs
7. Design Process | Methods
Paper Prototypes
• Iteration towards the
best solution
• Constraint of time &
budget
Results prove value added
8. Design Process | Methods
9000 HomeScreen Storyboarding
3
By pressing on the preview display Gary
is able to view the combination in full-
screen mode.
The end
Layout
Current Layout
Fishing
Docking
Cruising
Water Sports
Devices Layouts
Settings
Info
SOS
Storyboarding
• Stories convey ideas
Illustrates multiple interactions
• Conclude with a goal
As the user would 9000 HomeScreen Storyboarding
2
After adding the chart he takes a moment
to position and resize it.
After positioning the chart he decides to
add a radar.
Following a similar process to adding a
chart, Gary is able to add a radar and see
options for initial positioning.
Not yet fully satisfied with
the layout, Gary decides to
add some numbers.
By selecting “numbers” from the home-
screen the new options appear.
Using the numbers tools Gary is able to
add and position his numbers to work best
with the new layout.
Chart
Radar
Sonar
Gauges
Video
NumbersDone
Chart
Chart
LAYOUTS
Drag & Drop
Save as...
Layout
Navigation
3d Perspective
Fishing
Fish Eye
NumbersDone
CHART
Select Type
Save as...
Layout
NumbersDone
Chart
Radar
Sonar
Gauges
Video
Radar
NumbersDone
Harbor
Offshore
Dual Range
Sentry
Radar Overlay
RADAR
Select Type
Save as...
Layout
Layout
NUMBERS
Drag & Drop
Done
Custom
Horizontal
Vertical
Corners
Advisor
Layout
NUMBERS
Drag & Drop
Done
Custom
Horizontal
Vertical
Corners
Advisor
LAYOUTS
Drag & Drop
Data B
00Data B
00
Data B
00
Data B
00
Engine
Data Colors
Data D
00
Data D
00
Data D
00
Data D
00
Save as...
Layout
9000 HomeScreen Storyboarding
1
Gary is viewing the chart.
He then wants to change to sonar, so heopens the homescreen menu.
From there he presses the sonar icon onthe left.
The homescreen closes and he takes a
Chart
Radar
Sonar
Gauges
Video
Settings Info
Devices Layouts
SOS
Layout
Chart
Radar
Sonar
Gauges
Video
Settings Info
Devices Layouts
SOS
Layout
Chart
Radar
Sonar
Gauges
Video
NumbersDone
LAYOUTS
Drag & Drop
Save as...
Layout
Chart
Radar
Sonar
Gauges
Video
Settings Info
Devices Layouts
SOS
Layout
9. Design Process | Deliverables
Deliverables are tailored to project needs
and audience, using the best method(s)
to communicate the vision.
10. Design Process | Deliverables
Vision Documents
• Best for long-term
projects
Early stages, high level
• Identifies &
communicates design
goals
Discovery involves input
from subject matter
experts
• Illustrates conceptual
models & system
architecture
2
Garmin HomePort
GOAL
More Intuitive
Chart Interactions
*Graphics are not final | For example only
Confidential
Garmin International, Inc.
Software User Experience Design pg. 23
Vision Chart Interactions
chart
Waypoints
Routes
Tracks
File Edit View HelpFile Edit View HelpFile Edit View Help
Search
Drawings
Chart Tools
Planning
Tools (A)
N 31.63021°
W080.37992°
0.36mi M286°
Waypoint 1
Route 001 to 009
Type Name Date Added Notes
Data
1/16/2013
1/15/2013
Waypoint 2
Route 010 to 015
1/15/2013
1/03/2013
Select
View: All
Send to GPSMAP8012
Planning
Tools (B)
View
Controls
Planning Data
Planning Tool & Data Options
Click Here...
(e.g;”add waypoint”)Off-chart mouse is
a standard pointer
*Graphics are not final | For example only
Confidential
Garmin International, Inc.
Software User Experience Design pg. 62
garmin.com
user
boat(system)
HomePort
User Input
Existing Communication
Future Communication
BlueChart
Mobile
11. Design Process | Deliverables
Click-through
Documents
• Best for rapid
implementation
New features or
software updates
• Captures &
communicates a
prototype or idea
• Each page shows
an interaction
14
Garmin Marine User Experience
Confidential & for internal use only
Auto Guidance Design
NextPrev
Auto Guidance
InfoWaypoints<...> SOSMarkMenuHome
!
!
!
!
Cancel
Done
Touch path to add points,
press & drag to reposition.
Auto Guidance
InfoWaypoints<...> SOSMarkMenuHome
!
!
Cancel
Start Navigation
Adjust Path
Hazard Review
!
!
Auto Guidance
InfoWaypoints<...> SOSMarkMenuHome
!
!
!
!
Cancel
Done
Touch path to add points,
press & drag to reposition.
15
Garmin Marine User Experience
Confidential & for internal use only
Auto Guidance Design
NextPrev
Auto Guidance
InfoWaypoints<...> SOSMarkMenuHome
Calculating...
Cancel
Auto Guidance
InfoWaypoints<...> SOSMarkMenuHome
!
!
!
!
Cancel
Done
Touch path to add points,
press & drag to reposition.
Auto Guidance
InfoWaypoints<...> SOSMarkMenuHome
!
!
!
!
Cancel
Done
Touch path to add points,
press & drag to reposition.
12. Design Process | Deliverables
Wire-frame
Documentation
• Best for detailed
designs
New products or
innovations
• Provides entire
use cases on each
page
• Notes in margins
detail requirements
UX Requirements
EGarmin International, Inc. | User Experience GroupConfidential
Virb Control Bar Description
Overview | Virb Control Bar
InfoWaypoints<...> SOSMarkMenuSettingsHome
Virb <NAME>
53% Standby
REC
12min
Virb <NAME>
53% Standby
REC
12min
A
B
Name of Virb: This will show a
name for the detected Virb device.
If more than one are connected
there will be arrows on each
side of the name to toggle.
Battery Life: Will show remaining
battery life for detected/selected Virb.
Name
of Virb
Virb 1 Models
Base Elite
Battery
Life
Storage
Space
Information
Function
ANT
A B C
D E F G
Photo
Button
Record
Video
Button
Status Expand
C
D
E
F
G
Storage Space: Will show approximate
remaining storage space (in minutes)
available on detected/selected Virb.
Photo Button: this can be used
anytime, even while recording.
Record Video Button: toggles on/
off of recording function. Pressing
will perform function, user does
not need to 'slide' or 'swipe' it.
Status: This area will display the mode
of camera operation. While recording it
will show a red light with a time-count
to indicate current recording length.
Expand: This button allows a user to
quickly have a full-screen controller
and access the Virb menu.
Return to Contents
Confidential Garmin International, Inc. | User Experience Group
UX Requirements
9
Adding a Virb Virtual Device to a Combo
Figure 1-6: Existing 8xxx Procedure
a. User can go through existing process
to create a combo (split-screen).
CHARTS
Done
InfoWaypoints<...> SOSMarkMenuSettingsHome
1 2
Functions 2
Overlays
1. Nav Chart
2. Choose Function
Name Charts
Split Vert
CHARTS
Back
InfoWaypoints<...> SOSMarkMenuSettingsHome
1 2
Charts
Radar Overlay
Sonar
Graphs
Gauges
Video
4.0 Virb Virtual Device | Adding to Combo
4
21
5
3
6
7
InfoWaypoints<...> SOSMarkMenuSettingsHome
Menu
Chart Menu
Edit Combo
Back
InfoWaypoints<...> SOSMarkMenuSettingsHome
CHARTS
Functions 1
Overlays
1. Nav Chart
Name Charts
Done
InfoWaypoints<...> SOSMarkMenuSettingsHome
1
Press
2
Press
Edit
Combo
Press
Menu
Press
Choose
Function
Press
Video
Press
Done
Press
Back
Press
Back
Press
Back
Press
Back
Press
Functions
Go
to Next
Page
CHARTS
2
3
4
1
Back
InfoWaypoints<...> SOSMarkMenuSettingsHome
1
*Note: In this illustration the Virb
Virtual Device is located within
'Video', which is inconsistent with
the home screen behavior. We
are still investigating what makes
the most sense for the placement
of the Virb Virtual Device.
*
Return to Contents
13. Design Process | Deliverables
Animations
• Used when motion plays a
critical role in the experience
14. Design Process | Deliverables
Scenario Videos
• To introduce a new feature
15. Design Process | Deliverables
Interactive Prototypes
• Using Axure
Output is HTML
Launch
Prototype A
Launch
Prototype B