Contenu connexe Similaire à Designing an MVP that works for your users - LeanUX NYC 2014 (20) Plus de Ariadna Font Llitjos (9) Designing an MVP that works for your users - LeanUX NYC 20141. IBM Design
Designing an MVP that works for
your users
!
!
!
!
!
April 12, 2014
@quicola #designthinking #leanux @ibmdesign
UX Lead and Development Manager, Watson Explorer
!
Ariadna Font Llitjós, PhD
2. IBM Design :: ©2014 IBM Corporation
Day Objectives
• Learn and apply lean UX techniques that you can use with your teams
!
• Learn how to focus your team on effectively delivering an MVP fast
!
• Experience collaborative and iterative design and development first hand
!
• Build up the confidence to initiate collaborative creative thinking about ideas
that have a business impact and that will wow your users.
2
3. IBM Design :: ©2014 IBM Corporation
Intro 10 min
• Make Balanced Teams
• Design challenge
!
Understand 40 min
• Stakeholders
• Empathy Maps
!
Break (10 min)
!
Explore 60 min
• Elevator Pitch
• Story board
• MVP
• Assumptions and hypothesis
!
Prototype 30 min
• Paper prototype
!
Evaluate 30 min
• Usability testing!
IBM Design :: IBM Confidential :: ©2014 IBM CorporationIBM Design :: ©2014 IBM Corporation
Agenda
3
Stakeholder Maps
Empathy Maps
Storyboard
Paper prototype
testing
Intro 10 min
• Make Balanced Teams
• Design challenge
!
Understand 40 min
• Stakeholders
• Empathy Maps
!
Coffee Break (10 min)
!
Explore 60 min
• Elevator Pitch
• Story board
• MVP
• Assumptions and hypothesis
!
Prototype 30 min
• Paper prototype
!
Evaluate 30 min
• Usability testing!
4. IBM Design :: ©2014 IBM Corporation
This is not a user experience
4
6. IBM Design : ©2014 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
PMs/POs, Designers, Developers,
others?
6
7. IBM Design : ©2014 IBM Corporation
Design a Mobile App
that enable LeanUX attendees
to network and collaborate
7
8. IBM Design :: ©2014 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
Who are our users?
8
Prototype
Evaluate
Understand
Explore
9. IBM Design :: IBM Confidential :: ©2013 IBM CorporationIBM Designcamp :: IBM Confidential :: ©2013 IBM Corporation 9
Your
User
≠
You
Your Mom
Your Daughter
Customer
Product Manager
Your Manager
Your Manager’s Manager
CEO
10. IBM Design :: ©2014 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Stakeholder Map
10
Organize stakeholders’ expectations of a release
Network diagram to establish shared ideas about stakeholders, help
the team focus on people, and guide plans for user research.
Dan
Engineer
“Give me a
challenge.”
Juan
PLM “We
started 2
weeks
behind.”
Makes things
possible for...
Helps give direction
and focus to...
11. IBM Design :: ©2014 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Exercise: Stakeholder Map (20 mins)
11
On each note, write someone
affected by the product.
On a note of another color, attach a
quote representing what the person
wants.
Label clusters and relationships.
!
Goal: Identify a big opportunity and
corresponding user to focus on
12. IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Rules of brainstorming
• Defer judgment
• Encourage wild ideas
• Build on the ideas of others
• Stay focused on the topic
• Be visual
• One conversation at a time
• Go for quantity
12
13. IBM Design :: ©2014 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Exercise: Empathy Map (15 mins)
13
Put yourself in your user’s shoes in the
context of your product. What does she need
to do? What pressures is she under?
Label any sticky notes that are unknowns
(assumptions or questions) for later inquiry.
Goal: Move from observations to shared
insights about our users
14. IBM Design :: ©2014 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Empathy Map
14
Explore multiple dimensions of target users
Quick way to have a holistic view of target user and forces
you to think about more than their role. ThinksSays
Observed Inferred
FeelsDoes
16. IBM Design :: ©2014 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Generating breakthrough ideas
16
Prototype
Evaluate
Understand
Explore
17. IBM Design :: ©2014 IBM Corporation
Elevator Pitch
For [target user]
!
who [statement of need or opportunity]
!
the [product/app name] is a [product category]
!
that [key benefit, compelling reason to buy/use].
!
Unlike [primary competitive alternative]
!
our product/app [statement of primary differentiation].
17
18. IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Exercise: Elevator Pitch (15 min)
18
For [target user]
!
who [statement of need or opportunity]
!
the [product/app name] is a [product category]
!
that [key benefit, compelling reason to buy/use].
!
Unlike [primary competitive alternative]
!
our product/app [statement of primary differentiation].
19. IBM Design :: IBM Confidential :: ©2013 IBM CorporationIBM Designcamp :: IBM Confidential :: ©2013 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM CorporationIBM Designcamp :: IBM Confidential :: ©2013 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
Exercise: Storyboard (30 min)
Work individually to tell the “To-Be” story of
your user
• Tell a human centered story (focus on the
user, rather than on screens)
• Don’t worry about making the drawings
beautiful
• Make the story seamless, with a beginning,
middle and end
• Be ready to tell your story to someone else
20. IBM Design :: ©2014 IBM Corporation
Minimal Viable Product (MVP)
• Goal: maximize validated learning about customers and users.
!
• An MVP is a (first) version of the product (or feature) that allows you to test your
ideas and assumptions as quickly and cheaply as possible
!
• The MVP works together with a build-measure-learn cycle: developing software,
gathering customer feedback, and learning from it.
!
• It is not a minimal product, it’s a strategy and process directed towards making
and selling a product to customers.
20
21. IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Exercise: MVP (10 min)
• Identify key open questions and assumptions
!
• Reframe requirements as hypotheses that can be falsifiable
21
22. IBM Design :: ©2014 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Making your ideas real
22
Prototype
Evaluate
Understand
Explore
23. IBM Design :: IBM Confidential :: ©2013 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
Why Prototype?
23
Prototyping enables rapid experimentation
• Communicate and validate
• Understand and explore
• Get feedback
• Fail fast, learn fast
• Test and decide between multiple options
24. IBM Design :: ©2014 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
Scale of prototypes
24
Understand & Explore
Communicate & Validate
High fidelityLow Fidelity
sketches
paper prototype
style study
mockups
motion studies
POC
UI spec & style guide
assets
25. IBM Design :: ©2014 IBM CorporationIBM Designcamp :: IBM Confidential :: ©2013 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Paper Prototyping
25
Paper prototyping is a variation of usability testing
where representative users perform realistic tasks
by interacting with a paper version of the interface.
!
Quick!
No technical learning curve!
Relevant feedback on early concepts!
Provides Conceptual Direction!
!
Effective!
Low Investment of Time/Resources!
Fail Early, Fail Fast!
Expedites Detailed design!
26. IBM Design :: ©2014 IBM CorporationIBM Designcamp :: IBM Confidential :: ©2013 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Exercise: Paper Prototyping (30 mins)
26
Choose the riskiest task or sub-flow that you need
to validate and prototype it using paper.
Develop a low-fidelity storyboard for user testing.
• Refine your user experience map and scenario
• Develop low-fidelity wireframes to visually prototype
the new UI
• Organize your wireframes as a testable storyboard
Focus on one specific set of interactions and
sketch it out on paper.
27. IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Try animating your paper prototypes using the POP mobile app
27
28. IBM Design :: ©2014 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
Evaluate your prototypes and ideas
28
Prototype
Evaluate
Understand
Explore
29. IBM Design :: ©2014 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
Usability Testing “Soft Skills”
29from www.cadfanatic.com
Source: cadfanatic.com
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
30. IBM Design :: ©2014 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation 30
Encourage participants to think out loud
Give them enough time to work through problems
Ensure adequate recording (audio, video, notes,
time, etc.)
Invite project team members to observe
Laugh, get frustrated, or express negative
emotion at participant
Don’t get defensive or explain your design
rationale/limitations
Ask them how they would design it
Usability Testing “Soft Skills”
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
31. IBM Design :: ©2014 IBM CorporationIBM Design :: IBM Confidential :: ©2013 IBM Corporation
IBM Confidential :: © 2014 IBM Corporation!
IBM Design :: IBM Confidential :: ©2013 IBM Corporation
31
Exercise: Paper Prototype Testing (15 min)
Give your user a well-defined task so you can test the riskiest assumptions you’ve
baked into your prototype (without telling them what specific actions/buttons to
take/click)
1 Provide an overview and a well-defined task
2 Ask participant to voice their thought and actions (giving them time to process)
3 Thank the participant
4 Debrief - what are the top 3 things you need to change/fix?