Presentation is part of the Mobile Accelerator Program organized by the Mobile Experience Innovation Centre, at OCAD University in Toronto, Canada. www.ilonaposner.com

1. User
Experience
Design
&
Paper
Prototyping
ILONA
POSNER
User
Experience
&
Usability
Consultant
www.ilonaposner.com
Mobile
Accelerator
Program
(MAP)
Mobile
Experience
InnovaJon
Centre
(MEIC)
OCADU,
Toronto,
ON
February
14,
2013
ILONA
POSNER
©
2013
1

2. Bio
-­‐
ILONA
POSNER
User
Experience
&
Usability
Consultant
• Industries:
Telecom,
Financial,
Web,
Mobile,
SoTware,
Hardware,
Healthcare,
TransportaJon,
EducaJon
• Clients:
AMD,
Autodesk,
Apple,
Bell,
CIBC,
DB,
MicrosoT,
Pitney
Bowes,
LA
Metro
Transit
Authority,
Human
Factors
InternaJonal,
NaJonal
Research
Council
of
Canada,
Canada
Health
Infoway,
CIBC,
RBC,
ScoJa,
TD,
Visa,
&
Yahoo!
• Teaching:
University
of
Toronto,
Canadian
Film
Centre,
OCADU,
Professional
Development
Courses
• Research:
University
of
Toronto,
Computer
Science,
Human
Computer
InteracJon,
Dynamic
Graphics
Project
• Educa=on:
M.Sc.
&
B.Sc.
Computer
Science,
U.
of
Toronto
ILONA
POSNER
©
2013
2

3. Points
of
View
“A
point
of
view
is
worth
80
points
of
IQ.”
-­‐
Alan
Kay
“You
are
NOT
the
User!”
ILONA
POSNER
©
2013
3
Source
www.openmuseum.org/objet/show/1835

4. Keyhole
Impact
“I
am
NOT
the
User!”
ILONA
POSNER
©
2013
4
Source
hfp://s125.beta.photobucket.com/user/alongway99/media/Halloween%20AnimaJons/Scary%20Eye%20AnimaJons/EyeLooksKeyhole.gif.html?sort=4&o=47

5. History
of
User
Experience
• Human
Factors
&
Ergonomics
• Human
Computer
InteracJon
• Usability
• User
Experience
ILONA
POSNER
©
2013
5

6. 1940’s
ILONA
POSNER
©
2013
6

7. 1950’s
ILONA
POSNER
©
2013
7

8. 1980’s
ILONA
POSNER
©
2013
8

9. And
Now…
ILONA
POSNER
©
2013
9

10. Human
Impact
of
Technology
Human Impact
Devices
ApplicaJons
Input
forms
Features
InformaJon
Time
of
use
Dependence
Interdependence
Sociability
Environmental
impact
Human Capacities
ILONA
POSNER
©
2013
10

11. What
is
User
Experience?
Interna=onal
Standards
Organiza=on
• ISO
defines
user
experience
as
"a
person's
percep=ons
and
responses
that
result
from
the
use
or
an=cipated
use
of
a
product,
system
or
service".
So,
user
experience
is
subjec=ve
and
focuses
on
the
use.
• The
addiJonal
notes
for
the
ISO
definiJon
explain
that
user
experience
includes
all
the
users'
emo=ons,
beliefs,
preferences,
percep=ons,
physical
and
psychological
responses,
behaviors
and
accomplishments
that
occur
before,
during
and
aMer
use.
The
notes
also
list
the
three
factors
that
influence
user
experience:
system,
user
and
the
context
of
use.
• Note
3
of
the
standard
hints
that
usability
addresses
aspects
of
user
experience,
e.g.
"usability
criteria
can
be
used
to
assess
aspects
of
user
experience".
Unfortunately,
the
standard
does
not
go
further
in
clarifying
the
relaJon
between
user
experience
and
usability.
Clearly,
the
two
are
overlapping
concepts,
with
usability
including
pragma=c
aspects
(geNng
a
task
done)
and
user
experience
focusing
on
users’
feelings
stemming
both
from
pragma=c
and
hedonic
aspects
of
the
system.
ISO
FDIS
9241-­‐210:2009.
Ergonomics
of
human
system
interacJon
-­‐
Part
210:
Human-­‐centered
design
for
interacJve
systems
(formerly
known
as
13407).
InternaJonal
OrganizaJon
for
StandardizaJon
(ISO).
Switzerland.
hfp://en.wikipedia.org/wiki/User_experience
ILONA
POSNER
©
2013
11

