This document provides an introduction to user experience (UX) design for startups. It discusses UX principles like viability, desirability and feasibility, and emphasizes starting with understanding people through research methods like interviews, surveys and analytics. Key phases of the design process are covered, including diverging to generate ideas, deciding on a solution, prototyping, and validating designs. A variety of UX design tools and techniques are also introduced.

1. A QUICK INTRODUCTION TO
USER EXPERIENCE FOR STARTUPS

2. NOT ONLY WIREFRAMES

3. VIABILITY
DESIREABILITY
FEASIBILITY
WHAT DO PEOPLE DESIRE?
WHAT IS TECHNICALLY
FEASIBILE?
WHAT CAN BE
FINANCIALLY VIABLE?
INNOVATION
START HERE
[BUSINESS]
[PEOPLE]
[TECH]
DESIGN
ENGINEERING
BUSINESS

4. VISUAL DESIGN
SERVICE DESIGN
INDUSTRIAL DESIGN
USABILITY
BRANDING
INTERACTION
DESIGN
UX RESEARCH
EXPERIENCE
STRATEGY
SYSTEM DESIGN
DESIGN
DISCIPLINES
FOR IOT
INFORMATION
ARCHITECTURE

5. USER
EXPERIENCE
UX
CUSTOMER
EXPERIENCE
CX
UX CXResponses from
user of product &
services
Competency at
product & service
level
Responses at ALL
touch points with a
company
Competency at
corporate level

6. EXPERIENCE IS EMOTION &
HOW IT FEELS LIKE

7. ‣ THE CONSISTENCY BETWEEN YOUR STARTUP
STORY & YOUR PRODUCT & YOUR IDENTITY
[VALUES, MISSION, MEAN] & [CHINESE PORTRAIT]
T H E K E Y T O A S U C C E S S F U L
E X P E R I E N C E
‣ CUSTOMER CARE
& EMPATHY

8. BUILD TRUST

9. ASSUME PEOPLE’S
ATTENTION TO YOUR
SERVICE IS LOW

10. THE RIGHT INFORMATION AND CTA
at the right place at the right time

11. PEOPLE
HUMANS
INDIVIDUALS
DESIGN
STARTS WITH

12. 80% OF
DECISIONS
ARE MADE
WHEN
FILTERED
THROUGH
EMOTIONS
L E A R N A B O U T H U M A N
B E H A V I O U R
NEOCORTEX
LIMBIC BRAIN
REPTILIAN BRAIN
RATIONAL
EMOTIONS
INSTINCT

13. source: Netway
95%
unconscious brain
activities
5% conscious brain activities

14. S T O R Y
A R C F O R
C O N V E R S I O N
source: Netway
Reason
Action
Emotion

15. VISCERAL BEHAVIORAL REFLECTIVE
WHAT IT MAKES
YOU FEEL
WHAT IT HELPS
YOU DO
WHAT IT SAYS
ABOUT YOU
3 L E V E L O F P E R C E P T I O N S
AESTHETIC FUNCTION PRIDE
source: Don Norman

16. HOW DO YOU DESIGN FOR
AN UKNOWN FUTURE

17. THINK
MAKE
CHECK
UNDERSTAND
DEFINE
DIVERGE
DECIDE
PROTOTYPE
VALIDATE
DESIGN SPRINT LEAN UX
MESURE
BUILD
LEARN

18. S
HOW DESIGN FEELS
uncertainty / patterns / insights clarity / focus
research concept prototype design

19. DESIGN NEW BEHAVIORS

20. UNDERSTAND
01

21. WHAT DO PEOPLE NEED?
CAN THEY USE IT? USABILITY TEST
ETHNOGRAPHY & INTERVIEW
H O W T O
P E O P L E W I T H U X

22. • GET A COMMON UNDERSTANDING
• CAPTURE THE COMPLEXITY
• Being visual means to help the brain to understand things faster
• Visualizations are interactive tools that will be used, not only appreciated
B E V I S U A L

23. T H E C O N T E X T:
S T A K E H O L D E R M A P

24. STAKEHOLDER MAP
direct
stakholders
indirect stakholders
core target
group
RELATIONSHIP MAP
VENN DIAGRAM

25. other
cyclists
bikers
passer-
by
drivers
customer
support
Repairer
other VELIB
users
Repairer
YOU CAN ALSO DO
• PLACES MAP
• DEVICES MAP
EXAMPLE OF FRENCH BIKE SHARING
STOCKHOLDER MAP

26. EMPATHIZE
PUTTING YOURSELF IN ANOTHER PERSON'S SHOES

28. A T T I T U D E
WHAT PEOPLE SAY THEY DO WHAT THEY ACTUALLY DO
B E H A V I O U R

