Download - Prototyping Ideas
![Page 1: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/1.jpg)
Prototyping ideasCreate better digital experiences
![Page 2: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/2.jpg)
Colin PrestonLead Creative & Experience Designer
![Page 3: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/3.jpg)
Benefits of prototyping
![Page 4: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/4.jpg)
Prototyping helps us to…
COLIN PRESTON
![Page 5: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/5.jpg)
Reduce waste and cost
![Page 6: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/6.jpg)
Reduces time & effort during the implementation phase of a project
![Page 7: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/7.jpg)
Validate ideas quickly
![Page 8: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/8.jpg)
Validate ideas quickly
![Page 9: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/9.jpg)
Design and create products, services or “Experiences” that are desirable to people, viable
for a business & technically feasible .
Ultimately prototyping helps to…
![Page 10: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/10.jpg)
However…
COLIN PRESTON
![Page 11: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/11.jpg)
Don’t waste your time and money producing the wrong method of prototype, for the
wrong reason!
![Page 12: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/12.jpg)
Prototype for theright reason
![Page 13: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/13.jpg)
Understand the reasonfor your prototype
COLIN PRESTON
![Page 14: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/14.jpg)
The reason we prototype can generally fall into three
categories during the design process
![Page 15: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/15.jpg)
Design and developingan idea
Conceptual prototypes
![Page 16: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/16.jpg)
Conceptual prototypes like roleplaying or sketching is to allow the team to work through a design problem, gain feedback, generate
insight into the roll of the idea
![Page 17: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/17.jpg)
Validate ideas quicklyTest and improvingand idea
Technical prototypes
![Page 18: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/18.jpg)
Technical prototypes like Browser Demo’s allow teams to gain
feedback on tangible features or interactions from reel users about how the idea will be implemented
![Page 19: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/19.jpg)
Validate ideas quicklyCommunicatingan idea
Vision prototypes
![Page 20: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/20.jpg)
Vision prototypes like clickable jpg's allow us to sell an idea externally
and gain feedback on look and feel
![Page 21: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/21.jpg)
Picking a method
![Page 22: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/22.jpg)
Understanding what methodto chose when prototyping
COLIN PRESTON
![Page 23: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/23.jpg)
The method of prototype should
be driven by what you are testing and the feedback
you want.
![Page 24: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/24.jpg)
![Page 25: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/25.jpg)
What role will the idea play in a user’s life? Is it useful or fulfil an need? Prototypes with in the roll corner ask
questions about the purpose or function that an idea serves in a user’s life - the way in which it is useful to
them.
Testing the role of an idea
![Page 26: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/26.jpg)
How should it look and feel? Prototypes in the this corner allow us explore what the user will look at, feel and hear
while using the product in device
Testing the look and feel
![Page 27: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/27.jpg)
This is about the techniques and components through which an idea performs its function—the “nuts and bolts”
of how it actually works.
Testing the implementation
![Page 28: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/28.jpg)
Select the right fidelity
COLIN PRESTON
![Page 29: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/29.jpg)
During the development of ideas we want feedback from
users to be focused on the idea and not the look and feel or a fancy interaction.
![Page 30: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/30.jpg)
Choose the right fidelity level depending on the feedback you
need Low fidelity = Better constructive feedback on details
High fidelity = Feedback can focus on the visual look and feel
![Page 31: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/31.jpg)
Example design problem
COLIN PRESTON
![Page 32: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/32.jpg)
Problem50% of customers new to running
fail to meet their personal fitness goals.
![Page 33: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/33.jpg)
ChallengeHow might we use technology to support
our customers in their fitness goals?
![Page 34: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/34.jpg)
Using prototypes to help generate audience insights
COLIN PRESTON
![Page 35: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/35.jpg)
We can observe users engaging with prototypes in
the real environments
![Page 36: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/36.jpg)
Insights of how runners use a mobile whilst running can fuel ideas in the
design phase
![Page 37: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/37.jpg)
1. Runners can’t work simple controls on an app whilst running
2. Runners find it hard to look at maps whilst running when following new routes
Example observed insights might be
![Page 38: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/38.jpg)
Prototypes to help generate and visualise ideas
COLIN PRESTON
![Page 39: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/39.jpg)
Experience Storyboarding
COLIN PRESTON
![Page 40: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/40.jpg)
Having thought of an initial idea we can use storyboarding as a method of creating a visual prototype of the
whole experience.
![Page 41: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/41.jpg)
1. Focus you to think trough the whole idea and not just a few UI screens
2. Make you think about who will use, where and how
3. Easily communicate the idea to others and gain feedback
Experience storyboarding will…
![Page 42: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/42.jpg)
![Page 43: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/43.jpg)
![Page 44: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/44.jpg)
1. What the user experience looks like2. How the service works3. What the context is4. How user interface generally works
Show in the storyboard:
![Page 45: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/45.jpg)
Role playing
COLIN PRESTON
![Page 46: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/46.jpg)
Another quick an easy way to get some tangible feedback and help the
designer to better understand the problem or idea is to act out the
storyboard or part of it.
![Page 47: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/47.jpg)
The purpose of Role play is to create enough realism to illicit a response from who
ever is acting it out.
![Page 48: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/48.jpg)
1. Help us to see how the idea might be used in context to an environment
2. Identify holes or flaws in the experience quickly
3. Observing might fuel more or better ideas4. Create enough realism to illicit a response
from who ever is acting it out
The purpose of role playing is to…
![Page 49: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/49.jpg)
Paper prototyping
COLIN PRESTON
![Page 50: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/50.jpg)
This is another quick and simple method of working through an idea
in a more visual way.
![Page 51: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/51.jpg)
1. Quickly step through the interaction points quickly
2. Identify holes or flaws in the experience quickly
3. Observe others using them and easily gain feedback
4. Focused thinking around the device interface
Paper prototyping helps you to…
![Page 52: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/52.jpg)
Prototypes to help test and improve interactions
COLIN PRESTON
![Page 53: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/53.jpg)
Sketched interactionin devices
COLIN PRESTON
![Page 54: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/54.jpg)
This is another quick and simple method of working through the
interactions of an idea
Copy write - http://www.smashingmagazine.com/
![Page 55: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/55.jpg)
1. Step through the interaction points on a device
2. Provide more environmental context3. Gain feedback on the concept4. Focused thinking around the device
interface
Clickable prototyping helps you to…
![Page 56: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/56.jpg)
These are just a few examples of how we can use
low fidelity prototyping during the design and development of idea.
![Page 57: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/57.jpg)
Quick, fast and simple
COLIN PRESTON
![Page 58: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/58.jpg)
You should be able to gain valuable feedback and insight throughout the
design thinking process from real users.
![Page 59: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/59.jpg)
Failure and prototypinggo together
COLIN PRESTON
![Page 60: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/60.jpg)
Your prototypes will fail!
Every failure is an opportunity to learn
something new about a user
![Page 61: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/61.jpg)
Create better ideas rooted in human centred design thinking
COLIN PRESTON
![Page 62: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/62.jpg)
Thank you
COLIN PRESTON
![Page 63: Prototyping Ideas](https://reader035.vdocuments.us/reader035/viewer/2022070516/58733e751a28abf21b8b61b3/html5/thumbnails/63.jpg)
1. https://iversity.org/en/my/courses/prototyping-interactionProvide more environmental context
Further resources