Build digital prototypes

Empower participants to consider usability issues by creating digital prototypes from early-stage concepts.

Preparation

10 mins

Delivery

50 mins

What is it

A digital prototype is a simple mock-up of a final product or service design. They can be built to any degree of finish – from paper prototypes that can be sketched in five minutes to clickable digital prototypes that have the look and feel of finished apps.

By visualising how users might experience the proposed interactions through digital prototypes, teams will be able to present their work to other teams for knowledge sharing and to receive feedback. This exercise will help refine concepts, guide design choices and reveal potential issues and improvements.

How to do it

1 Prepare the materials and work space

Find a clean surface (e.g. whiteboard, flipchart) to work on.
Provide pens, paper, Post-it notes and the Wireframe templates ↓ to sketch on.
If you are using the Challenge examples ↓, it would be helpful to use the corresponding Challenge wireframes ↓.

2 Brief the participants

Tell participants that they can choose between the following types of prototypes:

Paper prototypes: These can be created very quickly. In many cases, the original ideation sketches can even be used within the prototype itself. Participants can take pen to paper and draw states, dropdowns and modal windows. Designers can make instant edits as they sketch and can digitise their work at the end.
- Use POP by Marvel to digitise paper prototypes for mobile devices.
Clickable prototypes: These take more time to create as it involves digitising concepts throughout and creating interaction points. However, your designs will appear more realistic, allowing you to test interactions that are more comparable with the final product.
- Use Sketch to turn wireframes into realistic-looking designs.
- Use Mirr.io to turn designs from Sketch into working prototypes.
- Use Proto.io to produce high-fidelity prototypes for mobile devices using libraries of ready-to-use graphic and functional elements.