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!
Text of Draw the Line: Better UX With Sketching
DRAW THE LINE: BETTER UX WITH SKETCHING DEB AOKI SR. 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 Its fun! And it encourages participation and informal discussions
CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CAPTURE WORKFLOWS SEE THE BIG PICTURE / SEE HOW THE PIECES FIT TOGETHER
CUSTOMER JOURNEY MAPPING CAPTURE QUOTES / DAY IN THE LIFE EXPERIENCES
CUSTOMER JOURNEY MAPPING CAPTURE QUOTES / DAY IN THE LIFE EXPERIENCES
USER PERSONAS MAKE THE CUSTOMER REAL / BRING THEM TO LIFE
USER PERSONAS MAKE THE CUSTOMER REAL / BRING THEM TO LIFE The Preparer The Networker The Facilitator The Sprinter The AssistantThe Investigator
USER PERSONAS MAKE THE CUSTOMER REAL / BRING THEM TO LIFE
HUMANIZE PAIN-POINTS MAKES USERS PROBLEMS FEEL MORE REAL AND URGENT
HUMANIZE PAIN-POINTS MAKES USERS PROBLEMS FEEL MORE REAL AND URGENT
STORYBOARDING DEMONSTRATE USER SCENARIOS
STORYBOARDING DEMONSTRATE USER SCENARIOS
STORYBOARDING DEMONSTRATE USER SCENARIOS
STORYBOARDING DEMONSTRATE USER SCENARIOS
STORYBOARDING DEMONSTRATE USER SCENARIOS
VISUAL NOTETAKING CAPTURE BIG IDEAS AND MAKE THEM MEMORABLE
BUT I CANT 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
idea lock / security time listen cloud laptop NO! money fast slowsmartphone email DRAW COMMON CONCEPTS IN A FEW STROKES
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
