light weight methods to drive your designs forward
TRANSCRIPT
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 account online
at invisionapp.com
Usability testing scorecard● Download/make a copy of scorecard http://bit.ly/1IYbRXC
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
LogisticsGet 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 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
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
The ChallengeCodeMash 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.
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 1Getting 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 InquiryMethod #1
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
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
User InterviewsMethod #2
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
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
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
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)
15 minute break
Empathy MapsMethod #3
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)
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
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
Show & TellWho are our personas?
Morning RetroMethod #4
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
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
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● Write, run and assess a usability test
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 lost someone, please raise your hand and a new person can join
you● Review your personas goals
The ChallengeCodeMash 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.
Whole Product GameMethod #5
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
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
Design Studio MethodMethod #6
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
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!
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
Ready?
Individually sketch6-8 concepts that meet the goals of your users
3 minutesto pitch - how you addressed the goals
2 minutesto 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-sketchconcepts
3 minutesfind another team to pitch to - how you addressed the
goals
2 minutesto 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 PrototypeMethod #7
Paper prototyping
● Fast & iterative● Easy to change● Test key concepts
before you invest in the details
● Test physicality
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
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
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 them2. 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
User TestingMethod #8
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
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
Sample scriptObjective: 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?
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
How to do it?
Scoring & assessing the testAfter 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
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
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)
Afternoon RetroRevisiting 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 practiceinvolve the whole team so everyone is focused on
making the best experience
ResourcesRocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problemsby Steve Krug
Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutionsby 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
Thanks!P.S. - I’m hiring :)
@ncapuana