29. GET INSIGHTS

30. OBSERVE, INTERACT, IMMERSE
ETHNOGRAPHY

31. source: adaptive path

32. CONTEXTUAL
INTERVIEWS

33. ASK PEOPLE TO
WRITE A DAILY DIARY
OR FILM THEMSELVES

34. P R E P A R E F O R
F I E L D W O R K
WHAT DO YOU ALREADY KNOW? WHAT DO YOU WANT TO KNOW?
Which hypotheses do
you want to test?
Which insight are
you missing?

35. SATISFIED
UNSATISFIED
EMOTIONSCALEWHY’S
PHASESINTHE
EXPERIENCE
INTERVIEWEE AND CONTEXT
OF THE INTERVIEW
Ask the user or employee to describer his or her current experience. First, ask what the different steps are and then detail the user experience.
Ask, for the most positive and the most negative experiences, how the user or employee felt and what he or she thought.
Get to the bottom of the underlying reasons. Don’t hesitate to ask follow-up questions
« TELL ME YOUR PAST EXPERIENCE WHEN YOU USED IT STEP BY STEP »

36. Q U E S T I O N S D U R I N G
T H E I N T E R V I E W
HOW DID YOU FEEL WHEN…….. ?
WHAT SEEMS TO BE THE TROUBLE?
WHY? WHY? WHY?
WHAT CONCERNS YOU THE MOST ABOUT……………..?
WHAT IS HOLDING YOU BACK FROM…………………?
WHAT SEEMS TO BE YOUR MAIN OBSTACLE TO………………?

37. DON’T ASK WOULD YOU USE IT?
ASK QUESTION ABOUT THE PAST
Q U E S T I O N S D U R I N G
T H E I N T E R V I E W

38. Wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip

39. EXAMPLE OF CONTEXTUAL JOURNEY MAP

40. INVITE STAKEHOLDERS
TO REVIEW THE JOURNEY
ADD THEIR QUOTES &
DEFINING WORDS
IDENTIFY PAINFUL
MOMENTS
[POST-ITS]
[STICKERS]

41. S U R V E Y S
TELLS YOU
PEOPLE’S
OPINION
Q U A N T I T A T I V E R E S E A R C H

42. ADWORDS, TRENDS
MOBILE RESEARCH STUDY
GOOGLE ANALYTICS
MIXPANEL
A N A L Y T I C S
OBSERVE USERS
BEHAVIOR
Q U A N T I T A T I V E R E S E A R C H

43. INTERPRETATION
LOOKING FOR THE AHA MOMENTS

44. WHICH PROBLEM WE
NEED TO FOCUS ON
FIRST?
EXAMPLE OF NEEDS REPORT

45. CAUSE DIAGRAM
PROBLEM DIAGNOSTIC
direct causes
underlying causes
core problem
contributing factors

46. DEFINE
02

47. THE
PERSONA

48. PHYSICAL SPACE
SOCIAL INFLUENCE
EMOTIONAL RELATIONSHIP
HABITS
LEARNING / TECH SAVY
ECONOMIC UTILITY
PRACTICAL UTILITY
UNDERSTAND
FACTORS THAT
INFLUENCE
USAGES

49. A FREE ONLINE TOOL FOR YOUR PERSONAS XTENSIO

51. MAILCHIMP PERSONAS

52. AIRBNB PERSONAS

53. E X P E R I E N C E
M A P

