Draw the Line: Better UX With Sketching

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

SUGGESTED READING

THANK YOU!EMAIL: [email protected]

TWITTER: @DEBAOKI

ALSO: HTTP://WWW.MANGACOMICSMANGA.COM