Post on 27-Jan-2015
description
[Explaining prototyping to a five-year-old.]
Frozen storyboard image. (Walt Disney Pictures) via NPR http://www.wbur.org/npr/247209372/for-top-flight-animators-the-gag-is-an-art-all-its-own
Prototypes tell a story.
We prototype to think.
We prototype to learn.
We prototype to decide.
Design Thinking“a human-centered, creative, iterative,
and practical approach to finding the best ideas and ultimate solutions.”
— Tim Brown, IDEO
EmpathizeObserve
Engage
Immerse
INTERVIEWS + ETHNOGRAPHY
Tools Telephone Skype / Video Chat Web conferencing/screen sharing applications Digital photos Blogs, notebooks, diaries !
empathize
What is it? An open-ended conversation with users about your area of interest. !
Why do it? The best bang-for-your-buck as a first step in getting to know your users.
Allow these conversations to snowball using affinity diagramming and mental models. !Pay attention to tasks and goals.
EMPATHY MAP
empathize
PARTICIPATORY DESIGN
Tools Paper, scissors, glue YUI Design Stencils Other images
empathize
What is it? A tangible representation of a system !
Why do it? Fun for everyone. Allows participants to express needs in a different format. We’re not interested in the actual
prototypes as much as the conversations about the reasons behind them.
PARTICIPATORY DESIGN
empathize
PARTICIPATORY DESIGN
empathize
Define[USER] needs to [USER’s NEED] because [SURPRISING INSIGHT].
Analogy
Design Principles
Ideate1. Defer judgment
2. Encourage wild ideas 3. Build on the ideas of others 4. Stay focused on the topic
6. Be visual 7. Go for quantity
PrototypeIf a picture is worth a thousand words,
a prototype is worth a thousand pictures.
“Prototypes should only command as much time, effort, and investment as are needed to generate useful feedback and evolve an idea.”
— Tim Brown, IDEOhttp://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf
SKETCHBOARDS
getting organized
USER FLOWS
prototyping
CUSTOMER JOURNEY MAPS
prototyping
STORYBOARDS / COMICS
prototyping
PAPER PROTOTYPES
prototyping
WIZARD OF OZ
prototyping
PAPER + POWERPOINT
prototyping
BALSAMIQ MOCKUPS
prototyping
Balsamiq Mockups
AXURE
prototyping
Axure RP
HTML / BOOTSTRAP / ETC.
prototyping
getbootstrap.com getclank.com foundation.zurb.com !jetstrap.com easel.io !framerjs.com
WEB-BASED TOOLS
Tools Mockflow Proto.io ProtoShare HotGloo FluidUI InvisionApp ... etc.
prototyping
ADOBE EDGE REFLOW
prototyping
PATTERN LIBRARIES
prototyping
Recommended…
Design Thinking http://dschool.stanford.edu/use-our-methods/ http://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf !Customer Journey Mapping http://www.servicedesigntools.org/ http://mappingexperiences.com !Comics http://kevnull.com/creating-concepts-through-comics http://alistapart.com/article/see-what-i-mean designcomics.org !Design Pattern Libraries http://ui-patterns.com/ https://ux.mailchimp.com/patterns/ https://developer.yahoo.com/ypatterns/about/libraries.html !
Recommended…
Photo Credits
"Shaping" by Becky Wetheringtonhttps://www.flickr.com/photos/macbeck/3949856872
"Tea Anyone?" by Manish Bansalhttps://www.flickr.com/photos/bansal98/2318035539
"Lauri at the Wheel" by kellinahandbaskethttps://www.flickr.com/photos/kellinahandbasket/2183799236
"Trimmed Bowls" by Martin Cathraehttps://www.flickr.com/photos/suckamc/2829328496