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.

Storyboarding csa2013 - Simple sketching for UX, user research & content strategy

12,999 views

Published on

"On the Same Page: Simple Sketching for Collaboration, User Research, and Content Strategy

  • Be the first to comment

Storyboarding csa2013 - Simple sketching for UX, user research & content strategy

  1. 1. ON THE SAME PAGE simple sketching and storyboarding for collaboration, research, & content strategy DEB AOKI sr. information experience designer, citrix October 18, 2013
  2. 2. HELLO. UX Design + Content Strategy + Comics + Manga Nerd = Deb Aoki
  3. 3. I LOVE COMICS. I READ COMICS. I DRAW COMICS. • Bento Box in the Honolulu Star-Advertiser 3
  4. 4. I WRITE ABOUT COMICS TOO. 4
  5. 5. MEANWHILE, MOST OF MY JOBS WERE ABOUT WRITING FOR THE WEB 5
  6. 6. THEN I GOT A JOB AT… 6
  7. 7. And suddenly, my drawing skills came in handy again. 7
  8. 8. NOW I‟M AT… I still write, but now I mostly draw. …which is pretty awesome 8
  9. 9. PICTURES > WORDS WHY WRITE WHEN YOU CAN DRAW IT INSTEAD?
  10. 10. WHY DRAW PICTURES? • Pictures can communicate abstract ideas and user experiences quickly and powerfully • Focuses on users‟ needs and problems, rather than on design, business, or technology concerns or limitations • Faster and cheaper than coding clickable prototypes or designing wireframes, or polished page mock-ups • Can provide a „big picture‟ perspective of the entire user experience, goals & messaging • It‟s fun! And it encourages participation and informal discussions 10
  11. 11. HOW CAN SKETCHING HELP WITH CONTENT STRATEGY? I‟M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
  12. 12. BRAINSTORM IDEAS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 12
  13. 13. BRAINSTORM IDEAS: user personas PICTURES > WORDS: STORYBOARDING AT EBAY 13
  14. 14. BRAINSTORM IDEAS: framing problems & goals PICTURES > WORDS: STORYBOARDING AT EBAY 14
  15. 15. REFINE CONCEPTS : holiday buzz PICTURES > WORDS: STORYBOARDING AT EBAY 15
  16. 16. PAINT A “BIG PICTURE”: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 16
  17. 17. PAINT A “BIG PICTURE”: thanksgiving 2012 PICTURES > WORDS: STORYBOARDING AT EBAY 17
  18. 18. EXPLAIN HOW IT WORKS: green box user flows PICTURES > WORDS: STORYBOARDING AT EBAY 18
  19. 19. ILLUSTRATE PAIN POINTS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 19
  20. 20. ILLUSTRATE PAIN POINTS: too many buttons PICTURES > WORDS: STORYBOARDING AT EBAY 20
  21. 21. SELL AN IDEA: citrix simply giving campaign PICTURES > WORDS: STORYBOARDING AT EBAY 21
  22. 22. SELL AN IDEA: student accounts PICTURES > WORDS: STORYBOARDING AT EBAY 22
  23. 23. TEST A CONCEPT: group gifts PICTURES > WORDS: STORYBOARDING AT EBAY 23
  24. 24. TEST A CONCEPT: go together PICTURES > WORDS: STORYBOARDING AT EBAY 24
  25. 25. „BUT I CAN‟T DRAW‟ If you can draw dots, circles, squares and lines, you can draw. Yes, you can!
  26. 26. CIRCLE + SQUARE + DOTS + LINES = PEOPLE! PICTURES > WORDS: STORYBOARDING AT EBAY 26
  27. 27. ADD A FEW TWEAKS = DIFFERENT PEOPLE PICTURES > WORDS: STORYBOARDING AT EBAY 27
  28. 28. CIRCLE + DOTS + LINES = FACES AND EMOTIONS PICTURES > WORDS: STORYBOARDING AT EBAY 28
  29. 29. WORD BALLOONS… WITHOUT WORDS PICTURES > WORDS: STORYBOARDING AT EBAY 29
  30. 30. CONNECT CONCEPTS WITH LINES Direct connection / action Tentative action Convoluted path Bouncing PICTURES > WORDS: STORYBOARDING AT EBAY 30
  31. 31. DRAW COMMON CONCEPTS IN A FEW STROKES idea lock / security listen time money cloud smartphone laptop NO! fast slow email 31
  32. 32. DIFFERENT PERSPECTIVES OF USER INTERACTION CLOSE-UP Emphasis on screen/finger interaction MID-TORSO Emphasis on screen SEMI-CLOSE Emphasis on device / human context/use FULL BODY Emphasis on „real world‟ context/place of use PICTURES > WORDS: STORYBOARDING AT EBAY 32
  33. 33. USE COLOR TO CONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES PICTURES > WORDS: STORYBOARDING AT EBAY 33
  34. 34. USE COLOR TO CONVEY DIFFERENT EMOTIONS / CONCEPTS / PERSONALITIES BLACK – Most important info / facts GREY – Secondary info / tentative RED – important / error / danger / stop GREEN – success / money / nature / go BLUE – calm / cool / water / sky / masculine ORANGE – cheerful / hot / caution PINK – fun / playful / youthful / feminine PURPLE – regal / sophisticated / serious BROWN – earthy / simple / dirty YELLOW – bright / accents / hard to read as text PICTURES > WORDS: STORYBOARDING AT EBAY 34
  35. 35. AS YOU DRAW, ASK THESE QUESTIONS: • • • • • • • • • • • • Who is the user/customer? What‟s the problem that we‟re solving for the user? How are we making their lives better/easier/simpler/happier? What are they trying to do / What do they want to do? What‟s most important to them? What do they need to know? Why would they click the button / download / sign up? What‟s in it for them? (benefits) How is this different/better than similar services/experiences from other companies? (differentiators) Does the user have any fears/obstacles? What if something goes wrong? What can they do to fix things? What will they see next? / What will happen? PICTURES > WORDS: STORYBOARDING AT EBAY 35
  36. 36. 5 STEPS FOR DRAWING STORYBOARDS Brainstorm > Script > Sketch > Finalize > Adapt
  37. 37. STEP 1: BRAINSTORM IDEAS / SKETCH 37
  38. 38. STEP 2: WRITE A SCRIPT 38
  39. 39. STEP 3: DRAW ROUGH SKETCHES 39
  40. 40. STEP 4: GET FEEDBACK / FINALIZE ART 40
  41. 41. STEP 5: ADAPT VECTOR LINE ART OR VARIATIONS 41
  42. 42. QUESTIONS? THANK YOU! EMAIL: DEBORA.AOKI@CITRIX.COM TWITTER: @DEBAOKI ALSO AT: HTTP://WWW.MANGACOMICSMANGA.COM

×