12. User
Experience
Everything
that
the
user
sees,
hears,
&
touches!
Share
Customize
ILONA
POSNER
©
2013
12

13. **
Balloon
Image
**
ILONA
POSNER
©
2013
13

14. User
Experience
=
Product
ILONA
POSNER
©
2013
14

15. User
Experience
=
Brand
ILONA
POSNER
©
2013
15

16. User
Experience
UX
Honeycomb,
Peter
Moreville
ILONA
POSNER
©
2013
16

17. Buying
Pop
with
a
Cell
Phone
IDEO
researchers
test
i-­‐mode
leading
edge
mobile
services
plavorm,
2003
Bill
Moggridge,
Designing
InteracJons,
February
2,
2007
lecture
by
Bill
Moggridge
for
the
Stanford
University
Human
Computer
InteracJon
Seminar
(CS
547).
hfp://www.youtube.com/watch?v=kVkQYvN4_HA
ILONA
POSNER
©
2013
17

18. User
Experience
Example
…
hfp://www.switched.com/2010/12/28/aol-­‐free-­‐trial-­‐cds-­‐cost-­‐300-­‐million/
ILONA
POSNER
©
2013
18

19. UX
Problem
ILONA
POSNER
©
2013
19

20. Cost
of
UX
Problem
• Bush
won
by
537
of
5.8
million
votes
• Buchanan
5x
>
votes
in
Palm
Beach
• 19,120
ballots
registered
2
votes,
20,000
disqualified
ballots
• Law
suit
claimed:
“Ballots
were
decepJve,
misleading,
and
confusing.”
• Results
delayed
37
days!
Nov
7
-­‐
Dec
13
hfp://costofwar.com/
ILONA
POSNER
©
2013
20

21. How
to
Maximize
UX?
ILONA
POSNER
©
2013
21

22. Trinity
for
Success
Users
Business
Technology
ILONA
POSNER
©
2013
22

23. Research
Focus
Problem
Space
-­‐ Environment
-­‐ Market
-­‐ LegislaJon
Users
Business
Users
-­‐ Goals,
Needs
-­‐ AcJviJes,
Tasks
-­‐ Vision
&
Goals
-­‐ Requirements
-­‐ Requirements
-­‐ CompeJJon
Business
?
Technology
Technology -­‐ Constraints
-­‐ Requirements
ILONA
POSNER
©
2013
23

24. UX
Success
Stories
Mazda
Miata,
1989
-­‐
present
ILONA
POSNER
©
2013
24

