This document discusses the benefits of prototyping for developing digital experiences. Prototyping helps reduce costs and time, validate ideas quickly, and design products that are desirable, viable, and technically feasible. The type of prototype should match the goal, such as using conceptual prototypes for developing ideas and technical prototypes for testing features. Low-fidelity prototypes provide better feedback on ideas, while high-fidelity prototypes receive comments on visuals. Storyboarding, role-playing, and paper or interactive clickable prototypes are methods discussed for testing different stages of the design process. Failure is part of prototyping, as each failure provides an opportunity to improve designs based on user feedback.

1. Prototyping ideas
Create better digital experiences

2. Colin Preston
Lead Creative & Experience Designer

3. Benefits of prototyping

4. Prototyping helps us to…
COLIN PRESTON

5. Reduce waste and cost

6. Reduces time & effort during the
implementation phase of a project

7. Validate ideas quickly

8. Validate ideas quickly

9. Design and create products,
services or “Experiences” that are
desirable to people, viable for a
business & technically feasible .
Ultimately prototyping helps to…

10. However…
COLIN PRESTON

11. Don’t waste your time and money
producing the wrong method of
prototype, for the wrong reason!

12. Prototype for the
right reason

13. Understand the reason
for your prototype
COLIN PRESTON

14. The reason we prototype can
generally fall into three categories
during the design process

15. Design and developing
an idea
Conceptual prototypes

16. 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

17. Validate ideas quicklyTest and improving
and idea
Technical prototypes

18. 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

19. Validate ideas quicklyCommunicating
an idea
Vision prototypes

20. Vision prototypes like clickable jpg's
allow us to sell an idea externally
and gain feedback on look and feel

21. Picking a method

22. Understanding what method
to chose when prototyping
COLIN PRESTON

23. The method of prototype should
be driven by what you are
testing and the feedback you
want.

25. 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

26. 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

27. 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

28. Select the right fidelity
COLIN PRESTON

29. 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.

30. 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

31. Example design problem
COLIN PRESTON

32. Problem
50% of customers new to running
fail to meet their personal fitness goals.

33. Challenge
How might we use technology to support
our customers in their fitness goals?

34. Using prototypes to help
generate audience insights
COLIN PRESTON

35. We can observe users engaging
with prototypes in the real
environments

36. Insights of how runners use a mobile
whilst running can fuel ideas in the
design phase

37. 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

38. Prototypes to help generate and
visualise ideas
COLIN PRESTON

39. Experience Storyboarding
COLIN PRESTON

40. Having thought of an initial idea we
can use storyboarding as a method
of creating a visual prototype of the
whole experience.

41. 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…

44. 1. What the user experience looks like
2. How the service works
3. What the context is
4. How user interface generally works
Show in the storyboard:

45. Role playing
COLIN PRESTON

46. 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.

47. The purpose of Role play is to
create enough realism to illicit a
response from who ever is acting
it out.

48. 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 ideas
4. Create enough realism to illicit a response from
who ever is acting it out
The purpose of role playing is to…

49. Paper prototyping
COLIN PRESTON

50. This is another quick and simple
method of working through an idea
in a more visual way.

51. 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…

52. Prototypes to help test and
improve interactions
COLIN PRESTON

53. Sketched interaction
in devices
COLIN PRESTON

54. This is another quick and simple
method of working through the
interactions of an idea
Copy write - http://www.smashingmagazine.com/

55. 1. Step through the interaction points on a device
2. Provide more environmental context
3. Gain feedback on the concept
4. Focused thinking around the device interface
Clickable prototyping helps you to…

56. These are just a few examples of
how we can use low fidelity
prototyping during the design and
development of idea.

57. Quick, fast and simple
COLIN PRESTON

58. You should be able to gain valuable
feedback and insight throughout the
design thinking process from real
users.

59. Failure and prototyping
go together
COLIN PRESTON

60. Your prototypes will fail!
Every failure is an opportunity to
learn something new about a
user

61. Create better ideas rooted in
human centred design thinking
COLIN PRESTON

62. Thank you
COLIN PRESTON

63. 1. https://iversity.org/en/my/courses/prototyping-interactionProvide more environmental
context
Further resources