Collaborative Sketching for UX - Razorfish 042115

Robert Stribley04/21/15

Collaborative Sketching: Jumpstart Your Design!

Arguably, we’ve

been sketching

for eons

But now, we’re sketching more

than ever

• IdeaPaint Inc makes a paint that

turns any surface into a whiteboard

• Its sales have doubled every year

since introduced in 2008

• More than ½ its business is in the

workplace

See “Doodling for Dollars,” Wall Street Journal, April 24, 2012

Why sketch?

• Enable

communication

• Make abstract

concepts concrete

• Iterate on ideas

• Ensure

recollection

• Humanize ideas

• Jumpstart

collaboration

What can I sketch?

• Home pages

• Category pages

• Product pages

• Forms

• Wizards & widgets

• Search results

• Process Flows

• Anything, really

And there’s so much

more to sketch for …

• Smartphones

• Tablets

• Watches

• Google Glass

• Other wearables

• Responsive design

• Ubiquitous computing

A few ways we sketch at

Razorfish:

• Solo

• Sketch to comp

• Communicate to client

• Storyboarding

• As a team – collaboratively

Who can sketch?

• Information architects

• Interaction designers

• Graphic designers

• Content strategists

• Project managers

• Business analysts

• Functional analysts

• Developers

• Client directors

… Anyone really

Really,

anyone can

sketch

Cartoon by XKCD

What sketching isn’t …

• Sketching isn’t only for

designers

• Sketching isn’t difficult

• Sketching isn’t drawing

You needn’t be Michelangelo to

participate

However, we can

learn from the

pros

Who often begin

with a sketch

Adding layers,

detail, color

Until they complete

their masterpiece

A Quick Case Study

Any idea what this is a sketch of?

“twttr sketch” Twitter.com

Twitter

[This sketch] has very special significance – it's hanging in the office

somewhere with one other page. Whenever I'm thinking about something, I

really like to take out the yellow notepad and get it down.

– Jack Dorsey, Twitter

Some Advice from the Pros

“The great benefit of drawing is that when you

look at something, you see it for the first time.”

Milton Glaser

“We sit

around, stand

around those

tables and we

draw. We still

draw. … We

would draw

and we would

make lots of

models.” Jonathan Ive

“There are

techniques and

processes

whereby we can

put experience

front and center in

design. My belief

is that the basis

for doing so lies in

extending the

traditional practice

of sketching.”

Bill Buxton

Attributes of a Sketch

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful

• Clear vocabulary

• Distinct gesture

• Minimal detail

• Appropriate degree of refinement

• Suggest & explore rather than confirm

• Ambiguity

Bill BuxtonSketching User Experiences

"There is no more powerful way

to prove that we know

something well than to draw a

simple picture of it. And there is

no more powerful way to see

hidden solutions than to pick up

a pen and draw out the pieces

of our problem.”

Dan RoamThe Back of the Napkin

Collaborative Sketching

For the purposes

of today’s

workshop,

sketching is …

• Quick

• Simple

• Collaborative

All the tools you

need:

Paper

Sharpies

Photo by JasonTank, Flickr

Defining Collaborative Sketching

Origins

• Rooted in Design Studio

Methodology

• Grew out of industrial design and

architecture

• Jim Ungar and Jeff White, “Agile

user centered design: enter the

design studio - a case study,”

2008

- Stefan Klocek, “Better together;

the practice of successful

creative collaboration,” Cooper

Journal

Defining Collaborative Sketching

“Ninja. Rockstar. Gifted

genius. Many of the

ways we talk about

creative work (whether

it’s design or

development) only

capture the brilliance of

a single individual.”

Defining Collaborative Sketching

Origins

• Will Evans

• Introduction to Design Studio

Methodology – Article

• Process

• Illumination

• Collaborative Ideation

• Presentation

• Critique

• Iteration@semanticwill

Origins

• Todd Zaki Warfel, Message First

• The Design Studio Method –

Presentation

• Create. Pitch. Critique.

• 6.8.5• 6-8 sketches in 5 minutes

• 3 minutes to pitch

• 2 minutes of review

• Concept generation not details

• Not just designers

• Stealing is encouraged

Defining Collaborative Sketching

@zakiwarfel

• To communicate your ideas

effectively by visualizing them

• To benefit from the participation of

your colleagues

• To quickly generate ideas and refine

through iterations

Goals

1. Discuss

2. Sketch

3. Share

4. Iterate

Process

Discuss

• Discuss the experience you’re sketching

• What’s its purpose?

• What features are necessary?

• How would you prioritize them?

• Who’s the audience?

• You’re not discussing layout or design

• Just the problem you’re trying to solve

• You’re not sketching yet

Process

Sketch

• Sketch silently

• Limit your time – 5, 10 minutes

• Sketch as much as possible, as many different

ideas as possible

• Don’t worry about mistakes or style

• Emphasis is on the quantity of ideas not the

quality of sketches

Process

Share

• Review your work with your team

• Keep it short – 60 seconds each

• You provide feedback to others

• What you like

• Questions about what didn’t work for you

• You’re not grilling your colleagues and this

isn’t a competition

Process

Iterate

• Now sketch again if you need to

• Or collaborate on a high-level wireframe (e.g.

via whiteboard)

• Then begin your wireframe with a more

informed view, with more and better ideas

• Iterate on your design

Process

Now, it’s your

turn

Our Exercise

What to do?

Events.com

A website for finding and posting local

events

• Listed by category

• Listed by date

• Listed by … what else?

Our Project

Events.com

Consider … Who is the audience?

• Locals

• Tourists

• Event promoters

Our Project

Consider other event sites you’re familiar with.

This will be your “competitive analysis.”

Group Exercise:

Home Page

Typical features? Differentiators?

In teams, sketch your ideas for the

Events.com Home Page

1. Take 15 minutes to discuss what

features belong here

2. Sketch your ideas silently for 10

minutes

3. Share your sketches with your team

4. Collaborate on a sketch together as a

group, incorporating what you

learned

Discu

ssSketc

hShar

eIterate

Our Project

Exercise 1

1. Take 15 minutes to discuss what features

belong there

Our Project

2. Sketch your ideas silently for 10 minutes

Our Project

3. Share your sketches with your team

Our Project

4. Collaborate on a sketch together as a group,

incorporating what you learned from each

other.

Our Project

Some Resources

Books

The following apps are all

for the iPad:

• Adobe Ideas

• Bamboo Paper

• Muji Notebook

• Penultimate

• SketchBook Pro

• Paper

Sketching Apps

AppSeed

Currently in development,

this Kickstarter project lets

you to turn your app

sketches into working

mobile prototypes

“Sketching is simply the

fastest way to test ideas

and visually brainstorm”– Greg Goralski, AppSeed creator

Prototyping

• User Interface Design in an Agile Environment: Enter

the Design Studio – Jim Ungar and Jeff White

• Design Studio Methodology – Article by Will Evans

• The Design Studio Method – Presentation by Todd Zaki

Warfel

Further Study

Thank you

@stribs

Deck: www.slideshare.net/stribs