IA Summit | April 8, 2010 | #penpapertools Kate Rutter kate@adaptivepath.com

Pen & paper tools for getting from research to design

A little about me…

Adaptive Path

I’m a designer and strategist.

Designing delightful experiences makes me tick.

Making things visible and visual makes my heart sing.

Adaptive Path is a User Experience strategy and design consultancy. Our mission is to help companies make products and services that deliver great experiences that improve people’s lives.

@katerutter

What’s the whole point?

To create products & services that delight, that inspire and that improve the lives of the people who use them.

First, a story...

BIG opportunity space

large shifting team

money & time constraints

So here’s what we did:

So here’s what we did:

So here’s what we did:

And it was awesome. Vibrant stories captured visually

Compelling insights

Clear implications for design

Shared understanding

Visual ideas get through faster

What made it work? Visual approach activated a different way of working

The insights carried from research �

into design

Pen & paper tools were accessible �and fast

Concepts hinged directly to design implications

So that the resulting designs�reflect real people and their needs.

Visual ideas get through

faster

Images help groups move

faster...together

Pictures communicate a more complete

idea

Why work visually?

How could we do this again?

We’ll cover…

What you need to get started : tools & techniques

A simple method

activities!

A way to take this home with you.

Warm-up

INSTRUCTIONS

Make a nameplate. 1.  On a piece of paper write your name in a

way that communicates something about who you are.

2.  Then make a sketch of some kind that says something about you.

3.  Do it in 2 minutes.

Your toolkit Surfaces

templates

rolls of paper

poster board

sheets

stickies

1/2 sheets�squares & quarters

Mark-makers

markers

colored pencils

sharpies

colored chalks

crayons!

Your toolkit Marks

Takes only seconds more than writing!

lettering

case case Case CASE

WORDS

texture

shading

weight

LINES

symbols

drawings

icons

PICTURES

Your toolkit Layouts

centered

radiant

grid

linear

cluster

list

tree

And also... size

shape

color

Visual ideas get through faster

“but I can’t draw” the plaguing thought of...

instead, think

I’ll try a little each day

I’ll use text, but with more texture

when you think

I can’t draw

I don’t know how to start

My stuff looks crappy

it’s like grammar, not art

Here is our process

Here is our process

Here is our process

Jotting

Transcripts

Note taking

Spreadsheets

Coding

And more! Video Audio

Jotting

EPIC : October 2008 : p. 23

Jotting

Jotting

Jotting breaks down

observations into their

most elemental parts �

and captures the weight

of each idea.

Let’s do an experiment

You’ll practice jotting items from a short clip of an interview, using pen & paper tools. Try to capture the emotional energy along with key messages.

Activity

INSTRUCTIONS

Jot what you observe. 1.  Read this quote from a user

interview.

2.  As you read, jot any significant ideas or themes that you observe.

3.  Jot one observation per piece of paper.

4.  Do it in 2 minutes.

I love to come home after a long day. When I get here, it just feels like this is the place I can hide from the world, or recover, or just be alone. It's all my stuff and everything is where I want it. It's like a nest. Well, sometimes it’s a nest. But sometimes it's more like a project. There's always something that needs to be done.

Activity

INSTRUCTIONS

Let’s jot an audio transcript. 1.  Now, listen to this three-minute

transcript.

2.  As you listen, jot what you hear.

3.  Use line weight, color, and imagery to distinguish the big themes from the smaller ideas.

4.  Do it in 5 minutes.

Some examples

Some examples

What do we do with all these pieces of paper?

Theme Boards

Clustering

Relationship Models

Word Sort

Bottom-up Sorting

Affinity Diagrams

And more!

Theme Boards

Theme boards display

the results of synthesis. �

They show the patterns

and themes that act �

as a bridge to the

design process.

Theme Boards

Concept Sketches

Books

Personas

Reports

Presentations

Video Reels

Decks

Storyboards

And more!

Concept Sketching

Some examples

Concept sketches capture

a story, illustrate the

relationships of elements,

or a communicate a core

set of related ideas.

Concept Sketching

Handy visual layouts

Mind Maps Graphs 2 x 2s

Grids Mandalas

Bringing it all together

Use the concept

sketches, jots &

supplemental material

to craft stories and

implications for design.

Moving into design

Business strategy

Marketing Project Management

Product Management

Product engineering!

Hinge from research…

…to design

From concept sketch… … to storyboard

From concept sketch… … to information architecture

From concept sketch… … to interface prototype

What we covered

What you need to get started : tools & techniques

A simple method

activities!

A way to take this home with you.

So that the stuff we design connects with�real people... their true stories, their honest emotions and their most important needs.

Why are we doing this?

So that the stuff we design connects with�real people... their true stories, their honest emotions and their most important needs.

Why are we doing this?

PURE

AWESOME

So that the stuff we design connects with�real people... their true stories, their honest emotions and their most important needs.

Why are we doing this?

PURE

AWESOME

What 1 thing �can you start using tomorrow?

THINK ABOUT...

MORE UX GOODNESS Portland, OR • Pre-con : May 19 • Conference: May 20-21 www.webvisionsevent.org | @webvisions

Amsterdam: Apr 26-29 | San Francisco: Jun 27-30 www.adaptivepath.com/events 15% off with code FOKR

San Francisco: Aug 24-27 www.uxweek.com 15% off with code FOKR

kate@adaptivepath.com www.adaptivepath.com

GETTING THE GOODS

@katerutter www.intelleto.com

The slides will be on intelleto.com and slideshare in the near future...

Credits to Leah Buley and Rachel Hinman for collaborating on this material and to the Adaptive Path folks who shared their project work.