Building an MVP that works for
users







Ariadna Font





UX Lead @Vivisimo, an IBM Company

@quicola #leanux #ale2012            ariadna.font.cat
The Goals


  THEORY:

  •  Brief introduction of a few Lean UX techniques you
     can apply at different development stages

  PRACTICE 

  •  Focus on delivering an MVP fast with user-driven
     design/development
The Plan
                                      
45 min practice
 10 min theory



                                  




                                      Brief Description of UX techniques

                                  

                                  

                                      Collaborative design session - Build a Mobile App!

                                          
User Research, Scoping, Prototyping and Testing
UX techniques @Product Development Stages

Research &         Scoping and         Prototyping
            Development
 Testing
                     …
                                                                                                         
Analysis
          Initial Design
Contextual         Collaborative       Sketches
               BDD
                 Quantitative
inquiry (CI)
      design sessions     
                       
                    Usability Testing

                  (Inception deck)
   Wireframes
             Just-in-time (JIT)   
Personas
          
                   
                       design
              Pair testing

                  Storyboard 
        Paper prototype
        
                    
Empathy map
       
                   
                       Wireframes
          Controlled

                  Sketchboard
        Paper prototype                              experiments (A/B
Stakeholder map
   
                   Usability Testing
                           Testing)

                  Elevator pitch
     
                                            
User Experience    
                   Qualitative Usability                        Heuristic
map
               Flow diagram
       Testing
                                     evaluation

                  
                   
                                            
Journey map
       Stories
            Mockups
                                     Cognitive

                  
                   
                                            walkthrough
Heuristic          Story map
          Functional prototype
                        
evaluation
        
                   
                                            

                  “Agile schedule”
Cognitive          
walkthrough
       BDD
                   





Benchmarking
Lean UX Techniques Briefly Explained
Empathy Map @Research & Analysis

Explore a target user (persona) from different perspectives:
  Who am I? Behavior, See –Motivations, Do – Features, Say, Feel


Who does it? The Team

Key Benefits:
•  Very quick way to have a holistic view of your target user

•  Forces you to think about more than their role

•  Allow team to ground communication throughout
   development
Stakeholder mapping @Research & Analysis
A network diagram of the people involved with (or impacted by) a
given system design

Who does it? The Team





Key Benefits:
•  Establish shared ideas about stakeholders

•  Help team focus on people, not technology

•  Guide plans for user research

•  Document research activities
Stakeholder mapping @Research & Analysis 

Tips:

•  Draw simple icons to represent individual people

•  Label individuals by specific role

•  Write a speech-bubble to summarize thoughts and feeling

•  Draw lines with arrows connecting the people

•  Label lines to describe relationships between people

•  Circle and label related groupings
Elevator Pitch @Scoping
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]!


Who does it? The Team          




Key Benefits:
•  Allows team to focus on differentiator feature(s) and direct their energy to
   features with the highest business value

•  Quick and inexpensive
Storyboard @Scoping

Use of story telling to quickly visualize/share a solution to specific
problem making use of personas and their behaviors, stories and
any known constraints.

Who does it? The Team

Key Benefits:
•  Help us think about the problem in a creative way

•  Facilitates focused communication 

•  Affordable and easy to do
Sketchboard @Scoping/@Prototyping

It’s like story boarding but with sketches, almost like a biomap of
the system you are building or about to build.





Who does it? Team with UX/designer’s help





Key Benefits:
•  Provides Big Picture using initial design ideas

•  Very iterative and highly collaboratively

•  Very focused requirement discussions
Flow diagram @Prototyping

Visualize the workflow the user has to follow through the
application to complete a task or achieve a goal.
    Can I use it? 


Who does it? The Team






Key Benefits:
•  Quick way to run through the system from a user perspective 

•  Allows you to identify gaps in your current flow

•  Affordable and easy to do
Wireframes @Prototyping

Grayscale mockups showing layout and position of page elements
(can range from low-fidelity to exact grid-based resolution)

Who does this? Typically UX, designer, but anyone can do it!

Key Benefits:
•  Easiest/cheapest way to realize and test ideas

