Sketching & Prototyping UX (starting with stories)
Upcoming SlideShare
Loading in...5
×
 

Sketching & Prototyping UX (starting with stories)

on

  • 12,262 views

This is the sketching/prototyping portion of a lean UX design bootcamp @500startups, it's evolved for each batch. The workshop has been a part of the 500startups UX bootcamp on 2/4/2011, 6/4/2011 and ...

This is the sketching/prototyping portion of a lean UX design bootcamp @500startups, it's evolved for each batch. The workshop has been a part of the 500startups UX bootcamp on 2/4/2011, 6/4/2011 and 10/21/2011. It's constantly evolving for each batch, working with batches #000 + #001, and now #002 so far!

Statistics

Views

Total Views
12,262
Views on SlideShare
11,946
Embed Views
316

Actions

Likes
54
Downloads
298
Comments
0

23 Embeds 316

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

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • grab your user quote that you mentioned in the persona recap today+ a sticky pad + and a pen\n
  • sketch anything you want from scribbles to enrique allan. In the meantime, I’m going to tell you about sketching.\n
  • when you sketch, your thinking becomes tangible making.\n
  • It turns your brain’s fuzzy’ness into something clear, simply by being tangible -> Increasing the chance to share, collaborate and improve your ideas. \n
  • \n
  • Any volunteer that wants to share the stretch sticky that you scribbled on?\n
  • grab your persona quote and write it on a sticky, this example is cardmunch, make the quote into a speech bubble by circling it.\n
  • \n
  • ok, now grab a third sticky. This is a memory sticky based on your persona quote. Remember generating ideas during the lunch improv? Improv with sketching this sticky. Sketch anything that inspires or riffs off any of the actions or ideas around the quote. \n
  • great, now grab a fourth sticky. Use your quote and memory stickies as inspiration toward making up an interaction sticky. Write an action/trigger on a interface element, try a single button or something simple.\n
  • so, we just did this warm up, but let’s uncover the ways you can use these in real life for your product.\n
  • \n
  • \n
  • when I worked with IDEO last year I got to participate in a brainstorm for a crazy invention book with Klutz, the method used is called make a mutt, you add on peoples ideas or simply combine two objects to generate new ideas.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • quote or user need, not features, your persona, 6 places where they would need your product, where that need would arise/ where they would feel that need. most obvious 1 first, speed kills the censor\n
  • \n
  • bring those guys back! what would a screen or interface look like to achieve this?\n
  • \n

Sketching & Prototyping UX (starting with stories) Sketching & Prototyping UX (starting with stories) Presentation Transcript

  • 500 Startups Lean UX Design Bootcamp Sketching& Prototyping UX (starting with stories) @karldotter hashtag #sketchux
  • Thinking → Making
  • Tangible → Clarifies
  • 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!