Draw the Line: Better UX With Sketching

7,032 views

Published on

UX designer and comics nerd Deb Aoki shows examples of how simple whiteboard sketching and storyboards can foster collaboration and facilitate better user experiences. Bonus content: a quick drawing tutorial so you can do it too!

Published in: Design
1 Comment
51 Likes
Statistics
Notes
No Downloads
Views
Total views
7,032
On SlideShare
0
From Embeds
0
Number of Embeds
136
Actions
Shares
0
Downloads
225
Comments
1
Likes
51
Embeds 0
No embeds

No notes for slide
  • www.mangacomicsmanga.com
    www.publishersweekly.com
  • Workflow sketch for content development processes at Citrix
  • June 2014 Consultants workshop to brainstorm eDocs changes
  • eBay shopping cart customer experience, from “just browsing” to “ready to buy”
  • eBay Green Box – a re-usable box for shipping. Red represents seller experience and blue represents buyer experience.
  • CX customer journey sketching / customer insights of an interview with a doctor / end user of Citrix products
  • End user customer journey moments
  • End user interview with Olga, a globetrotting graphic designer who worked remotely for a month from Thailand, using Citrix products like ShareFile, Podio and GoTo Meeting to stay in touch with the Santa Clara offices.
  • GoTo Meeting user personas
  • Sample silhouettes of customer personas
  • One unique aspect of using a shopping cart on eBay is that many of the items on sale are one-of-a-kind, or available in very limited quantities. But we also couldn’t reserve items if someone put it in their cart – the items had to remain available to other buyers.

    So I used the metaphor of someone going tot the supermarket to buy cereal – he puts the cereal in his cart, then he remembers he needs milk. So while he’s looking at his milk, someone snatches his cereal away and buys it before he does.

    Illustrating the problem by using everyday, non-website situations really helped us to see how these situations would be really frustrating to users.
  • Painpoint: Too Many Buttons!
    One thing that happens in eBay is that we offer our users a lot of different ways to buy something or save it for later. So one of the by-products of that is a page with a lot of buttons!

    Quite often, we design based on what our one improvement/change would look like on the site – but often, we don’t take into account the cumulative effect of many changes made by many teams to the same page.

    This page was part of a story about a user who hears about a cool thermostat, then tries to go to eBay to buy it – and along the way, is confronted with a dizzying array of choices.
  • XenMobile day in the life storyboard
  • CubeLess scenario – for an app that helps mobile workers find cafes / shared workspaces
  • File sharing and collaboration app concept drawings
  • Group Gifts concept storyboard for eBay
  • GoTogether concept drawing – shared/social concert/event ticket buying on eBay
  • Think Tank 2014 – June / 3 day session with Citrix Execs, sketching the high level strategy / planning topics
  • Dave Gray’s style of drawing stick figures
  • David Sibbett’s “star people”
  • Doodle Revolution by Sunni Brown
    The Sketchnote Handbook by Mike Rhode
    The Graphic Facilitator’s Guide by Brandy Agerbeck
    Visual Meetings by David Sibbett
    Understanding Comics and Making Comics by Scott McCloud
    See What I Mean by Kevin Cheng
    Drawing Words and Writing Pictures by Jessica Abel and Matt Madden
  • Draw the Line: Better UX With Sketching

    1. 1. DRAW THE LINE: BETTER UX WITH SKETCHING DEB AOKI SR. INFORMATION EXPERIENCE DESIGNER, CITRIX
    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
    4. 4. I WRITE ABOUT COMICS TOO.
    5. 5. MEANWHILE, MOST OF MY JOBS WERE ABOUT WRITING FOR THE WEB
    6. 6. THEN I GOT A JOB AT…
    7. 7. AND I STARTED USING MY DRAWING SKILLS MORE AND MORE…
    8. 8. THEN I GOT A JOB AT… I still write, but now I mostly draw. …which is pretty awesome
    9. 9. WHY DRAW PICTURES? • Focuses on users’ needs and problems, rather than on design, business, or technology concerns or limitations • Pictures can communicate abstract ideas and user experiences quickly and powerfully • 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. 10. CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
    11. 11. CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
    12. 12. CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
    13. 13. CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
    14. 14. CUSTOMER JOURNEY MAPPING CAPTURE QUOTES / “DAY IN THE LIFE” EXPERIENCES
    15. 15. CUSTOMER JOURNEY MAPPING CAPTURE QUOTES / “DAY IN THE LIFE” EXPERIENCES
    16. 16. USER PERSONAS MAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
    17. 17. USER PERSONAS MAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE The Preparer The Networker The Facilitator The Sprinter The AssistantThe Investigator
    18. 18. USER PERSONAS MAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
    19. 19. HUMANIZE PAIN-POINTS MAKES USERS’ PROBLEMS FEEL MORE ‘REAL’ AND URGENT
    20. 20. HUMANIZE PAIN-POINTS MAKES USERS’ PROBLEMS FEEL MORE ‘REAL’ AND URGENT
    21. 21. STORYBOARDING DEMONSTRATE USER SCENARIOS
    22. 22. STORYBOARDING DEMONSTRATE USER SCENARIOS
    23. 23. STORYBOARDING DEMONSTRATE USER SCENARIOS
    24. 24. STORYBOARDING DEMONSTRATE USER SCENARIOS
    25. 25. STORYBOARDING DEMONSTRATE USER SCENARIOS
    26. 26. VISUAL NOTETAKING CAPTURE BIG IDEAS AND MAKE THEM MEMORABLE
    27. 27. ‘BUT I CAN’T DRAW’ If you can draw dots, circles, squares, and lines, you can draw. Yes, you can!
    28. 28. CIRCLE + SQUARE + DOTS + LINES =
    29. 29. DO IT YOUR WAY!
    30. 30. DO IT YOUR WAY!
    31. 31. CIRCLE + DOTS + LINES = FACES AND EMOTIONS
    32. 32. idea lock / security time listen cloud laptop NO! money fast slowsmartphone email DRAW COMMON CONCEPTS IN A FEW STROKES
    33. 33. SHOW DIFFERENT PERSPECTIVES 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
    34. 34. SUGGESTED READING
    35. 35. THANK YOU! EMAIL: DEBORA.AOKI@CITRIX.COM TWITTER: @DEBAOKI ALSO: HTTP://WWW.MANGACOMICSMANGA.COM

    ×