Collaborative Sketching for UX

Collaborative Sketching for UX

Robert StribleyUX Sketch Camp NYC – 10/12/14

First, remember, anyone can sketch

Cartoon by XKCD

And for the purposes of today’s workshop, sketching is …

•Quick•Simple•Collaborative

All the tools you need:

PaperSharpies

Photo by JasonTank, Flickr

Some Examples

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

Advice from the Experts

“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

Bill BuxtonSketching User Experiences

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

Defining Collaborative Sketching

Origins

• Rooted in Design Studio Methodology• Grew out of industrial design and architecture• No “rockstars”• Different versions/methods• For example, Todd Zaki Warfel, Message First, talks

about …• Create. Pitch. Critique.• 6.8.5 game

Methodology• Sketch• Limit your time• Don’t worry about mistakes or style

Goals• Benefit from the participation of your colleagues• Communicate ideas effectively by visualizing them• Quickly generate ideas and refine through

iterations

Process:

1. Discuss2. Sketch3. Share4. Revise

Discuss

• Discuss the experience you’re sketching• What’s its purpose?• What features are necessary?• How would you prioritize them?• What’s the audience?

• However, you are not discussing layout or design• Just the problem you’re trying to solve• No sketching yet!

Sketch

• Sketch silently• Limit your time – 5, 10 minutes• Sketch as much has possible, as many different

ideas as possible• Emphasis is on quantity of ideas not quality of

sketches

Share

• Review your work with your team• Keep it short – 60 seconds each• You provide feedback to others

• What you like • Questions about didn’t work for you• You’re not grilling your colleagues and this is

not a competition

Revise

• Now begin your wireframe with a more informed view, more and better ideas

• And sketch again if you need to

Our Exercise

What to do?

Our Exercise:

A home page for Events.com

• A website for finding local events– Listed by category– Listed by date– Listed by ???

• Who is the audience?– Personas

Our Exercise:

Consider other event sites you’re familiar with. This will be your “competitive analysis”

Our Exercise:

In teams, sketch your ideas.

Events.com Home Page

1. Take 10 minutes to discuss what features belong here2. Sketch your ideas silently for 10 minutes 3. Share your sketches with your team4. Sketch again, incorporating what you learned from

others

Our Exercise:

1. Take 10 minutes to discuss what features belong here

Our Exercise:

2. Sketch your ideas silently for 10 minutes

Our Exercise:

3. Share your sketches with your team

Our Exercise:

4. Sketch again, incorporating what you learned from others

Some Resources

Introduction to Design Studio Methodology http://uxmag.com/articles/introduction-to-design-studio-methodology

The Design Studio Method – Presentation by Todd Zaki Warfelhttps://vimeo.com/37861987

Online Reading & Viewing

Sketching Tools

The following apps are all for the iPad:

• Adobe Ideas • Bamboo Paper • Muji Notebook • Penultimate • SketchBook Pro

Prototyping With Sketches

AppSeed

Currently a Kickstarter projects, AppSeed allows 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

thanks

www.slideshare.net/stribs

@stribs