5 Learnings from Digital Prototyping

In a social and professional context, we unconsciously make assumptions about what others want and need. “I know what’s good for you” – we say, making a classic mental shortcut that leads to inefficient outcomes and products that nobody really needs. Assumptions are everywhere. What we need to do is be aware of them and remember: you only assume, until you test and validate!

In digital product design, the prototyping process is a systematic approach to verify or falsify assumptions about user needs which have previously been identified. The prototypes give a first idea of how the product will “look and feel” like and, in some cases, already incorporate some final design aspects you want to test for. Once the prototype has been created, you let your users interact with it and collect their feedback, to feed it into the next step of your product development cycle. 

When creating digital prototypes, there are many potential hurdles and pitfalls one can tap into. However, fear not – we have been through that and are happy to share some (painful but important!) learnings we gathered along the way: 

Before you start prototyping, identify the assumptions you want to test and match them with the design of your digital prototype. Let’s imagine you want to develop a cookbook app, where amateur chefs around the world can add recipes, search for dishes and rate them. If you assume that your users will easily know how to add a new recipe to your app – design your prototype in a way that you can actually test how they would add a new recipe and validate if they are successfully doing so. It would be a painful lesson to only find out at the end that nobody has a clue where to add a new recipe within the app.

Before you get started, you have to decide on the right level of fidelity of your prototype. Fidelity? What’s that again?! Simply speaking, fidelity refers to the level of details and functionality represented in a prototype.

Low-fidelity prototypes like paper sketches or wireframes are simple visual representations of the final product. Creating them takes little time, and they can be helpful in the process of brainstorming and developing first ideas to receive direct feedback from your colleagues or customers. High-fidelity prototypes on the other hand are designed to look and feel much like the final product, including details about features (e.g. button colours, font sizes) and interactions in your website or app. They are much more time-consuming to develop, but allow for a more in-depth feedback loop when discussing them with potential users.

In general, try to move incrementally to a higher level of fidelity. Start simple and only create as much as necessary to test the relevant aspects of your product with the prototype in order to not waste your time resources.

Before you jump into the design of your digital prototype, you start off with a storyboard. A storyboard is an illustrated, step-by-step sketch that explores the user’s experience with a product. It helps you to understand how your target users will interact and perform tasks with your digital product over time, and whether it adds value for them. If your product doesn’t add value for anyone, there’s no need for developing it, right?

So the storyboarding technique helps you take the right directions and identify lots of assumptions in the beginning. It’s often just a simple paper drawing without any product details. Make sure to discuss the storyboard in-depth with your clients or colleagues to clarify as much as possible upfront. It leaves less room for your own interpretation and saves much time later.

When creating a digital prototype, we are tempted to get lost in details and lose lots of valuable time for features that are not essential. To avoid this, try to focus on the 3-4 most important user journeys.

For example, skip the login screen or the settings section when prototyping the first version of your app. They are not essential to test the relevant user behaviour, and you can still integrate them at a later stage. Coming back to the example of the cookbook app, you would start with the 3 most important user journeys – for example:

1. Adding a new recipe to the cookbook app 
2. Searching for a specific dish in the catalogue that can be filtered by categories (e.g. “vegetarian food”)
3. Rating a dish from another user and adding comments to it

The digital prototype then helps you to validate whether your assumptions of a certain user behaviour are true and if your product design is a good fit to help the user fulfil the tasks they want to perform.

Developing a high-fidelity digital prototype in a classic 5-day design sprint is an ambitious goal and even experienced UX/UI designers often struggle with time management in such sprints. So make sure to regularly keep track of your progress and prioritise things. Don’t be a perfectionist – good enough is good enough!

Finally, make sure to use existing 3rd party services: have a look online for existing templates, building blocks, inspirations or tutorial videos. The design community (e.g. in Figma) is huge and shares a lot of knowledge for free. Following all these steps helps you to avoid doing long shifts the night before your submission – believe us – we’ve been there 🙂

This is an example of a digital prototype for a B2C sustainability app that was created within a design sprint by Pioneers’ Digital Product Designer Erik.

So to sum things up, digital prototyping is a very powerful technique to deep-dive into user needs and verify assumptions that are crucial for the design of your app or website. You’ll gather a lot of insights in a relatively short time period to then develop a final product with the exact attributes your users are looking for.