55. T H E M A P A N A T O M Y
Touchpoint = Any point of contact between People and your service
• TIMELINE
• STAKEHOLDERS
• EVENTS OR
ACTIVITIES
• PHASES
• RELATED
INFORMATION
• TOUCHPOINTS
• CHANNELS
• DEVICES
• PLACES
• EMPATHY
• RELATIVE HIGHS
AND LOWS
• PAIN POINTS
AND/OR
OPPORTUNITIES`
• BACKOFFICE
BEHAVIOR
1 PERSONA PER STAKEHOLDER

56. EMPATHIZE AT EACH STEPS
source: adaptive path
ZOOM ON EXPERIENCE

61. A C Q U I S I T I O N
S T A N D A R D S

63. B 2 B S O F T W A R E P U R C H A S E

64. FOCUS LESS ON HOW PRETTY IT IS, MORE ON HOW VALUABLE IT IS
IT’S A LIVING TOOL FOR YOUR TEAM
PUT IT ON YOUR OFFICE WALLS
REFINE IT WHEN YOU GET INSIGHTS

65. ONLINE TOOLS
MURAL.LY
REALTIMEBOARD (FREE)

66. source: Airbnb

67. DIVERGE
03

68. W H A T I S I D E A T I O N
A 1hour workshop with your team where you generate many
possible solutions to your problem
• Generating maximum innovation potential in a short amount of time
• Incorporate different perspectives
• Build excitement
W H Y

69. GATHER INSPIRATION WITH PINTEREST

70. PRODUCT HUNT

71. • Defer judgement.
• Encourage wild ideas.
• Build on the ideas of others.
• Stay focused on the topic.
• One conversation at a time.
• Be visual.
• Go for quantity.
Start with « what if… »
I D E A T I O N R U L E S

74. Create your own cards
Bring 3D artifacts like
LEGOS, or other toys
SOURCE: FUTURICE

76. DECIDE
04

77. PROTOTYPE
05

80. SITEMAPS

81. TASK FLOW

82. WIREFRAME SKETCHING

83. WIREFRAME SKETCHING

84. WIREFRAME SKETCHING

85. WIREFRAME SKETCHING

86. IDEOEXAMPLE OF APP PROTOTYPE
https://vimeo.com/13377903

88. HTTPS://WWW.GLIFFY.COM/FLOWCHART FOR YOUR APP

89. HTTPS://MARVELAPP.COM/STATIC/ASSETS/DOWNLOADS/DEVICES.PDF
PRINTABLE TEMPLATE FOR
WIREFRAME SKETCHING

90. HTTPS://MARVELAPP.COMWEB, MOBILE, WATCH

91. S P E C T R U M O F F I D E L I T Y
• Your audience must understand it : employ their language
• Simulate the crucial parts of the experience first
• Choose the right level of detail, finishing and perfection.

92. T O O L S F O R A P P W I R E F R A M I N G
Free online tools for non-designers
‣ Gliffy
‣ Mockflow
‣ Marvel (INTERACTIVE)
Advanced
desktop softwares
‣ Sketch app (UX/UI)
‣ Axure RP Pro
‣ Adobe Indesign
‣ Adobe Fireworks

93. T O O L S F O R G R A P H I C S
On your laptop
‣ Apple keynote
‣ Powerpoint
Free online tools for non-designers
• realtimeboard.com
• easy.ly
• Icons:
‣ Thenounproject (edit icons with Gimp, Inkscape)
‣ Freepik
• Creative Commons Images:
‣ Pexels
‣ Morguefile
Advanced tools
‣ Inkscape [free]
‣ Gimp [free]
‣ Adobe illustrator
‣ Adobe Indesign

94. VALIDATE
06

95. PROVE IMPROVE
FROM ADAPTIVE PATH

96. U S A B I L I T Y
T E S T I N G
ENABLES YOU TO KNOW:
CAN THEY USE IT?

99. • Which part of the user journey do you want to test
• WHAT do you want to know? Prepare tasks and scenarios
• HOW do you want to execute the element for the test?
• PROPS Which additional items do you need? laptop, tablet, camera,
dictaphone.. BRING YOUR OWN!
• WHO will be the tester? Which role do you need to execute the test?
• WHO will be the Test Admin?
PREPARE YOUR USABILITY TEST

100. • PRESENT YOURSELF What’s your job?
• Don’t tell your company name if you want to test your brand awareness
• Ask the tester to constantly think aloud, and be honest
• GIVE INSTRUCTIONS with an accurate context
Ex: « You are (persona 1) in a (place) at (hour) and are looking for (specific need),
tell me what do you do…
• ASK QUESTIONS on why she did something you don’t expected
USABILITY TEST PROTOCOLE

101. DON’T JUSTIFY YOUR DESIGN
ASK QUESTIONS, LISTEN AND DON’T ANSWER
If the tester is curious, debate about it after the test
LISTEN, TAKE NOTES
You can print your screens and annotate on it

102. PROBLEMS YOU CAN FIND WITH
JUST A FEW TEST PARTICIPANT
PROBLEMS YOU NEED TO FOCUS ON
DO IT WITH 5 PEOPLE
No big report, email the whole team about your key learnings
You can sort feedbacks in a tool like Trello, Slack, or Github

103. UXPIN TOOLKIT

104. http://peek.usertesting.com/

105. THINK
MAKE
CHECK
UNDERSTAND
DEFINE
DIVERGE
DECIDE
PROTOTYPE
VALIDATE
DESIGN SPRINT LEAN UX
MESURE
BUILD
LEARN

106. H U M A N I Z E
Y O U R P R O D U C T

107. T O N E I N I N T E R A C T I O N S ,
V I S U A L & C O P Y W R I T I N G
What kind of humor?
English cup of tea
Burlesque
Hyperbolic
Parodic
Satirical
Juvenile
Ironic

108. E M O T I O N I N
M I C R O - I N T E R A C T I O N S

110. noemie.prin@gmail.com
@noemieprin
BIG UX ISSUE?
CONTACT ME