Back in 2003, we weren’t all
playing games on our
phones.You still had to have
two different devices:
one for games and one for
Nokia’s N-Gage was an
attempt at combining
phones and gaming, it was
just a bad one!
Today product definition
In 2007, the majority of first
iPhone user were gamers!
Now, the mobile games market
is rising to new heights, and
most of the growth is thanks to
§ Anything tangible that lets us explore an idea, evaluate
it, and push it forward is a prototype.
§ In each case an idea has been given expression
through an appropriate medium to show to others for
§ Prototyping is always inspirational - not in the sense of a
perfected artwork but just the opposite: because it
inspires new ideas.
Tim Brown, IDEO
§ There are many approaches to building prototypes for
hardware products and software user interfaces.
§ UI prototypes can be as simple as a drawing on a piece
of paper or as complex as web application
§ Or anywhere in between those extremes!
§ Acting it out the experience with a product or service is
best way to refine it!
§ In prototyping one has to plan to throw
§ Low cost: requires little time, technical expertise
§ High return on investment:
§ Getting user feedback early in the design process
§ Uncovers problematic design choices before they are
committed to code
§ Minimizes miscommunication between designers
§ Generally results in a better UI and product experience.
Designed as a school project was one
of the most funded successful design
projects on Kickstarter Featured on WSJ,
Wired magazine and ABC 7 News.
I Co-founded TT Design Labs and partnered with Chinese
manufacturer to launch 3 products and distributed them to
§ Who are your users? What tasks are they trying to
§ Don’t guess—do your research!
§ Observe users in their natural habitats
§ Check out solutions that already exist (even hacky ones)
§ Make sure you are focusing on a problem at the right
level of detail
§ At this stage,don’t think“bicycle cup holders”
§ Think“helping cyclists stay hydrated without getting hit
by a car”
§ It can be helpful to do some sort of warm-up before you
§ You could allot ~5 minutes to free-form chatter about
related products or tasks
§ Or you could encourage your team to start thinking
creatively and feeling comfortable sharing their
thoughts with an associations game
§ Examples:“Songs David Hasselhoff should cover”,
“Mythological animal which would be most lucrative to
§ Define the importance of each idea:
§ Does it address the problem?
§ Will target users like it?
§ Are the technical requirements available?
§ Is it affordable to implement?
§ Rank ideas by importance
§ Pick the top N ideas
§ Now that you’ve got some ideas, you can start making a
storyboards and paper prototypes.
§ It may seem difficult to represent something as
complicated as a modern software interface with
something as old school as paper
§ Inspired by storyboards used by
§ Series of images which represent
how an interface would be used to
accomplish a task
§ Could be a narrative
§ Good for evaluating workflow
§ Storyboarding means sketching an
actual situation, showing how a user
would use your solution (e.g. web,
mobile app, product) - where (s)he
clicks, what information (s)he
enters, what (s)he thinks etc.
Choose an opening scene:
§ How do customers find out that your
§ Where are they and what are they doing
just before they use your product?
§ Paper representations of an
interface used to simulate
§ Good for evaluating general
concept, specific workflows, and
§ Faster to build
§ Sketching is faster than programming
§ Easier to change
§ No code investment, no tooling– everything
will be thrown away (except the design)
§ Focuses attention on big picture
§ Designer doesn’t waste time on details
§ Customer makes more creative suggestions
§ Only kindergarten skills are required
§ User Testing is a method of soliciting feedback
§ You display whatever lo-fi prototype(s) you
have developed for your product to a small
group of peers
§ They share their immediate reactions to your
ideas and weigh in on whatever open
questions you have identified
§ Give a general idea of what the user is going to do
§ DO NOT give an overall guide to the application
§ It is important to instruct the user to“Think out loud”
§ You may need to gently remind them of this during the session
§ Start with an easy task or two to put the user at ease
§ If the user sees something unexpected then ask what they did
§ Try making an on-the-fly design change
Howto run a User Testing session
§ Be clear about what sort of feedback you’re looking for
§ Overall idea?
§ Specific workflows or interactions?
§ Technical feasibility?
§ Graphic design?
§ Answer questions and correct misconceptions, but do
not argue in favor of your design
§ Show alternative designs if possible
§ If they ask for help
§ Do not give it to them. The idea is to see if the program
design makes sense to them.
§ Let them make mistakes.This gives your design team
places to consider changes.
§ If they get completely lost then help them get back on
§ Follow-up on problems and design ideas
§ Ask about recommendations
§ Hold a design team post mortem meeting
§ Discuss the areas that the user seemed to have problems
with or made suggestion about
§ Consider design alternatives
§ Iterative Refinement
§ Make design changes or changes to the scenarios before
§ Once you have developed a lo-fi prototype and
solicited feedback on it through peer critique and user
§ You may wish to create another lo-fi prototype (isn’t
iterative design fun?)
§ Or you may be ready to move on to a hi-fi prototype
§ Which choice you make will be a function of how much
of your original design you feel needs to change
§ Rustling up an interactive wireframe might sound
like a daunting, time-consuming task. Don’t let it
§ In Marvel app or Justinmind, you can benefit from
the pre-built widgets for both iOS and Android as
well as the pre-made icons mixed with the drag-
and-drop user interface means you don’t need to
spend one second designing anything if you
don’t want to— it’s all there for you to use.
Minimum Viable Product (MVP)
Before starting with product
development make sure that
the product that you will be
building is really the minimum
viable product (MVP).
This means that you’ll have to
answer “yes” to each