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!
TRANSCRIPT
DRAW THE LINE: BETTER UX WITH SKETCHING
DEB AOKISR. INFORMATION EXPERIENCE DESIGNER, CITRIX
HELLO!UX Design + Content Strategy + Comics + Manga Nerd = Deb Aoki
I LOVE COMICS. I READ COMICS. I DRAW COMICS.
Bento Box in the Honolulu Star-Advertiser
I WRITE ABOUT COMICS TOO.
MEANWHILE, MOST OF MY JOBS WERE ABOUT WRITING FOR THE WEB
THEN I GOT A JOB AT…
AND I STARTED USING MY DRAWING SKILLS MORE AND MORE…
THEN I GOT A JOB AT…
I still write, but now I mostly draw.…which is pretty awesome
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
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CAPTURE WORKFLOWSSEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CUSTOMER JOURNEY MAPPINGCAPTURE QUOTES / “DAY IN THE LIFE” EXPERIENCES
CUSTOMER JOURNEY MAPPINGCAPTURE QUOTES / “DAY IN THE LIFE” EXPERIENCES
USER PERSONASMAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
USER PERSONASMAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
The Preparer
The Networker
The Facilitator The Sprinter
The AssistantThe Investigator
USER PERSONASMAKE THE CUSTOMER “REAL” / BRING THEM TO LIFE
HUMANIZE PAIN-POINTSMAKES USERS’ PROBLEMS FEEL MORE ‘REAL’ AND URGENT
HUMANIZE PAIN-POINTSMAKES USERS’ PROBLEMS FEEL MORE ‘REAL’ AND URGENT
STORYBOARDINGDEMONSTRATE USER SCENARIOS
STORYBOARDINGDEMONSTRATE USER SCENARIOS
STORYBOARDINGDEMONSTRATE USER SCENARIOS
STORYBOARDINGDEMONSTRATE USER SCENARIOS
STORYBOARDINGDEMONSTRATE USER SCENARIOS
VISUAL NOTETAKINGCAPTURE BIG IDEAS AND MAKE THEM MEMORABLE
‘BUT I CAN’T DRAW’If you can draw dots, circles, squares, and lines, you can draw.
Yes, you can!
CIRCLE + SQUARE + DOTS + LINES =
DO IT YOUR WAY!
DO IT YOUR WAY!
CIRCLE + DOTS + LINES = FACES AND EMOTIONS
idealock / security time listen
cloud laptop NO!money
fast slowsmartphoneemail
DRAW COMMON CONCEPTS IN A FEW STROKES
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