Upload
robert-stribley
View
405
Download
2
Embed Size (px)
Citation preview
Robert Stribley03/15/15
Collaborative Sketching: Jumpstart Your Design!
#sketch1st
Robert Stribley@stribs
Associate Experience Director, Razorfish
My clients have included:
• Bank of America, PNC, Wachovia
• Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds, Prudential, Smith Barney, T. Rowe Price
• Boston Scientific, Nasonex
• Choice Hotels, RCI, Sotheby’s International Realty
• Computer Associates, EMC
• Ford, Lincoln
• FreshDirect
• AT&T, Nextel
• Day One, Red Cross
• Pearson, Travel Channel, Women’s Wear Daily
A few ways we sketch at
Razorfish:
• Solo
• Sketch to comp
• Communicate to client
• Storyboarding
• As a team – collaboratively
my conversion story
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
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
[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.”
Exercise 1:
Event Page
In teams, sketch your ideas for an
Event 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. Sketch again, incorporating what you
learned from others
Discuss
Sketch
Share
Iterate
Our Project
Exercise 1
Typical features? Differentiators?
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. Sketch again, incorporating what you learned
from others
Our Project
Exercise 2:
Home Page
In teams, sketch your ideas for a Home
Page
Our Project
Exercise 2
Typical features? Differentiators?
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. This time, 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
Feedback: sxsw.feedogo.com/fdbk.do?sid=IAP35733