Weitere Àhnliche Inhalte
Ăhnlich wie Launch Academy Introduction to Lean UX Workshop - February 2014 (20)
KĂŒrzlich hochgeladen (20)
Launch Academy Introduction to Lean UX Workshop - February 2014
- 1. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
An Introduction to Lean User
Experience Design
Marc Baumgartner
Founder + Design Director
Codename Design
- 2. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Welcome
- 3. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Agenda
Morning Session:
8:45 Registration
9:00 Course Introduction
9:15 Lean UX Principles
10:00 - 10:15 Break
10:15 Lean UX Processes
12:00 Lunch
Afternoon Session:
1:00 Project Introduction and Brief
2:00 Develop User Stories Exercise
2:30 Wireframes Exercise
3:10 - 3:20 Break
3:20 Prototypes Exercise
4:45 Presentations and feedback.
5:15 Wrap Up
- 4. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014© Codename Design 2014
Copy writing and photo credit @marcbx.
- 5. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
10â000 FT.
- 6. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Ash Maurya, Running Lean, 2012
â... what separates successful start ups from
unsuccessful ones is (...) that they ïŹnd a plan that
works before running out of resources.â
- 7. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Letâs Make a Product â old school
© Launch Academy / Codename Design 2014
- 8. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Perceived âLearningâ Curve
© Launch Academy / Codename Design 2014
- 9. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Youâre wrong about something.
- 10. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
You just donât know what that "
âsomethingâ is yet.
- 11. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Actual âValidated Learningâ Curve
© Launch Academy / Codename Design 2014
- 12. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
The goal of Lean UX
- 13. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Iterate as quickly as you can"
to get as much validated learning"
as you can for the least effort.
- 14. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
The goal of Lean UX
© Launch Academy / Codename Design 2014
- 15. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
LEAN"
DESIGN"
- 16. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
- 17. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Design builds knowledge.
- 18. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
- 19. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
DESIGN MATERIALIZES"
KNOWLEDGE
- 20. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Increase in âsharedâ knowledge
© Launch Academy / Codename Design 2014
- 21. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
DESIGN IS"
ITERATIVE
- 22. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
The âDesignâ Process
© Launch Academy / Codename Design 2014
- 23. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
LEAN UX IS"
ABOUT âMAKINGâ
- 24. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
The Lean Process
© Launch Academy / Codename Design 2014
- 25. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
LEAN UX IS NOT ABOUT"
BEING âDONEâ
- 26. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
IT IS ABOUT BEING READY"
FOR THE NEXT ITERATION
- 27. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
EXPOSE YOURSELF
âŠbefore youâre ready
- 28. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
MINIMUM"
VIABLE"
PRODUCT
- 29. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Eric Ries
"The minimum viable product is that version of a
new product which allows a team to collect the
maximum amount of validated learning about
customers with the least effort." "
- 30. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
âŠ.the Minimum Viable Gas Station (photo credit to @NitiBhan).
- 31. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
JUST"
ENOUGH"
DESIGN
- 32. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
May cause nausea.
âŠitâs o.k. if you feel queasy
you kind of get used to it.
- 33. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Lean User Experience Design
- 34. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Lean UX is a process that:
âąâŻPlaces a primary focus on creating value for customers
âąâŻMinimizes the time it takes to learn
âąâŻMinimizes the cost of each lesson learned
âąâŻAllows you to communicate what youâve learned with the team
âąâŻAllows you to act on that learning so you can create more value for customers
âąâŻAllows you to observe whether youâve actually created more value
© Launch Academy / Codename Design 2014
- 35. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
User Centered Design."
Agile Methodologies."
Data Driven Design.
- 36. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
User Centered Design
© Launch Academy / Codename Design 2014
- 37. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
User Centered Design
âąâŻThe Actors (or users, or customers)
âąâŻThe Objects (the material atomic bits people work with / âcontentâ)
âąâŻThe Goals (what actors want to achieve in context)
âąâŻThe Activities (the steps they need to go through to complete goals)
âąâŻThe Interactions between the actors and the objects to reach their goals
âąâŻThe Context (the physical world including device, social etcâŠ)
© Launch Academy / Codename Design 2014
- 38. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Agile Methodologies
© Launch Academy / Codename Design 2014
- 39. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Agile Methodologies
1.⯠Individuals and interactions over processes and tools
2.⯠Working software over comprehensive documentation.
3.⯠Customer Collaboration over contract negotiation
4.⯠Responding to change over following a plan
- 40. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Agile Methodologies â User Stories
As an [ actor type ]
I want to [ accomplish something ]
So that [ something of value happens ]
âAs a frequent purchaser I want to be able to save an item to my wish list
so that I can return to purchase my saved items.â
- 41. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Agile Methodologies â User Stories
© Launch Academy / Codename Design 2014
- 42. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Agile Methodologies â User Stories
© Launch Academy / Codename Design 2014
User Stories (extended):
âąâŻAcceptance Criteria
âąâŻDiscussion notes
âąâŻDependencies / Related stories
âąâŻComponents (what parts of the app(s) are affected, what out of app experience
elements are required (for example: emails sent)
âąâŻLinks to resources like assets and reference artifacts like diagrams, wireframes,
mockups
- 43. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
How Stories ïŹt into the ïŹow
1.⯠Understand the problem, then;
2.⯠Model solutions at a user scale:
âąâŻWrite A Story / Design the test
âąâŻModel and discuss possible solutions
âąâŻPrioritize / decide on an approach
âąâŻTry to invalidate the approach yourself
âąâŻCreate an artifact / prototype of the appropriate fidelity
âąâŻTest... Measure... Iterate (go back to #1).
- 44. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Data-Driven Design
âąâŻWhatâs the problem?
âąâŻWhatâs your assumption about the problem?
âąâŻWhat are you going to measure?
âąâŻHow are you going to measure?
âąâŻWhat results constitute success?
âąâŻWhat is the threshold for validation?
- 45. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Data-Driven Design
© Launch Academy / Codename Design 2014
- 46. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Data-Driven Design â Measuring Example
âąâŻAre people using our product?
âąâŻAre they using all of it or only parts of it?
âąâŻAre they using it in the way we expected?
âOur assumption was that users would primarily use the marketplace matching
features we built into the MVP to complete a transaction once per month.â
- 47. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Data-Driven Design â Measuring Example
Weâll measure app usage for the past 30 days using analytics looking
specifically at transaction traffic and funnels looking for completed transactions
and drop-offs. Weâll need at least 1000 transactions from after release #3. Weâll
talk to at least 8 people locally to get qualitative feedback.
âąâŻIf we get an average of 1 transaction per user per month weâre on the right track, weâll work on
aiming higher, open the social loop and test again at scale;
âąâŻIf weâve had an average of 80% of users with 1 transaction every 30 days weâll take that as a good
sign, pay special attention to qualitative feedback.
âąâŻIf we get less than 80% weâll look at both qualitative and quantitative data to see where the drop
offs are and if there are any specific branding / market issues with the offering.
- 48. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Data-Driven Design â Appropriate Tests
Depends on what stage your startup is at:
1.⯠Worth building ï Am I meeting a need (early validation)
2.⯠Empathy ï Landing page conversion
3.⯠Stickiness ï Engagement / churn / customer funnel
4.⯠Virality ï Customer acquisition cost / viral co-efficient
5.⯠Revenue ï LTV / upselling
6.⯠Scale ï resellers / support costs etcâŠ
For more details see âLean Analyticsâ by Alistair Croll & Benjamin Yoskovitz
- 49. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Questions
- 50. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Break
- 51. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Lean UX Processes"
Overview
- 52. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
LEAN UX IS"
ABOUT âMAKINGâ
- 53. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
MAKING WHAT?
âŠglad you asked
- 54. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
MAKING MODELS
- 55. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
WHAT IS"
WHAT COULD BE
© Launch Academy / Codename Design 2014
- 56. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
PROBLEMS"
SOLUTIONS
© Launch Academy / Codename Design 2014
- 57. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
PROBLEM HYPOTHESIS"
âWe are solving a worthwhile problem, one
that people will pay for.â
© Launch Academy / Codename Design 2014
- 58. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
SOLUTION HYPOTHESIS"
âWe are solving a validated problem in a way
people will love to use.â
© Launch Academy / Codename Design 2014
- 59. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
MAKING MODELS
âŠof things that are, and things that are
about to be.
© Launch Academy / Codename Design 2014
- 60. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Models"
(to understand the problem)
Personas
Observation
Interviews
User Journeys
Business Models
Analytics
Models
(to propose solutions)
Story Boards
Diagrams
Wireframes
Mockups
Interactive Prototypes
- 61. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Lean UX Discovery"
Understanding The Problem
- 62. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
When discovery applies
âąâŻNew products
âąâŻNew features
âąâŻExisting products
âąâŻExisting features
âąâŻCompetitive analysis.
- 63. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Models"
(to understand the problem)
Personas
Observation
Interviews
User Journeys
Business Models
Analytics
Models
(to propose solutions)
Story Boards
Diagrams
Wireframes
Mockups
Interactive Prototypes
- 64. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1"
(Proto) Personas
- 65. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1. Proto Personas
© Launch Academy / Codename Design 2014
- 66. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1. Proto Personas
© Launch Academy / Codename Design 2014
- 67. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1. Proto Personas
© Launch Academy / Codename Design 2014
- 68. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1. Proto Personas
Good for:
âąâŻHumanizing the users to the team;
âąâŻConfirming assumptions around your identified personas;
âąâŻQualitative feedback.
© Launch Academy / Codename Design 2014
- 69. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1. Proto Personas
Tools:
âąâŻPen & Paper
âąâŻOmnigraffle
âąâŻIllustrator / InDesign
© Launch Academy / Codename Design 2014
- 70. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2"
Observation
- 71. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2. Observation
âSalary Men" by Marc Baumgartner, 2013
© Launch Academy / Codename Design 2014
- 72. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
âSalary Men" by Marc Baumgartner, 2013
2. Observation
"Cyclops" by Jaime Pitarch, 2002
Good for:
âąâŻFinding behaviour patterns;
âąâŻUnscripted qualitative findings;
âąâŻFinding workarounds that people are already using to deal with pain points;
âąâŻThe goal here is not to do exhaustive ethnographic research, observe to
validate your proto-personas
© Launch Academy / Codename Design 2014
- 73. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2. Observation
"Cyclops" by Jaime Pitarch, 2002
Types of Observation
âąâŻComplete Observation - street life, trend spotting
âąâŻObserver as Participant - you observe and guide (interviews, focus groups,
workshops)
âąâŻParticipant as Observer - you participate and subjects know you're observing
(joint activities, card sorting)
âąâŻComplete Participation - you participate with subjects unaware (think secret
millionaire / undercover boss)
© Launch Academy / Codename Design 2014
- 74. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Tools:
âąâŻPen & Paper
âąâŻCamera / Video
âąâŻNote software (evernote, google docs)
âąâŻCamera / Video
âąâŻProps
âąâŻRelease / Consent Forms (if required)
âąâŻThank you notes
2. Observation
© Launch Academy / Codename Design 2014
- 75. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3"
Interviews
- 76. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Interviews
http://www.reed.co.uk/career-advice/blog/2012/april/body-language-interview-dos-and-donts
- 77. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Interviews
Good for:
âąâŻConfirming assumptions around your identified personas;
âąâŻQualitative feedback.
âąâŻTesting the solutions-based models
© Launch Academy / Codename Design 2014
- 78. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Interviews
http://www.reed.co.uk/career-advice/blog/2012/april/body-language-interview-dos-and-donts
Types of Interviews
âąâŻStructured Interviews - following a script of questions
âąâŻUnstructured Interviews - let the subject's answers guide you
© Launch Academy / Codename Design 2014
- 79. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Tools:
âąâŻSound recording device
âąâŻPen & Paper
âąâŻNote software (evernote, google docs)
âąâŻCamera / Video
âąâŻLoose Script
âąâŻProps
âąâŻRelease / Consent Forms / Honorarium / Thank you notes
3. Interviews
© Launch Academy / Codename Design 2014
- 80. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4"
User Journeys
- 81. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. User Journeys
Marc Baumgartner, 2013
© Launch Academy / Codename Design 2014
- 82. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. User Journeys
Good for:
âąâŻModeling existing issues on a known experience that could be improved;
âąâŻModeling a system from scratch during product development;
© Launch Academy / Codename Design 2014
- 83. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. User Journeys
© Launch Academy / Codename Design 2014
- 84. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Tools:
âąâŻPen & Paper
âąâŻWhiteboard / Camera
âąâŻLucid Charts
âąâŻOmnigraffle
âąâŻAny diagramming software
âąâŻAnalytics
4. User Journeys
Codename Design
© Launch Academy / Codename Design 2014
- 85. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5"
Analytics
- 86. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5. Analytics
© Launch Academy / Codename Design 2014
- 87. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5. Analytics
Good for:
âąâŻQuantitative feedback;
âąâŻConfirming assumptions around your identified personas through
demographic information;
âąâŻFinding drop off in funnels;
âąâŻFinding popular content / usage patterns
âąâŻMuch moreâŠ
- 88. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5. Analytics
- 89. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Tools:
âąâŻGoogle Analytics
âąâŻMixpanel
âąâŻKISS Metrics
âąâŻOthersâŠ
5. Analytics
© Launch Academy / Codename Design 2014
- 90. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
6"
Business Models*
- 91. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
6. Business Models
© Launch Academy / Codename Design 2014
- 92. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
6. Business Models
Good for:
âąâŻModeling product/market fit;
âąâŻModeling the high level dependencies on partners and providers;
âąâŻModeling product positioning and unfair advantage.
© Launch Academy / Codename Design 2014
- 93. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Tools:
âąâŻWhiteboard / Camera
âąâŻPaper & Marker / Stickies
âąâŻOmnigraffle
âąâŻEtcâŠ
To learn more make sure to check out the upcoming Launch Academy course
offerings.
6. Business Models
© Launch Academy / Codename Design 2014
- 94. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Questions
- 95. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Lean UX Artefacts"
Modeling The Solution
- 96. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Models "
(to understand the problem)
Personas
Observation
Interviews
User Journeys
Business Models
Analytics
Models
(to propose solutions)
Story Boards
Diagrams
Wireframes
Mockups
Interactive Prototypes
- 97. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1"
Story Boards
- 98. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
1. Storyboards
© Launch Academy / Codename Design 2014
- 99. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Good for:
âąâŻCommunicating context issues (where a product is being used / device types /
constraints)
âąâŻCommunicating context based service cases (like loss of connection)
âąâŻCommunicating high level goals and use cases to funders / partners
1. Storyboards
© Launch Academy / Codename Design 2014
- 100. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Tools:
âąâŻPen & Paper
âąâŻWhiteboard / Camera
âąâŻAdobe Illustrator / InDesign
âąâŻOmnigraffle
1. Storyboards
© Launch Academy / Codename Design 2014
- 101. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2"
Diagrams
- 102. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2. Diagrams
Codename Design
© Launch Academy / Codename Design 2014
- 103. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2. Diagrams
Good for:
âąâŻCommunicating user goals and priorities;
âąâŻCommunicating business logic and system processes;
âąâŻCommunicating which site / app components are involved in the process
âąâŻCommunicating what screens are required
âąâŻSanity checking the scope, discovering alternative / simplified option
âąâŻFinding complementary experiences
© Launch Academy / Codename Design 2014
- 104. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2. Diagrams
Codename Design
© Launch Academy / Codename Design 2014
Single flow split into stories
- 105. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
2. Diagrams
Tools:
âąâŻPen & Paper
âąâŻWhiteboard / Camera
âąâŻLucid Charts
âąâŻOmnigraffle
âąâŻAdobe Illustrator / InDesign
âąâŻAny diagramming software
© Launch Academy / Codename Design 2014
- 106. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Sidetrack"
âFidelityâ
- 107. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Artifacts can be created at different ïŹdelities
© Launch Academy / Codename Design 2014
- 108. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Artifacts can be created at different ïŹdelities
Fidelity you use depends onâŠ
âąâŻWhat youâre trying to validate;
âąâŻWho your audience is;
âąâŻHow much time you have.
© Launch Academy / Codename Design 2014
- 109. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Different types of ïŹdelity
© Launch Academy / Codename Design 2014
- 110. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Different types of ïŹdelity
âąâŻVisual Fidelity: How close the final visual design is the prototype?
âąâŻBehavioural Fidelity: How closely does the prototype demonstrate the
interaction?
âąâŻContent Fidelity: Are you using placeholder or the actual copy for calls to
action and buttons?
âąâŻContextual Fidelity: How close to the device and its intended context is the
prototype being demonstrated?
For more see http://www.slideshare.net/austingovella/hacking-ux-zombies
- 111. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Comparison of Artefacts
© Launch Academy / Codename Design 2014
- 112. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3"
Wireframes
- 113. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Wireframes
© Launch Academy / Codename Design 2014
- 114. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Wireframes
Good for:
âąâŻCommunicating vision, layout and visual hierarchy at a screen level;
âąâŻCommunicating relationship between content and images;
âąâŻCommunicating navigation and annotating actions;
âąâŻGetting content and SEO teams on the same page
âąâŻTesting your categorization scheme
- 115. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Wireframes
Lean Version:
âąâŻWork fast, sketchy and as a team
âąâŻUse white boards and sketch templates
âąâŻDraw and talk, discuss elements as you draw
âąâŻUse your space
âąâŻDocument with phone / camera
âąâŻMove on
© Launch Academy / Codename Design 2014
- 116. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Wireframes â work fast
© Launch Academy / Codename Design 2014
- 117. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Wireframes â use your space
© Launch Academy / Codename Design 2014
- 118. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
3. Wireframes
Tools:
âąâŻPen & Paper & Stickies & Tape & Whiteboards,
âąâŻAdobe Illustrator
âąâŻOmnigraffle
âąâŻAxure RP
âąâŻUXPin, Balsamique, Hotgloo +100 apps,
© Launch Academy / Codename Design 2014
- 119. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4"
Mockups
- 120. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. Mockups
- 121. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. Mockups
Good for:
âąâŻTesting the look of the app / site at the pixel level;
âąâŻBranding;
âąâŻExecution of communication;
âąâŻAesthetic patterns
âąâŻTesting look, pixel level, branding, execution of communication, aesthetic
© Launch Academy / Codename Design 2014
- 122. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. Mockups
Lean Version:
âąâŻIf itâs faster to go straight to higher fidelity, do it;
âąâŻWork in a way that allows you to use the same mockups sharing knowledge of
how to build the final product and what the product looks like;
âąâŻAnnotate your mockups like you would wireframes if you need to, notes on
mockups can help you use the same mockup for multiple stories
âąâŻUse an indexing system to number your mockups / screens;
© Launch Academy / Codename Design 2014
- 123. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. Mockups â same mockup for multiple stories
- 124. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
4. Mockups
Tools:
âąâŻAdobe Illustrator, Fireworks, Photoshop (only for final assets);
âąâŻInvision;
âąâŻproto.io;
âąâŻMoreâŠ
© Launch Academy / Codename Design 2014
- 125. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5"
Protoypes
- 126. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5. Prototypes
© Launch Academy / Codename Design 2014
Lo-fidelity sketch turn into
simple interactive
prototype using POP
- 127. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5. Prototypes
Good for:
âąâŻAn alternative to the requirements driven approach to providing descriptive
artefacts;
âąâŻCommunicating the look and feel of the app / site in context;
âąâŻCommunicating flows and interactions;
âąâŻCommunicating screen states;
âąâŻGenerating discussion, iterating solutions
© Launch Academy / Codename Design 2014
- 128. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5. Prototypes
© Launch Academy / Codename Design 2014
Simple linear process
demonstrated using Adobe
Illustrator and Dropbox
- 129. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
5. Prototypes
Lean Version:
âąâŻUnderstand what youâre testing and your audience (figure out what fidelity
youâll need, pick the appropriate tool for prototyping)
âąâŻPlan a little â prototype the rest
âąâŻPrototype only what you need to test
âąâŻFake it / fudge it whenever you can
âąâŻWork in a way that you can build on your prototype
© Launch Academy / Codename Design 2014
- 130. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Tools:
âąâŻPaper
âąâŻCamera / Dropbox
âąâŻPOP (turn sketches into interactive prototypes)
âąâŻAdobe Fireworks (Mac OS) / Axure RP (Mac / Windows);
âąâŻAdobe Illustrator / Photoshop w/Dropbox;
âąâŻHTML5;
âąâŻVisio / Hotgloo + many, many moreâŠ
© Launch Academy / Codename Design 2014
5. Prototypes
- 131. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
- Afternoon Workshop -
- 132. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
Resources
The Lean Startup â Eric Reiss
Lean UX â Gothelf / Seiden
Running Lean â Ash Maurya
UX for Lean Stratups â Laura Klein
Lean Analytics â Croll / Yoskovitz
Agile Experience Design â Ratcliffe / McNeill
Rocket Surgery Made Easy â Steve Krug
Interviewing Users â Steve Portigal
Prototyping â Todd Zaki Warfel
Business Model Generation â Osterwalder / Pigneur
The Four Steps to the Epiphany â Stevn Gary Blank
- 133. © Launch Academy / Codename Design 2014© Launch Academy / Codename Design 2014
End