Collaborative Sketching for UX

  • Published on

  • View

  • Download

Embed Size (px)


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


  • Collaborative Sketching for UX Robert Stribley 10/22/13
  • Arguably, weve been sketching for eons
  • But now, were 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 theres 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 isnt Sketching isnt only for designers Sketching isnt difficult Sketching isnt drawing You dont need to 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
  • Some 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 Buxton Sketching 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 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 todays 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 Dont 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 youre sketching Whats its purpose? What features are necessary? How would you prioritize them? Whats the audience? However, you are not discussing layout or design Just the problem youre 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 didnt work for you Youre 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, its your turn
  • Our Exercise
  • What to do?
  • Our Exercise: A home page for 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 youre familiar with. This will be your competitive analysis
  • Our Exercise: In teams, sketch your ideas. 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
  • 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
  • Online Reading & Viewing Introduction to Design Studio Methodology The Design Studio Method Presentation by Todd Zaki Warfel
  • Sketching Tools The following apps are all for the iPad: Adobe Ideas Bamboo Paper Muji Notebook Penultimate SketchBook Pro Paper
  • 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