Sketching & Prototyping UX (starting with stories)

500 Startups Lean UX Design Bootcamp Sketching& Prototyping UX (starting with stories) @karldotter hashtag #sketchux

Thinking → Making

Tangible → Clariﬁes

Quick inexpensive disposable

Where do you start?

I’ll tell you a story about comics

making comics forshelternetwork.org

sketch scenarios fast.speed kills the censor.

identify actions,emotions, behavior

Remember yourpersona and POVs?

These are the POVsPoint of View: [Insert User...(descriptive)] + Needs List of[Insert Needs...(verb)] + Because + [Insert Insight...(compelling & surprising)] hypotheses: • “Tell me about the last time you...” When you go through the interview check o • “Tell me about an experience you’ve had with...” if you validated any assumptions • “How did you feel when ____ happened?” • “What were you feeling at that moment?” • “Really, can you tell me why that matters? • “Say more about that...I see... Do you know why you think that? • “Okay. And that is important because...”

Add context Ability cheap, fast, simple usability Triggers hope, fear,use pleasure, pain user goal context

where is your persona?

Grab paper & pen

collect your thoughts Use Themed Release users context Features (goals/needs)

Scribble your storyFriday, October 21, 11

Just a few lines is all it takesFriday, October 21, 11

What are the emotions?Friday, October 21, 11

UX Challenge, Your Turn (20min)• Sketch out your POV in context, get at goals, needs, uses• what are the riskiest scenarios to draw?• High frequency moments: actions, emotions, behavior

Actions + emotions + behavior + context, before a ui proto.

Examples and Stories ShopWell Dojo The Designer FundFriday, October 21, 11

At ShopWell we... tested with Paper prototypesFriday, October 21, 11

At Dojo we... communicate with comicsFriday, October 21, 11

Identify the storyFriday, October 21, 11

Thumbnail it outFriday, October 21, 11

Reduce the panelsFriday, October 21, 11

Test a rough mockFriday, October 21, 11

Use your story to explain your productFriday, October 21, 11

With The Designer Fund we... started with sketches.Friday, October 21, 11

We sketched the ecosystem we wanted to build.Friday, October 21, 11

Make a new sketch... Bring these guys back.What would a sketched screen look like to achieve your scenario?

Challenge!• Pick a scenario from your sketches• Build those as ui/screens so anyone here can try it out.• You have 20 minutes.

Paper Prototyping• Build your solution with paper, markers, post-its and tape• “Paper” == whatever is easiest for you

Paper Prototyping• Fast, easy and cheap way to test your hypotheses• Uncover usability problems and hidden complexity before writing any code

Example!

Keep in mind• Build your prototype to test your hypotheses.• How will you measure success?• Have a scenario and questions ready for your testers.

Challenge!• Build the screens you just sketched so anyone here can try it out.• You have 20 minutes.

Resources: See What I mean: How to use comics to communicate ideas by Kevin Cheng http://rosenfeldmedia.com/ books/comics/ Making Comics by Scott McCloud http://scottmccloud.com/Friday, October 21, 11

Sketching & Prototyping UX now, how will you test further?... @karldotter hashtag #sketchux Thank you 500startups #000 + #001 monsters, Enrique Allen,Rick Boardman, Miche Capone,Thomas Both, Laura Klein & Janice Fraser + more!

http://sprmario.posterous.com	47
http://paper.li	37
http://a0.twimg.com	33
http://leanux.posterous.com	30
http://welovelean.com	23
https://twitter.com	16
http://us-w1.rockmelt.com	15
http://sprmario.tumblr.com	11
http://futurebirds.tumblr.com	11
http://www.pushkarsane.com	9
http://welovelean.posterous.com	7
https://twimg0-a.akamaihd.net	5
http://www.linkedin.com	5
http://twitter.com	4
http://posterous.com	3
http://www.twylah.com	2
https://si0.twimg.com	2
http://i9e.tumblr.com	2
http://tweetedtimes.com	1

Sketching & Prototyping UX (starting with stories)

by Karl Dotter on Feb 04, 2011

Accessibility

Categories

Upload Details

Usage Rights

19 Embeds 263

Statistics

Sketching & Prototyping UX (starting with stories) Presentation Transcript