Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Using Light Weight Methods to
Drive Your Designs Forward
A hands-on workshop by Nicole Capuana
Get the tools we will use today
Prototype on Paper
● Download & create an
account at popapp.in
InvisionApp
● Create an acc...
Hello!
● Director of User Experience at LeanDog
● Founding member of HER Ideas in Motion, a
non-profit teaching girls how ...
Logistics
Get up and move
About our day together
● We will work in teams of 4
● You’ll mostly work in pairs and as a group
● Each group has a kit of...
Today, you will learn:
● How to do a variety of methods that will propel your teams
towards making products that people lo...
The Challenge
CodeMash attendees could need help:
● connecting with other attendees
● finding their way around
● deciding ...
What would you want this app do?
(write it down)
Now crumple it up & throw it out
You are not the user
There’s lots of user personas here &
they all have different needs
Part 1
Getting started with user research
● Contextual Inquiry
● Interviews
● Empathy maps & personasMorning
We’re going to combine 2 methods
before we practice
The first rule of user research:
never ask anyone what they want.
— Erika Hall, Just Enough Research
Contextual Inquiry
Method #1
What is it?
It’s a research method that where you observe and interview users in context to:
● Understand how the user act...
How to do it?
● One on One with user
● Set an objective of what you want to learn
● Introduce yourself
● Tell them a littl...
User Interviews
Method #2
What is it?
● Another research method used to gain insight and empathy into users’
motivations, mental models, pain points...
How to do it?
● Create a script to guide you and give you some consistency
● Go where your users are and ask them open-end...
3 Questions to Ask
● What are you trying to get done? Why?
● Can you show me how you currently do this?
● Can you show me ...
Let’s practice!
As a team draft the following:
● What questions do you want to find out about your users (5 minutes)
● Out...
15 minute break
Empathy Maps
Method #3
What is it?
● It is a tool to create an artifact that quickly
paints a holistic picture of a target persona
● Based on wha...
How to do it?
● Get a large poster or wall space
● Draw out the sections around a large circle at the center
● From all of...
Let’s practice!
We’ll use the Paul Boag adaptation today
● Discuss as a team findings
from all your interviews
● Write one...
Show & Tell
Who are our personas?
Morning Retro
Method #4
What is it?
● A regularly scheduled checkpoint where a team reflects upon their recent
activity to celebrate successes, id...
How to do it?
● There’s lot’s a ways to structure it
● The simplest is what did we do well, what can we improve on, and wh...
Reflecting on this morning:
What did you
learn?
What did you
do well with?
What did you
want more
help with?
After lunch, come back to:
● Play the whole product game,
● Quickly generate design ideas
● Create a clickable prototype
●...
Lunch :)
I challenge you to interview a few more people & observe attendees
Part 2
● Envision the whole
● Generate ideas & designs
● Build a prototype
● Test with users
● Assess usabilityAfternoon
Welcome back
● Who is new?
● Did anyone interview people over lunch?
● Get back together with your teams
● If your team lo...
The Challenge
CodeMash attendees could need help:
● connecting with other attendees
● finding their way around
● deciding ...
Whole Product Game
Method #5
What is it?
● Created by Innovation Games
● Typically, use at the start of a project
● The psychology of game play and phy...
Let’s play
For the app you will design to meet
our challenge - think of what goes
into it
● Write one idea per sticky note...
Design Studio Method
Method #6
What is a Design Studio?
● A way to rapidly generate and explore many ideas and solutions to a problem
through sketching, ...
Why use Design Studio?
● Ideas come from everyone and anywhere
● Allows for divergence and then convergence of ideas
● Bui...
How to do it?
● Get your supplies - markers, plain sheets of paper
● You’ll need a timer
● Explain that if you can draw a ...
Ready?
Individually
sketch
6-8 concepts
that meet the
goals of your
users
3 minutes
to pitch - how you addressed the goals
2 minutes
to critique - based on goals, not what you like
2-3 ways solves problem or meets goals 1-2 ways to improve
Now as a team
combine,
refine, and re-
sketch
concepts
3 minutes
find another team to pitch to - how you addressed the
goals
2 minutes
to critique - based on goals, not what you like
2-3 ways solves problem or meets goals 1-2 ways to improve
15 minute break
Make a Prototype
Method #7
Paper prototyping
● Fast & iterative
● Easy to change
● Test key concepts
before you invest
in the details
● Test physical...
Tools
Excellent review of tools
by Cooper - http://www.cooper.
com/prototyping-tools
Some tools:
● are free, some cost a b...
Let’s practice!
● Take the concepts you honed in Design Studio and re-sketch a more detailed
version on the long post-its
...
If your photos aren’t in the right orientation
There is a bit of a bug in InvisionApp - sometimes your photos will come in...
User Testing
Method #8
What is it?
● A moderated test with target users to uncover usability issues with the product
● Participants have to compl...
How to do it?
Logistics for setting up your test
● Find your target users (get out of the building or recruit)
● Set objec...
Sample script
Objective: User can set and use a cue timer
Scenario: You need to set up a cue timer for your upcoming gig. ...
How to do it?
Getting ready to start the test
● Introduce yourself to the participant
● Tell them that they are helping to...
How to do it?
Scoring & assessing the test
After each participant:
● Collectively assess what you observed - what worked, ...
Using the scorecard
Get it at http://bit.ly/1IYbRXC
● Break your scenario into key actions
● Using 0-1, score each partici...
Let’s practice!
● Create scripts for a task within your app (5 minutes)
● Set up a scorecard for your test (10 minutes)
● ...
Afternoon Retro
Revisiting Method #4
Reflecting on this afternoon:
What did you
learn?
What did you
do well with?
What did you
want more
help with?
It takes practice
involve the whole team so everyone is focused on
making the best experience
Resources
Rocket Surgery Made Easy: The
Do-It-Yourself Guide to Finding
and Fixing Usability Problems
by Steve Krug
Univer...
Thanks!
P.S. - I’m hiring :)
@ncapuana
Light Weight Methods to Drive Your Designs Forward
Light Weight Methods to Drive Your Designs Forward
Upcoming SlideShare
Loading in …5
×

