Prototyping ideasCreate better digital experiences

Colin PrestonLead Creative & Experience Designer

Benefits of prototyping

Prototyping helps us to…

COLIN PRESTON

Reduce waste and cost

Reduces time & effort during the implementation phase of a project

Validate ideas quickly

Validate ideas quickly

Design and create products, services or “Experiences” that are desirable to people, viable

for a business & technically feasible .

Ultimately prototyping helps to…

However…

COLIN PRESTON

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

wrong reason!

Prototype for theright reason

Understand the reasonfor your prototype

COLIN PRESTON

The reason we prototype can generally fall into three

categories during the design process

Design and developingan idea

Conceptual prototypes

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

Validate ideas quicklyTest and improvingand idea

Technical prototypes

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

Validate ideas quicklyCommunicatingan idea

Vision prototypes

Vision prototypes like clickable jpg's allow us to sell an idea externally

and gain feedback on look and feel

Picking a method

Understanding what methodto chose when prototyping

COLIN PRESTON

The method of prototype should

be driven by what you are testing and the feedback

you want.

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

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

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

Select the right fidelity

COLIN PRESTON

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.

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

Example design problem

COLIN PRESTON

Problem50% of customers new to running

fail to meet their personal fitness goals.

ChallengeHow might we use technology to support

our customers in their fitness goals?

Using prototypes to help generate audience insights

COLIN PRESTON

We can observe users engaging with prototypes in

the real environments

Insights of how runners use a mobile whilst running can fuel ideas in the

design phase

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

Prototypes to help generate and visualise ideas

COLIN PRESTON

Experience Storyboarding

COLIN PRESTON

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

whole experience.

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…

1. What the user experience looks like2. How the service works3. What the context is4. How user interface generally works

Show in the storyboard:

Role playing

COLIN PRESTON

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.

The purpose of Role play is to create enough realism to illicit a response from who

ever is acting it out.

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…

Paper prototyping

COLIN PRESTON

This is another quick and simple method of working through an idea

in a more visual way.

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…

Prototypes to help test and improve interactions

COLIN PRESTON

Sketched interactionin devices

COLIN PRESTON

This is another quick and simple method of working through the

interactions of an idea

Copy write - http://www.smashingmagazine.com/

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…

These are just a few examples of how we can use

low fidelity prototyping during the design and development of idea.

Quick, fast and simple

COLIN PRESTON

You should be able to gain valuable feedback and insight throughout the

design thinking process from real users.

Failure and prototypinggo together

COLIN PRESTON

Your prototypes will fail!

Every failure is an opportunity to learn

something new about a user

Create better ideas rooted in human centred design thinking

COLIN PRESTON

Thank you

COLIN PRESTON

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

Further resources