light weight methods to drive your designs forward

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