draw the line: better ux with sketching

35
DRAW THE LINE: BETTER UX WITH SKETCHING DEB AOKI SR. INFORMATION EXPERIENCE DESIGNER, CITRIX

Upload: deb-aoki

Post on 11-Aug-2014

2.127 views

Category:

Design


60 download

DESCRIPTION

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

SUGGESTED READING

THANK YOU!EMAIL: [email protected]

TWITTER: @DEBAOKI

ALSO: HTTP://WWW.MANGACOMICSMANGA.COM