•  Great to get early feedback

•  Can be done at any stage of development
Paper prototype usability testing @Any time

Usability testing on paper versions of wireframes or sketches that
users can simulate slicks and talk through their thoughts and
decisions

Who does it? Anyone can do this (be an observer)               




Key Benefits:
•  Fastest and cheapest way to validate ideas/assumptions

•  Results can be fed back into the design process
   immediately 

•  You can do this at any time you are not sure what is the best UI for a specific
   problem
To learn more about how to run your own UT…

    Read this book
Let s Practice!

Collaborative Design Session
Challenge




         Develop a Mobile App that helps 
        promote networking and interaction 
       between all unconference attendees
2 min
Form teams of 4-6 people

Introduce yourself (role, something unusual)





You will collaboratively work on:
    1.  User Research and Analysis
    2.  Scoping
    3.  Prototyping 
    4.  Usability Testing
10 min
1. Research & Analysis

As a team, pick a (new) technique and apply it to start
building your Mobile App:

Empathy map (template) or Stakeholder map (tips
slide)

Question: 
  Who are your users? What do they need/want?
10 min
2. Scoping

Pick one technique and apply it to start defining your
MVP functionality:

Elevator pitch (template) or Must vs Nice to haves

Question: 
  What do they want to do with the app? What’s our
  business proposition and the value added?
15 min
3. Prototyping

Now, pick a technique and apply it to design your
killer feature (differentiator):

Flow diagram (template) or other paper artifact that
you can use to do UT with 




Question: 
  Can I use it?
5 min
4. Usability Testing

Now let s test your paper prototype!

Question:
 Can somebody outside your team use it? 
    •  Recruit user(s) from other teams
    •  Do they know what they can do? and how to
     do it?
    •  Are there any big usability issues that would
     prevent your MVP from being broadly adopted?
Retrospective... 

•  What was your favorite part of the session?

•  What was your least favorite part?

•  Will you be able to take something you learned in this
  session back to your work/life? (if so, what?) 

•  Any final thoughts or questions?
The Goals


  THEORY:

  •  Brief introduction to a few Lean UX techniques you
     can apply at different development stages

  PRACTICE 

  •  Focus on delivering an MVP fast with user-driven
     design/development
@quicola #leanux #ale2012 ~ ariadna.font.cat

Thanks!

