Collaborative Sketching for UX

52
Collaborative Sketching for UX Robert Stribley 10/22/13

description

Collaborative Sketching for UX - as presented by Robert Stribley at Razorfish, NYC, 10/22/13

Transcript of Collaborative Sketching for UX

Page 1: Collaborative Sketching for UX

Collaborative Sketching for UXRobert Stribley

10/22/13

Page 2: Collaborative Sketching for UX
Page 3: Collaborative Sketching for UX

Arguably, we’ve been sketching for eons

Page 4: Collaborative Sketching for UX

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

Page 5: Collaborative Sketching for UX

Why sketch?

• Enable communication• Make abstract

concepts concrete• Iterate on ideas• Jumpstart

collaboration• Ensure recollection• Humanize ideas

Page 6: Collaborative Sketching for UX

What can I sketch?

• Home pages• Category pages• Product pages• Wizards & widgets• Search results• Process Flows• Anything, really

Page 7: Collaborative Sketching for UX

And there’s so much more to sketch for …

• Smartphones• Tablets• Google Glass• iWatches• Responsive design• Ubiquitous

computing

Page 8: Collaborative Sketching for UX

Who can sketch?

• Information architects• Interaction designers• Graphic designers• Content strategists• Project managers• Business analysts• Functional analysts• Developers • Client directors

Page 9: Collaborative Sketching for UX

Really, anyone can sketch

Cartoon by XKCD

Page 10: Collaborative Sketching for UX

A few ways we sketch at Razorfish:

• Solo• Sketch to comp• Communicate to client• Storyboarding• As a team – collaboratively

Page 11: Collaborative Sketching for UX

What sketching isn’t …

• Sketching isn’t only for designers

• Sketching isn’t difficult• Sketching isn’t drawing

You don’t need to be Michelangelo to participate

Page 12: Collaborative Sketching for UX

However, we can learn from the pros

Page 13: Collaborative Sketching for UX

Who often begin with a sketch

Page 14: Collaborative Sketching for UX

Adding layers, detail, color

Page 15: Collaborative Sketching for UX

Until they complete their masterpiece

Page 16: Collaborative Sketching for UX

A Quick Case Study

Page 17: Collaborative Sketching for UX

Any idea what this is a sketch of?

Page 18: Collaborative Sketching for UX

“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

Page 19: Collaborative Sketching for UX

Some Advice from the Experts

Page 20: Collaborative Sketching for UX

“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

Page 21: Collaborative Sketching for UX

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

Page 22: Collaborative Sketching for UX

"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

Page 23: Collaborative Sketching for UX
Page 24: Collaborative Sketching for UX

Collaborative Sketching

Page 25: Collaborative Sketching for UX

For the purposes of today’s workshop, sketching is …

•Quick•Simple•Collaborative

Page 26: Collaborative Sketching for UX

All the tools you need:

PaperSharpies

Photo by JasonTank, Flickr

Page 27: Collaborative Sketching for UX

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

Page 28: Collaborative Sketching for UX

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

Page 29: Collaborative Sketching for UX

Process:

1. Discuss2. Sketch3. Share4. Revise

Page 30: Collaborative Sketching for UX

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

Page 31: Collaborative Sketching for UX

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

Page 32: Collaborative Sketching for UX

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

Page 33: Collaborative Sketching for UX

Revise

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

• And sketch again if you need to

Page 34: Collaborative Sketching for UX
Page 35: Collaborative Sketching for UX
Page 36: Collaborative Sketching for UX
Page 37: Collaborative Sketching for UX

Now, it’s your turn

Page 38: Collaborative Sketching for UX

Our Exercise

Page 39: Collaborative Sketching for UX

What to do?

Page 40: Collaborative Sketching for UX

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

Page 41: Collaborative Sketching for UX

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

Page 42: Collaborative Sketching for UX

Our Exercise: In teams, sketch your ideas.

Events.com Home Page

1. Take 10 minutes to discuss what features belong here

2. Sketch your ideas silently for 10 minutes

3. Share your sketches with your team

4. Sketch again, incorporating what you learned from others

Discuss

Sketch

Share

Revise

Page 43: Collaborative Sketching for UX

Our Exercise:

1. Take 10 minutes to discuss what features belong here

Page 44: Collaborative Sketching for UX

Our Exercise:

2. Sketch your ideas silently for 10 minutes

Page 45: Collaborative Sketching for UX

Our Exercise:

3. Share your sketches with your team

Page 46: Collaborative Sketching for UX

Our Exercise:

4. Sketch again, incorporating what you learned from others

Page 47: Collaborative Sketching for UX

Some Resources

Page 48: Collaborative Sketching for UX
Page 49: Collaborative Sketching for UX

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

Page 50: Collaborative Sketching for UX

Sketching Tools

The following apps are all for the iPad:

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

Page 51: Collaborative Sketching for UX

Prototyping With Sketches

AppSeedCurrently 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

Page 52: Collaborative Sketching for UX

thanks

www.slideshare.net/stribs