25. $300
Million
Bufon
eCommerce
website
changed
one
bufon
label
✗
REGISTER
CONTINUE
✓
+
45%
sales
up
aTer
renaming
of
bufon
&
removal
of
forced
registraJon
+
$300
Million/year
revenue
Source:
www.uie.com/ar,cles/three_hund_million_bu(on
ILONA
POSNER
©
2013
25

26. $12
Million
–
OpJonal
Field
• Expedia.com
makes
$12
Million
profit,
aTer
removing
opJonal
field
“Company”
from
online
purchase
form
• Prior,
customers
who
clicked
the
Buy
Now
did
not
complete
transacJons…
Source:
hfp://www.silicon.com/management/sales-­‐and-­‐markeJng/2010/11/01/
expedia-­‐
on-­‐how-­‐one-­‐extra-­‐data-­‐field-­‐can-­‐cost-­‐12m-­‐39746554/
ILONA
POSNER
©
2013
26

27. iPod
vs
Zune
ILONA
POSNER
©
2013
27

28. How
to
Maximize
UX?
ILONA
POSNER
©
2013
28

29. Five
D’s
of
User
Experience
Design
Discover
Deploy
Define
Develop
Design
ILONA
POSNER
©
2013
29

30. Five
D’s
of
DISCOVER DEFINE DESIGN DEVELOP DEPLOY
!"#$%&##'
Business stakeholder interviews Business objectives Review concepts & designs often
Business goals, mission, vision Market Positioning Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics
Concept Success metrics Future features list
UX
Design
Product SWOT Analysis
Marketing Mix(four P's)
Market Positioning
Market Segmentation
Demographic Research
Design Guidelines / Standards?
()*+",-'
Product reports & surveys Concept prototype/video Review concepts & designs often
Critical incident analysis Project definition/Concept Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics
Weblogs & analytics Deliverables defined Future features list
Competitive Analysis Use cases
Quantitative Research Initial design exploration
Qualitative Research Visualization
Expert heuristic evaluation Flowchart (tasks)
Design research Success metrics
-&,.%*/*01'
Current technology used Technical requirements !"#$%&'()*+,+-.&-#(/$0&(#((+1$( DEVELOP with input from UX SUPPORT deployed product
Limitation of old technology Success metrics 2#3+#4&51$5#6-(&7&%#(+0$(&18#$ !"#$%&'()*+,+-.&-#(/$0&(#((+1$(
Opportunities for new tech
Research tech constraints
2$#"3/'+&#$0%
Brand & Design Guidelines Develop Strategy, explore look & Design Direction, agree on chosen Style Guide - Pixel placements
feel direction definition
Frames of reference, analagous Generate Initial Ideas, style frames, Iterations of Hi-Fidelity Designs Graphic Production - Icons,
examples initial concepts, mock-ups before user testing graphics, page elements
Future Design Direction Developer Toolkit - Examples,
sample code, wiki
THESE ABOVE MAY NEED TO
HAPPEN SOONER!?!?
"#&)'&4(&)$&%,&'5'"#3!$/$-1
Business stakeholder interviews Concept prototype/video
Call centre reports User stories Brainstorm concepts & metaphors Work closely with development User Surveys
User community feedback User profiles Modules requirements & designs Beware: Last minute design changes Monitor social networks & user
done without UX Input communities
Field studies Usability goals & objectives Screen flow, functions, fields Field studies of actual use
User surveys User performance requirements Navigation/site map
User interviews User experience goals Review early design concepts Conduct heuristic evaluations of Usage metrics, & performance
(including graphic treatment) evolving product measurements
Expert heuristic evaluation Persona's Prototypes Low-Fidelity (multiples) Usability test evolving product as Future features list
soon as possible
Usability testing current product Storyboarding Wireframes Low-Fidelity Confirm success metrics and
(multiples) objectives are being met
Design research User scenarios Usability Test Low-Fidelity
Prototypes & Wireframes
Task Analysis Prototypes High-Fidelity (includes Final Usability Testing before
graphic treatment) Deployement
Competitive Analysis Success metrics Detailed Designs
Quantitative Research Usability Test Designs & High-Fi Project Process Debrief & Lessons
Prototypes Learned
Qualitative Research Update Design Guidelines
Task Analysis Update detailed designs & functional
specifications for development
User Goal Analysis Document Design Rationale
Update Design Guidelines/Standards
ILONA
POSNER
©
2013
Five
D’s
of
UX
Design
–
Discover,
Define,
Design,
Develop,
Deploy
ILONA
POSNER
© 2013
30

31. hfp://www.uxmafers.com/mt/archives/2011/09/images/EffecJveUIJourneyMapExample.jpg
Customer
Journey
ILONA
POSNER
©
2013
31

32. Vision
ILONA
POSNER
©
2013
32

33. Samsung
vs
iPhone
Comparison
-­‐
Memo
ILONA
POSNER
©
2013
Samsung,
RelaJve
EvaluaJon
Report
on
S1,
iPhone,
Product
Engineering
Team,
SW
VefiricaJon
Group
March
2,
2010
33
PlainJff’s
Exhibit
No.
44,
United
States
District
Court,
Northern
District
of
California,
Apple
Inc.
v.
Samsung
Elecs.

34. iTunes
Usability
Challenges
hfp://www.nngroup.com/arJcles/disrupJve-­‐workflow-­‐design/
ILONA
POSNER
©
2013
34

35. iTunes
Usability
Challenges
ILONA
POSNER
©
2013
35

36. iTunes
User
Experience
Challenges
ILONA
POSNER
©
2013
36

37. User
Research
ILONA
POSNER
©
2013
37

38. 360
Degree
View
of
Customer
• Call
centre
• Field
Studies
• Customer
support
emails
• Interviews
• User
forums
• Surveys
• AnalyJcs
• Diary
studies
• Web
logs
• Focus
groups
• 3rd
party
review
sites
• Card
sorJng
• Usability
tesJng
Lean
UX
-­‐
Applying
Lean
Principles
to
Improve
User
Experience,
Jeff
Gothelf
&
Josh
Seiden,
2013
ILONA
POSNER
©
2013
38

39. User
Research
ObservaJons
Interviews
QuesJonnaires
ILONA
POSNER
©
2013
39

40. Example:
Research
QuesJon
Research
QuesJon:
What
is
the
weather?
How
would
you
conduct
this
research?
List
several
different
ways
you
could
try
to
answer
this
quesJon?
ILONA
POSNER
©
2013
40

41. Example:
Weather
1
ILONA
POSNER
©
2013
41

42. Example:
Weather
2
ILONA
POSNER
©
2013
42

43. ObservaJons
or
Field
Studies
ILONA
POSNER
©
2013
43

44. Field
Study
ILONA
POSNER
©
2013
44

45. Field
Studies
✗
I would use a
drop-down menu
rather than using
I find it difficult to
keep track of my
knitting patterns.
✓
check boxes.
ILONA
POSNER
©
2013
45

46. Nokia
Mobile
Phone
Study
Metro
car
CHI
2005
ILONA
POSNER
©
2013
46

47. Wells
Fargo
Mobile
Research
Answerlab.com
&
Wells
Fargo
Research
PresentaJon,
UPA
2011
ILONA
POSNER
©
2013
47

48. Users’
Profiles
• Demographics
– Age,
gender,
family,
educaJon,
job,
HHI,
technology,
geography,
language,
culture,
preferences,
etc…
• Behavior
paferns
– Where,
when,
how,
why
ILONA
POSNER
©
2013
48

49. Personas
Persona
A
hypotheJcal
user
archetype
used
throughout
design
How
Compiled
from
ethnographic
interviews
with
real
people
Defined
by
goals,
moJvaJons,
behaviors,
of
real
target
users
Why
Designing
for
archetype
can
saJsfy
bigger
user
group
Helps
focus
on
users
&
context,
assist
in
decision-­‐
making
&
communicaJon
www.cooper.com/newslefers/2002_02
ILONA
POSNER
©
2013
49

50. Persona
Types
Primary
If
the
design
fails
for
the
primary
persona
then
the
product
is
a
failure
Secondary
An,
• Examples:
– Extreme
Ed,
CauJous
Carl,
Businessman
Brad,
Mobile
Mike,
Mainstream
Mary
ILONA
POSNER
©
2013
50

51. Build
-­‐
Prototypes
Early
Design
Late
Design
Development
Costs
of
Making
Changes:
$1
$10
$100
ILONA
POSNER
©
2013
51

52. Prototype
PalmPilot
Bill
Buxton,
Sketching
User
Experiences,
2007
ILONA
POSNER
©
2013
52

53. Physical
Device
hfp://www.sketchingtomorrow.com/wp-­‐content/uploads/2010/06/cardboard.jpg
ILONA
POSNER
©
2013
53

54. InteracJve
Paper
Prototype
hfp://graphics.csail.mit.edu/classes/6.893/F03/PaperPrototypePhotos/pic2_0018.JPG
ILONA
POSNER
©
2013
54

55. Prototype
of
GPS
System
ILONA
POSNER
©
2013
55

56. Mobile
Phone
Paper
Prototypes
www.liliamanguy.com/iBuyRight_webdocs/
www.nngroup.com/reports/prototyping/tesJng_handheld.jpg
ILONA
POSNER
©
2013
56

57. Paper
in
Screen
Prototype
hfp://uxmag.com/arJcles/paper-­‐in-­‐screen-­‐prototyping
ILONA
POSNER
©
2013
57

58. Paper
Prototyping
“Without paper prototyping these decisions would likely have
taken 6 to 12 months longer.”
“85% of usability practitioners find Paper Prototyping useful &
essential.”
“Any mid-sized design project will probably get an ROI of several
thousand percent from following the advice in this book.”
Jakob Nielsen
www.paperprototyping.com
©
ILONA
POSNER,
2011
58

59. Paper
Prototype
Design
Exercise
ILONA
POSNER
©
2013
59

60. Usability
TesJng
–
Kids
Using
Rotary
Phone
hfp://youtu.be/j6ArmonNCi8
ILONA
POSNER
©
2013
60

61. UX
TesJng
Myths
Hard
Expensive
Time
Consuming
ILONA
POSNER
©
2013
61

62. Lean
UX
Declare
AssumpJons
Create
Minimal
Viable
Product
(MVP)
Run
an
Experiment
(GOOB)
Feedback
&
Research
(Pivot)
Lean
UX
-­‐
Applying
Lean
Principles
to
Improve
User
Experience,
Jeff
Gothelf
&
Josh
Seiden,
2013
ILONA
POSNER
©
2013
62

63. Wizard
of
Oz
Technique
ParJcipants’
Roles
• User(s)
• Facilitator
• Computer
• Observer(s)
ILONA
POSNER
©
2013
63

64. User
Test

Product
Demo
ILONA
POSNER
©
2013
64

65. Usability
TesJng
of
Paper
Prototypes
“Debugging
before
wriJng
any
code!”
Layout
Workflow
Terminology
Requirements
Content
Help
ILONA
POSNER
©
2013
65

66. All
Technology
is
User
Tested!
The
only
ques=ons
are:
When?
By
Whom?
At
What
Cost!?
ILONA
POSNER
©
2012
013
66