Building an mvp that works for users

  • 1.
    Building an MVPthat works for users Ariadna Font UX Lead @Vivisimo, an IBM Company @quicola #leanux #ale2012 ariadna.font.cat
  • 2.
    The Goals THEORY: •  Brief introduction of a few Lean UX techniques you can apply at different development stages PRACTICE •  Focus on delivering an MVP fast with user-driven design/development
  • 3.
    The Plan 45 min practice 10 min theory Brief Description of UX techniques Collaborative design session - Build a Mobile App! User Research, Scoping, Prototyping and Testing
  • 4.
    UX techniques @ProductDevelopment Stages Research & Scoping and Prototyping Development Testing … Analysis Initial Design Contextual Collaborative Sketches BDD Quantitative inquiry (CI) design sessions Usability Testing (Inception deck) Wireframes Just-in-time (JIT) Personas design Pair testing Storyboard Paper prototype Empathy map Wireframes Controlled Sketchboard Paper prototype experiments (A/B Stakeholder map Usability Testing Testing) Elevator pitch User Experience Qualitative Usability Heuristic map Flow diagram Testing evaluation Journey map Stories Mockups Cognitive walkthrough Heuristic Story map Functional prototype evaluation “Agile schedule” Cognitive walkthrough BDD Benchmarking
  • 5.
    Lean UX TechniquesBriefly Explained
  • 6.
    Empathy Map @Research& Analysis Explore a target user (persona) from different perspectives: Who am I? Behavior, See –Motivations, Do – Features, Say, Feel Who does it? The Team Key Benefits: •  Very quick way to have a holistic view of your target user •  Forces you to think about more than their role •  Allow team to ground communication throughout development
  • 7.
    Stakeholder mapping @Research& Analysis A network diagram of the people involved with (or impacted by) a given system design Who does it? The Team Key Benefits: •  Establish shared ideas about stakeholders •  Help team focus on people, not technology •  Guide plans for user research •  Document research activities
  • 8.
    Stakeholder mapping @Research& Analysis Tips: •  Draw simple icons to represent individual people •  Label individuals by specific role •  Write a speech-bubble to summarize thoughts and feeling •  Draw lines with arrows connecting the people •  Label lines to describe relationships between people •  Circle and label related groupings
  • 9.
    Elevator Pitch @Scoping 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]! Who does it? The Team Key Benefits: •  Allows team to focus on differentiator feature(s) and direct their energy to features with the highest business value •  Quick and inexpensive
  • 10.
    Storyboard @Scoping Use ofstory telling to quickly visualize/share a solution to specific problem making use of personas and their behaviors, stories and any known constraints. Who does it? The Team Key Benefits: •  Help us think about the problem in a creative way •  Facilitates focused communication •  Affordable and easy to do
  • 11.
    Sketchboard @Scoping/@Prototyping It’s likestory boarding but with sketches, almost like a biomap of the system you are building or about to build. Who does it? Team with UX/designer’s help Key Benefits: •  Provides Big Picture using initial design ideas •  Very iterative and highly collaboratively •  Very focused requirement discussions
  • 12.
    Flow diagram @Prototyping Visualizethe workflow the user has to follow through the application to complete a task or achieve a goal. Can I use it? Who does it? The Team Key Benefits: •  Quick way to run through the system from a user perspective •  Allows you to identify gaps in your current flow •  Affordable and easy to do
  • 13.
    Wireframes @Prototyping Grayscale mockupsshowing layout and position of page elements (can range from low-fidelity to exact grid-based resolution) Who does this? Typically UX, designer, but anyone can do it! Key Benefits: •  Easiest/cheapest way to realize and test ideas •  Great to get early feedback •  Can be done at any stage of development
  • 14.
    Paper prototype usabilitytesting @Any time Usability testing on paper versions of wireframes or sketches that users can simulate slicks and talk through their thoughts and decisions Who does it? Anyone can do this (be an observer) Key Benefits: •  Fastest and cheapest way to validate ideas/assumptions •  Results can be fed back into the design process immediately •  You can do this at any time you are not sure what is the best UI for a specific problem
  • 15.
    To learn moreabout how to run your own UT… Read this book
  • 16.
  • 17.
    Challenge Develop a Mobile App that helps promote networking and interaction between all unconference attendees
  • 18.
    2 min Form teamsof 4-6 people Introduce yourself (role, something unusual) You will collaboratively work on: 1.  User Research and Analysis 2.  Scoping 3.  Prototyping 4.  Usability Testing
  • 19.
    10 min 1. Research& Analysis As a team, pick a (new) technique and apply it to start building your Mobile App: Empathy map (template) or Stakeholder map (tips slide) Question: Who are your users? What do they need/want?
  • 20.
    10 min 2. Scoping Pickone technique and apply it to start defining your MVP functionality: Elevator pitch (template) or Must vs Nice to haves Question: What do they want to do with the app? What’s our business proposition and the value added?
  • 21.
    15 min 3. Prototyping Now,pick a technique and apply it to design your killer feature (differentiator): Flow diagram (template) or other paper artifact that you can use to do UT with Question: Can I use it?
  • 22.
    5 min 4. UsabilityTesting Now let s test your paper prototype! Question: Can somebody outside your team use it? •  Recruit user(s) from other teams •  Do they know what they can do? and how to do it? •  Are there any big usability issues that would prevent your MVP from being broadly adopted?
  • 23.
    Retrospective... •  Whatwas your favorite part of the session? •  What was your least favorite part? •  Will you be able to take something you learned in this session back to your work/life? (if so, what?) •  Any final thoughts or questions?
  • 24.
    The Goals THEORY: •  Brief introduction to a few Lean UX techniques you can apply at different development stages PRACTICE •  Focus on delivering an MVP fast with user-driven design/development
  • 25.
    @quicola #leanux #ale2012~ ariadna.font.cat Thanks!