Prototyping

Prototyping is making an early ‘working’ model of the final product, in order to validate, test and present ideas. You can use prototyping during every part of the design phase of your project. Prototyping can have different goals, which influence the requirements of your prototype.

• As part of the design process.
• To present ideas to client and stakeholders.
• To perform a user test.
• For developer hand over.

The fidelity level of a prototype also varies. From paper prototypes to test out first ideas, to fully interactive animated prototypes for advanced user testing or developer handover. We use prototyping to understand the product we are designing in its entirety, not just as static screens. The output is a prototype that can be interacted with, on the device the product is designed for.

To know more about prototypes as deliverables, see prototypes.

How to

In general

1. Make a scenario / flow / script that you want to prototype.
2. Determine the timeframe, goal, and thus fidelity level. Choose a tool.
3. Build the prototype.
4. Test and iterate.

For emerging technologies

Where ‘regular’ (screen-based) prototyping has a wealth of tools to choose from, tools for emerging technologies are not that developed yet. Designing and prototyping for emerging technologies thus requires a bit more experiment and research.

1. Determine the timeframe and goal.
2. Read one of the UX Playbook articles if applicable. Otherwise, do your own research by scanning through Medium articles and YouTube tutorials. Usually googling ‘prototyping voice interfaces’ (or something alike) will already lead to some good starting points.
3. Decide whether to go lo-fi or hi-fi.
4. Follow the guidelines from the article (if there is one).
5. If you researched a new type of interface, please document your findings in a Playbook article (template: UX playbook template prototyping).
6. Add your name as an expert on the topic

Tips

• Prototype early and often! Make prototyping part of your design process.
• Only prototype what you need. When you are making your prototype for a usertest, only prototype what you want to test. Or when prototyping micro-animations, only prototype non-standard behaviour.
• Don’t loose yourself in building the prototype. If something does not work out, find another solution.
• Fake it when needed. Only build the facade, not the system.
• While making the prototype, constantly test it yourself. For example by having it mirrored on the device you are designing for. Or by going through the flow or viewing the transitions in slow motion.
• Did you make the prototype for a user test? Read: usability testing.

What do you need

Learn more

• Prototyping tools comparison tool