Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Collaborative Sketching for UX - Jumpstart Your Design!

905 views

Published on

Collaborative Sketching for UX - Jumpstart Your Design! - As presented by Robert Stribley, SXSW 0314

Published in: Design
  • Be the first to comment

Collaborative Sketching for UX - Jumpstart Your Design!

  1. 1. Robert Stribley 03/15/15 Collaborative Sketching: Jumpstart Your Design! #sketch1st
  2. 2. 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
  3. 3. A few ways we sketch at Razorfish: • Solo • Sketch to comp • Communicate to client • Storyboarding • As a team – collaboratively
  4. 4. my conversion story
  5. 5. Arguably, we’ve been sketching for eons
  6. 6. 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
  7. 7. Why sketch? • Enable communication • Make abstract concepts concrete • Iterate on ideas • Ensure recollection • Humanize ideas • Jumpstart collaboration
  8. 8. What can I sketch? • Home pages • Category pages • Product pages • Forms • Wizards & widgets • Search results • Process Flows • Anything, really
  9. 9. And there’s so much more to sketch for … • Smartphones • Tablets • Watches • Google Glass • Other wearables • Responsive design • Ubiquitous computing
  10. 10. Who can sketch? • Information architects • Interaction designers • Graphic designers • Content strategists • Project managers • Business analysts • Functional analysts • Developers • Client directors … Anyone really
  11. 11. Really, anyone can sketch Cartoon by XKCD
  12. 12. 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
  13. 13. However, we can learn from the pros
  14. 14. Who often begin with a sketch
  15. 15. Adding layers, detail, color
  16. 16. Until they complete their masterpiece
  17. 17. A Quick Case Study
  18. 18. Any idea what this is a sketch of?
  19. 19. “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
  20. 20. Some Advice from the Pros
  21. 21. “The great benefit of drawing is that when you look at something, you see it for the first time.” Milton Glaser
  22. 22. “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
  23. 23. “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
  24. 24. 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
  25. 25. "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
  26. 26. Collaborative Sketching
  27. 27. For the purposes of today’s workshop, sketching is … • Quick • Simple • Collaborative
  28. 28. All the tools you need: Paper Sharpies Photo by JasonTank, Flickr
  29. 29. 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
  30. 30. - 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.”
  31. 31. Defining Collaborative Sketching Origins • Will Evans • Introduction to Design Studio Methodology – Article • Process • Illumination • Collaborative Ideation • Presentation • Critique • Iteration @semanticwill
  32. 32. 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
  33. 33. • 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
  34. 34. 1. Discuss 2. Sketch 3. Share 4. Iterate Process
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. Now, it’s your turn
  40. 40. Our Exercise
  41. 41. What to do?
  42. 42. Events.com A website for finding and posting local events • Listed by category • Listed by date • Listed by … what else? Our Project
  43. 43. Events.com Consider … Who is the audience? • Locals • Tourists • Event promoters Our Project
  44. 44. Consider other event sites you’re familiar with. This will be your “competitive analysis.”
  45. 45. Exercise 1: Event Page
  46. 46. 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
  47. 47. Typical features? Differentiators?
  48. 48. 1. Take 15 minutes to discuss what features belong there Our Project
  49. 49. 2. Sketch your ideas silently for 10 minutes Our Project
  50. 50. 3. Share your sketches with your team Our Project
  51. 51. 4. Sketch again, incorporating what you learned from others Our Project
  52. 52. Exercise 2: Home Page
  53. 53. In teams, sketch your ideas for a Home Page Our Project Exercise 2
  54. 54. Typical features? Differentiators?
  55. 55. 1. Take 15 minutes to discuss what features belong there Our Project
  56. 56. 2. Sketch your ideas silently for 10 minutes Our Project
  57. 57. 3. Share your sketches with your team Our Project
  58. 58. 4. This time, collaborate on a sketch together as a group, incorporating what you learned from each other. Our Project
  59. 59. Some Resources
  60. 60. Books
  61. 61. The following apps are all for the iPad: • Adobe Ideas • Bamboo Paper • Muji Notebook • Penultimate • SketchBook Pro • Paper Sketching Apps
  62. 62. 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
  63. 63. • 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
  64. 64. Thank you @stribs Deck: www.slideshare.net/stribs Feedback: sxsw.feedogo.com/fdbk.do?sid=IAP35733

×