Light Weight Methods to Drive Your Designs Forward

882 views

Published on

Product teams these days need to be moving quickly and iteratively in delivering great products. At times though, teams can get stuck on how to move the designs forward. Sometimes it’s because of unexpected complexity and other times there are multiple paths to explore.

In this workshop, participants will experience a variety of methods that help teams gain a shared understanding through collaboration with clients, product owners, and key stakeholders. Each of the methods covered are light-weight and can be adopted by teams at any stage in the product design and development. Learn how to:
+ get started with user research,
+ define personas,
+ generate and turn ideas into solid solutions,
+ create low-fidelity mockups that can be tested with users immediately,
+ conduct a usability test,
+ synthesize your findings,
+ and gain focus for the product through games and structured discussion.

Every method covered will focus on designing a mobile app so that participants get the full experience of how each method fits into designing a product.

Don't worry if you don't have any UX background, this workshop will guide you through exercises. And if you're a UX rockstar, come flex your usability prowess with other professionals. Come learn and share tips & tricks! Everyone on a product team can benefit from this hands-on practice.

Published in: Design
  • Be the first to comment

Light Weight Methods to Drive Your Designs Forward

  1. 1. Using Light Weight Methods to Drive Your Designs Forward A hands-on workshop by Nicole Capuana
  2. 2. Get the tools we will use today Prototype on Paper ● Download & create an account at popapp.in InvisionApp ● Create an account online at invisionapp.com Usability testing scorecard ● Download/make a copy of scorecard http://bit.ly/1IYbRXC
  3. 3. Hello! ● Director of User Experience at LeanDog ● Founding member of HER Ideas in Motion, a non-profit teaching girls how to code, design games, & build robots ● Organizer of Cleveland Lean Startup Circle ● Over 15 years in UX covering the whole spectrum - HTML/CSS. interaction design, visual design, information architecture, user research, usability & content strategy
  4. 4. Logistics Get up and move
  5. 5. About our day together ● We will work in teams of 4 ● You’ll mostly work in pairs and as a group ● Each group has a kit of materials you will need ● You can’t know anyone in the group ● Introduce yourself to your team ● The rules are simple: be open and respect each other Find/Form a Team
  6. 6. Today, you will learn: ● How to do a variety of methods that will propel your teams towards making products that people love ● How easy these methods are and how you can start using them immediately
  7. 7. The Challenge CodeMash attendees could need help: ● connecting with other attendees ● finding their way around ● deciding which talks to go to ● something else? Create a mobile app that makes CodeMash the most interesting, engaging, and inclusive conference experience.
  8. 8. What would you want this app do? (write it down)
  9. 9. Now crumple it up & throw it out
  10. 10. You are not the user
  11. 11. There’s lots of user personas here & they all have different needs
  12. 12. Part 1 Getting started with user research ● Contextual Inquiry ● Interviews ● Empathy maps & personasMorning
  13. 13. We’re going to combine 2 methods before we practice
  14. 14. The first rule of user research: never ask anyone what they want. — Erika Hall, Just Enough Research
  15. 15. Contextual Inquiry Method #1
  16. 16. What is it? It’s a research method that where you observe and interview users in context to: ● Understand how the user actually uses the product or accomplishes their tasks in the real-world ● Have people talk about what they are doing and why they do what they do ● See the environment and context of use
  17. 17. How to do it? ● One on One with user ● Set an objective of what you want to learn ● Introduce yourself ● Tell them a little bit about what you’re doing and what the session is like ● Make sure to let them know you’re here to see how they work or use the product and you are NOT evaluating them or their work ● Watch, listen, pay attention ● Take notes ● Ask questions, don’t assume anything - probe to find out why (not judgemental) ● Thank them ● Summarize your notes
  18. 18. User Interviews Method #2
  19. 19. What is it? ● Another research method used to gain insight and empathy into users’ motivations, mental models, pain points, challenges, processes, and stories ● It is asking questions to hear from target users what they think, feel, and how they go about getting their task done ● It uses open-ended questions to drive out stories ● It’s done one person at a time ● It is not a focus group ● It will give you some clarity but will also generate more questions you need to answer
  20. 20. How to do it? ● Create a script to guide you and give you some consistency ● Go where your users are and ask them open-ended questions ● It is conversational but the user should be doing most of the talking - you need to ask and really listen ● Get their stories out ● Ask follow-up questions, probe, find out why, dig deeper ● Avoid “do you like”, “yes/no”, and the “woulds” ● Don’t ask what they want ● Don’t pitch or sell a solution ● Be open
  21. 21. 3 Questions to Ask ● What are you trying to get done? Why? ● Can you show me how you currently do this? ● Can you show me what’s frustrating about your current process? Charles Liu at KISSmetrics
  22. 22. Let’s practice! As a team draft the following: ● What questions do you want to find out about your users (5 minutes) ● Outline what to look out for in contextual inquiry (5 minutes) ● Create a script/guide for interviewing users (5 minutes) ● Break into pairs - make sure each pair has the script/guide ● Decide who will start as the interviewer and who will take notes (you will switch so everyone has a chance to play that role) ● Find a pair on another team to interview and observe using the CodeMash app or website (20 minutes total - each interview is 5 minutes) ● Find another pair to interview (20 minutes total)
  23. 23. 15 minute break
  24. 24. Empathy Maps Method #3
  25. 25. What is it? ● It is a tool to create an artifact that quickly paints a holistic picture of a target persona ● Based on what you’ve learned through your interviews and observations ● Some data you will need to infer ● It surfaces behaviors, motivations, and actions ● Consists of 6 sections - hears, thinks, sees, feels, does, and says ● Serves as an initial persona to guide development (refine as you learn more)
  26. 26. How to do it? ● Get a large poster or wall space ● Draw out the sections around a large circle at the center ● From all of your interviews and observations, write one finding per sticky note and place on the section it relates to ● The more interviews you have, multiple personas will emerge (it’s a bit magical) ● As a group, identify patterns and themes that emerge, discuss the insights and decide who the persona is ● Draw a picture of the persona in the middle and give them a name ● Draft a key scenario for this persona that meets their needs when using your product ● Identify features that would help this persona
  27. 27. Let’s practice! We’ll use the Paul Boag adaptation today ● Discuss as a team findings from all your interviews ● Write one finding per sticky note and place on the map ● What does the map tell you? Who is this person? ● After all findings on map, draw a picture of the persona that emerges in the middle
  28. 28. Show & Tell Who are our personas?
  29. 29. Morning Retro Method #4
  30. 30. What is it? ● A regularly scheduled checkpoint where a team reflects upon their recent activity to celebrate successes, identify opportunities for improvement, and recognize innovation possibilities
  31. 31. How to do it? ● There’s lot’s a ways to structure it ● The simplest is what did we do well, what can we improve on, and what did we learn ● Set on a regular cadence, held in safe environment ● Short ● Not a bitch session ● Generate 1-2 key action items for the group to work on ● At the next retro, report on action item progress
  32. 32. Reflecting on this morning: What did you learn? What did you do well with? What did you want more help with?
  33. 33. After lunch, come back to: ● Play the whole product game, ● Quickly generate design ideas ● Create a clickable prototype ● Write, run and assess a usability test
  34. 34. Lunch :) I challenge you to interview a few more people & observe attendees
  35. 35. Part 2 ● Envision the whole ● Generate ideas & designs ● Build a prototype ● Test with users ● Assess usabilityAfternoon
  36. 36. Welcome back ● Who is new? ● Did anyone interview people over lunch? ● Get back together with your teams ● If your team lost someone, please raise your hand and a new person can join you ● Review your personas goals
  37. 37. The Challenge CodeMash attendees could need help: ● connecting with other attendees ● finding their way around ● deciding which talks to go to ● something else? Create a mobile app that makes CodeMash the most interesting, engaging, and inclusive conference experience.
  38. 38. Whole Product Game Method #5
  39. 39. What is it? ● Created by Innovation Games ● Typically, use at the start of a project ● The psychology of game play and physical activity instantly engages the players ● Brings the different perspectives and ideas out ● Generates discussions for what goes into making a great product ● Helps the team reach a shared understanding of the product
  40. 40. Let’s play For the app you will design to meet our challenge - think of what goes into it ● Write one idea per sticky note ● Write as many ideas as you have ● Place the notes in the ring you feel it belongs in ● After you’ve all put your ideas on the board, review and discuss
  41. 41. Design Studio Method Method #6
  42. 42. What is a Design Studio? ● A way to rapidly generate and explore many ideas and solutions to a problem through sketching, iteration, and critique ● It won’t generate the final solution ● The evangelists: Will Evans and Todd Zaki Warfel ● Use when starting a project, you’re stuck, or you’re tackling a new feature ● It’s a sketching exercise ● It’s not meant to be perfect just enough to convey the concept
  43. 43. Why use Design Studio? ● Ideas come from everyone and anywhere ● Allows for divergence and then convergence of ideas ● Builds upon great ideas ● Brings the whole team together (differing perspectives, collaboration, investment in the problem by contributing) ● Speeds design ● Creates a shared understanding & ownership ● And everyone loves it!
  44. 44. How to do it? ● Get your supplies - markers, plain sheets of paper ● You’ll need a timer ● Explain that if you can draw a circle, square, triangle and line, your participants can do it ● Cycle through as many rounds of sketch, pitch, critique as time for (you could spend a whole day doing this) ● Remember 5-3-2
  45. 45. Ready?
  46. 46. Individually sketch 6-8 concepts that meet the goals of your users
  47. 47. 3 minutes to pitch - how you addressed the goals
  48. 48. 2 minutes to critique - based on goals, not what you like 2-3 ways solves problem or meets goals 1-2 ways to improve
  49. 49. Now as a team combine, refine, and re- sketch concepts
  50. 50. 3 minutes find another team to pitch to - how you addressed the goals
  51. 51. 2 minutes to critique - based on goals, not what you like 2-3 ways solves problem or meets goals 1-2 ways to improve
  52. 52. 15 minute break
  53. 53. Make a Prototype Method #7
  54. 54. Paper prototyping ● Fast & iterative ● Easy to change ● Test key concepts before you invest in the details ● Test physicality
  55. 55. Tools Excellent review of tools by Cooper - http://www.cooper. com/prototyping-tools Some tools: ● are free, some cost a bit but not much ● most have a trial or free version for 1 project ● are for mobile design only, others cover complex interactions & animations ● have extensive UI libraries or building kits to get you started quickly ● allow on device testing ● allow for real-time collaboration and annotations
  56. 56. Let’s practice! ● Take the concepts you honed in Design Studio and re-sketch a more detailed version on the long post-its ● You want to create a flow within the app (we will be testing this concept with users to see how the design works for the user) ● Take photos of the screens ● Upload the photos to either POP or InvisionApp ● Create hotspots to link together and animate your mockups ● Get the prototype on the team’s phones
  57. 57. If your photos aren’t in the right orientation There is a bit of a bug in InvisionApp - sometimes your photos will come in oriented wrong. You can do 2 things: 1. Open the photos in an editor and edit them 2. or download the InvisonApp (iOS only) ○ Login to app ○ Then from your photo stream, go to share photos and more (...) ○ Then choose Invision as the option to share ○ Bring up the window and name the screen ○ Select the prototype to send it to
  58. 58. User Testing Method #8
  59. 59. What is it? ● A moderated test with target users to uncover usability issues with the product ● Participants have to complete key actions and tasks ● It can be formal or informal ● At minimum there is a facilitator and an observer ● You will always learn something
  60. 60. How to do it? Logistics for setting up your test ● Find your target users (get out of the building or recruit) ● Set objectives of what you need to answer or learn overall and at scenario levels ● Create 2 scripts - one for the participant and one for the moderator ○ The participant guide is task based and provides the scenario for context and then the tasks they have to complete ○ The moderator guide has the questions for each task or scenario - put the test objectives on this script ● Determine who will moderate and who will be record notes, videos ● Determine where you will run the test ● Print a copy of the moderator script for each observer ● Print a participant script
  61. 61. Sample script Objective: User can set and use a cue timer Scenario: You need to set up a cue timer for your upcoming gig. You’ll have the stage for 5 minutes. Your tasks: ● Launch the Stage Timer app and set up your timer. You want to know when you hit the 4 minute and 4: 30 marks. ● Answer the facilitator’s questions. For the facilitator: 1. How do you create a new timer? 2. How do you play/activate a timer? 3. What do the colors mean?
  62. 62. How to do it? Getting ready to start the test ● Introduce yourself to the participant ● Tell them that they are helping to assess the product and it is NOT a test of them or their abilities ● Ask them to think out loud as they go through their tasks ● Tell them that you will be asking them some questions and the observer will be taking notes ● Tell them that it’s natural that they might have questions and you may respond with a question like “what do you think it does” ● Record the session if you can because you won’t remember everything
  63. 63. How to do it? Scoring & assessing the test After each participant: ● Collectively assess what you observed - what worked, what didn’t, where the participant struggled ● Use a scorecard to quickly surface the components that need further attention ● Use affinity mapping to identify themes across participants
  64. 64. Using the scorecard Get it at http://bit.ly/1IYbRXC ● Break your scenario into key actions ● Using 0-1, score each participant for each key action ● You may have to add more rows and slightly adjust the formulas - the main tab is the one named scorecard ● The scorecard will calculate a score for each action and an overall score of the scenario ○ 50% or lower is highlighted red ○ 51%-70% is highlighted yellow The scorecard is a means to help teams get consensus and direction on what to focus on
  65. 65. Let’s practice! ● Create scripts for a task within your app (5 minutes) ● Set up a scorecard for your test (10 minutes) ● Determine who will moderate and who will take notes ● Find another team, run a test with a person from that team ● Switch and repeat (15 minutes)
  66. 66. Afternoon Retro Revisiting Method #4
  67. 67. Reflecting on this afternoon: What did you learn? What did you do well with? What did you want more help with?
  68. 68. It takes practice involve the whole team so everyone is focused on making the best experience
  69. 69. Resources Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems by Steve Krug Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions by Bella Martin, Bruce Hanington Articles, videos, templates ● How Reframing a Problem Unlocks Innovation ● 8-up template ● Todd Zaki Warfel (video) ● Design Studio: A Method for Concepting, ● Critique & Iteration ● Speed Design Studio - ● Design Studio for context-aware products ● Introduction to Design Studio Methodology ● Design of Design Studio ● Design Studio and Agile UX Process and Pitfalls ● How Prototyping is Replacing Documentation ● Vive le Prototype ● Building Clickthrough Prototypes To Support Participatory Design ● State of the Prototyping Union – A Review of the Top 5 Mobile Prototyping Tools
  70. 70. Thanks! P.S. - I’m hiring :) @ncapuana

×