Collaborative Sketching for UX Robert
Stribley 02/19/14

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 • Jumpstart collaboration • Ensure recollection • Humanize ideas

What can I sketch? •
Home pages • Category pages • Product pages • Wizards & widgets • Search results • Process Flows • Anything, really

And there’s so much more
to sketch for … • Smartphones • Tablets • Google Glass • iWatches • Responsive design • Ubiquitous computing

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

Really, anyone can sketch Cartoon
by XKCD

A few ways we sketch
at Razorfish: • • • • • Solo Sketch to comp Communicate to client Storyboarding As a team – collaboratively

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?

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 “twttr sketch” Twitter.com

Some Advice from the Experts

“The great benefit of drawing
is that when you look at something, you see it for the first time.” - Milton Glaser

“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 Buxton Sketching 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 Roam The 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 • 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. Discuss 2. Sketch
3. Share 4. 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

Now, it’s your turn

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 … what else? • Who is the audience? – Locals – Tourists – Event promoters

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

Our Exercise: In teams, sketch
your ideas 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

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

Books

Sketching Tools The following apps
are all for the iPad: • Adobe Ideas • Bamboo Paper • Muji Notebook • Penultimate • SketchBook Pro • Paper

Prototyping 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

Further Study • Introduction to
Design Studio Methodology http://uxmag.com/articles/introduction-to-design-studio-methodology • The Design Studio Method – Presentation by Todd Zaki Warfel https://vimeo.com/37861987

Thank you
www.slideshare.net/stribs