From Idea to TestRapidly prototyping & validating your concepts

by Nicole Capuana @ncapuana

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

(that’s a capital I not a lower case L)

Good morning!

I’m relegated to being the baddies in TMNT

Every Monday I practice yoga in the middle of an airport

I teach girls how to code

Founding member of HER Ideas in Motion - teaching girls coding, game design, filmmaking and robotics

I work on a boat

Take a virtual tour with Google Cardboard and the app at leandog.com/holiday/

For over 15 years, I help startups & enterprises design great products

Goals & Objectives

● you get to practice● you experience how easy it is● learn how to apply it in your

work

I ask that you:

● be open & curious● respect one another -

there are no bad ideas

About this workshop● High school students, professionals with no background in UX &

seasoned UX folks have all found this helpful● I continually adapt and improve based on feedback (I’d love to hear how

it can be better)● It’s hands-on in pairs● You’ll probably want more time for each step but I’m going to be strict

on time - 3 hours will fly by before we know it

Timetable - we’re going to move fast● I’ll introduce key concepts and approach (30 mins)● We will work in teams to:

○ Generate a concept for a mobile app (30 mins)○ Turn the concept into a clickable prototype (30 mins)○ Test the concept with users and use a scorecard to surface areas to improve (1 hr)

● Show & Tell (15 mins)● We will reflect on what we learned (15 mins)

In the real world

We’d actually base our ideas on what we learn in

customer development & user research

Introduction

● Approach - ideate, prototype and test

● Review of prototyping tools● Usability Test Scorecard● Case study - how I use this

approach with my product teams

Why this approach can help you validate, experiment and learn fast

● Anyone on the team can do it ● Validate if a concept is worth pursuing● Easily experiment more● Your 1st design is never perfect● Cheap way to determine what to develop● Quick & objective● You will always learn something

Design Studio Method● Rapidly generate ideas● Build upon the best ideas● Cycles of sketch, pitch, critique (5 - 2 - 3)● Based on solving a user scenario or persona goal● Just enough to convey the concept● Do it with the whole team - great ideas come from everyone● Everyone loves it

Creating Prototypes● Start lightweight with paper & marker ● Increase fidelity as you iterate● Paper is powerful● Use a tool to string the screens or interactions together

○ helps you test idea○ and get buy-in or understanding across the team & stakeholders

● Focused in on what you want to learn - keep it small● What is the most valuable thing you want to learn from your prototype?

ToolsExcellent review 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

What I useAlways start with paper

Primarily Invision● More than mobile● Integration with Sketch for easy updating of mockups in your prototype

○ (I also use Zeplin because it integrates with Sketch)

● Promising recording of mobile user testing with Lookback.io● Acquired Macaw to bridge design & development

Exploring tools with more interactivity

User testing● In-person preferred● Informal or formal● 4 people max - the test participant plus one moderator, one note taker,

one observer● Set test objectives, create scripts, set up a scorecard● Do a dry-run ● Don’t ask leading questions● Consider having another UX person outside the project team to

moderate the test to reduce bias

The scorecard● A means to help get

consensus & direction

● Does not replace other scoring like SUS, time on task, success rate, etc.

● Binary scoring (0-1)

Get it at http://bit.ly/1IYbRXC(that’s a capital I not a lower case L)

● Calculates a score for each action and an overall score of the scenario - highlights opportunities for improvement

Scorecard

All of this in practice

Design Studio

Closeup of paper prototype

Building on the best ideas

Modular Paper Prototype

Testing Paper Prototype - Good, Better, Best

Higher fidelity prototype

Assessing the Design

Design 1 (testing the paper prototype) Design 2 (testing higher fidelity prototype)

Now it’s your turn

1. Form teams of 22. Grab some post-its & markers3. Find a spot to work together

Sample for workshop

Comedian Timer AppA simple timer to help comedians keep track of how much time is left in their set.

Try it yourself - on your phone, open up http://invis.io/XD1C59U8H

Exercise # 1Generating ideas using Design

Studio Method

● Sketch concepts● Pitch ● Critique

Design a mobile app

Come up with your own idea

● Pick something simple and easy to tackle in our limited time today

Or one of these ideas:

● Grocery list app● Period tracker● Grill timer● When to water the plants● Pet medication

tracker/reminder● Conference planner

Ready?

InstructionsDetermine as a team what you want to design.

Define a goal for your design concept

Sketch screens - it doesn’t have to be the app in it’s entirety but just a path that we can test.

You will have:● 5 minutes to come up with an idea● 10 minutes to sketch

15 minutes

Find another teamEach team will pitch & be critiqued by the other team

InstructionsPitch (2 mins)● what your app is and● how you addressed the goals you defined

Critique (3 mins)● 2-3 ways solves problem or meets goals● 1-2 ways to improve● Not what you like

5 minutesthen switch

Time for a quick break

Exercise # 2Creating a prototype using

Invision or POP

● Refine concept● Build a clickable prototype

Refine your sketchesInstructions● Based on feedback you got, make

adjustments● Determine what you’d like to test ● Create at least 1 path or task in your app -

you may have to sketch a few more screens to complete it

● Create your account ● Take photos of your sketches

20 minutes

● Upload photos to the app (if you choose Invision and you run into image rotation issues, let me know, there’s a way around it)

● Link the screens together with hotspots

Exercise # 3Test your app with users &

making sense of your observations

● Create test script● Run user test● Use the scorecard

Sample Test 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?

Get ready to testInstructions● Prepare a 5 minute test

● Write out your test objective

● Draft your scenario, participant tasks & facilitator questions

● Make a copy of the scorecard and set it up for your test http://bit.ly/1IYbRXC (that’s a capital I not a lower case L)

10 minutes

Test your app - round 1● Find another team

● Each person will have a chance to be a moderator and a note taker - decide who will do what this round

● Each test is 5 minutes

● Switch team’s test

10 minutes

Test your app - round 2● Find a different team

● Switch the moderator and note taker roles

● Again,each test is 5 minutes

● Switch team’s test

10 minutes

Discuss your findings● Score the users on the scorecard● Discuss what you observed ● Summarize the key ways your app worked

and what needs improvement● If you were to do more, what would you

do next? Is there something you still need to explore? What do you need answered?

5 minutes

Show & Tell

Reflecting on this morning

What did you learn?

What did you want more help with?

How can this workshop be

better?

Learn More

Usability testing● How to use SUS● SUS Calculator● How to combine UCD & Agile● How to determine the right number of

participants

Prototyping● Five app prototyping tools compared Proto.io,

Pixate, Origami, Framer & Form● How Prototyping is Replacing Documentation ● Vive le Prototype● Building Clickthrough Prototypes To Support

Participatory Design

Design Studio Method● The Design Studio Method - Todd Zaki Warfel

(video)● Design Studio: A Method for Concepting,

Critique & Iteration

Agile Retrospectives● Iteration Retrospective● Agile Retrospective Resource Wiki● Retrospective Toolbox

Invision● Getting started with Invision (video)● 7 reasons to use InvisionApp for rapid

prototyping

Great Job!@ncapuana

I’m happy to discuss and go into further detail on any of the methods we used today - reach out via twitter or email me

(nicole.capuana at leandog.com)