Page 1
DRAW THE LINE: BETTER UX WITH SKETCHING
DEB AOKISR. INFORMATION EXPERIENCE DESIGNER, CITRIX
Page 2
HELLO!UX Design + Content Strategy + Comics + Manga Nerd = Deb Aoki
Page 3
I LOVE COMICS. I READ COMICS. I DRAW COMICS.
Bento Box in the Honolulu Star-Advertiser
Page 4
I WRITE ABOUT COMICS TOO.
Page 5
MEANWHILE, MOST OF MY JOBS WERE ABOUT WRITING FOR THE WEB
Page 6
THEN I GOT A JOB AT…
Page 7
AND I STARTED USING MY DRAWING SKILLS MORE AND MORE…
Page 8
THEN I GOT A JOB AT…
I still write, but now I mostly draw.…which is pretty awesome
Page 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
Page 10
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
Page 11
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
Page 12
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
Page 13
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
Page 14
CUSTOMER JOURNEY MAPPINGCAPTURE QUOTES / “DAY IN THE LIFE” EXPERIENCES
Page 15
CUSTOMER JOURNEY MAPPINGCAPTURE QUOTES / “DAY IN THE LIFE” EXPERIENCES
Page 16
USER PERSONASMAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
Page 17
USER PERSONASMAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
The Preparer
The Networker
The Facilitator The Sprinter
The AssistantThe Investigator
Page 18
USER PERSONASMAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
Page 19
HUMANIZE PAIN-POINTSMAKES USERS’ PROBLEMS FEEL MORE ‘REAL’ AND URGENT
Page 20
HUMANIZE PAIN-POINTSMAKES USERS’ PROBLEMS FEEL MORE ‘REAL’ AND URGENT
Page 21
STORYBOARDINGDEMONSTRATE USER SCENARIOS
Page 22
STORYBOARDINGDEMONSTRATE USER SCENARIOS
Page 23
STORYBOARDINGDEMONSTRATE USER SCENARIOS
Page 24
STORYBOARDINGDEMONSTRATE USER SCENARIOS
Page 25
STORYBOARDINGDEMONSTRATE USER SCENARIOS
Page 26
VISUAL NOTETAKINGCAPTURE BIG IDEAS AND MAKE THEM MEMORABLE
Page 27
‘BUT I CAN’T DRAW’If you can draw dots, circles, squares, and lines, you can draw.
Yes, you can!
Page 28
CIRCLE + SQUARE + DOTS + LINES =
Page 31
CIRCLE + DOTS + LINES = FACES AND EMOTIONS
Page 32
idealock / security time listen
cloud laptop NO!money
fast slowsmartphoneemail
DRAW COMMON CONCEPTS IN A FEW STROKES
Page 33
SHOW DIFFERENT PERSPECTIVES
CLOSE-UPEmphasis on screen/finger
interaction
MID-TORSOEmphasis on
screen
SEMI-CLOSE Emphasis on device / human context/use
FULL BODYEmphasis on ‘real world’ context/place of use
Page 34
SUGGESTED READING
Page 35
THANK YOU!EMAIL: [email protected]
TWITTER: @DEBAOKI
ALSO: HTTP://WWW.MANGACOMICSMANGA.COM