Back to methods overview

Prototyping

A prototype is an early for a product or feature, used to user feedback and test ideas.

Illustration that represents a light bulb

1. Understand

On the first we stay in the problem space, challenging our understanding of the problem.This is some text inside of a div block.

Illustration that represents some working tools

2. Ideate

On the second day we gather inspiration, ideate and sketch solutions together.

Illustration that represents a futuristic mobile interface

3. Prototype

On the third day we turn the most voted sketches into a prototype and prepare to meet the users.

Illustration that represents some bubble talks

4. Test

On the fourth and final day we test the prototype with users and round off the sprint together.

How it works

A prototype is an early for a product or feature, used to user feedback and test ideas.

A prototype is an early for a product or feature, used to user feedback and test ideas. The goal of a prototype is to enable testing of products and ideas before investing time and money into development.

The form and fidelity of the prototype should always reflect the hypothesis that you want to test with the prototype.

Prototype

2 hours - 2 days

Product Owner, Business Analyst, UX Designer, Developer, Quality assurer

Before

1. Analyse and prioritise findings from e.g. user interviews or other user feedback that can act as the foundation for your prototype. This can be done through e.g. a thematic analysis.

2. Map the optimal user journey together with your team but make sure to plan for the unexpected. A clearly defined problem and a clear user journey will make prototyping easier.

3. Ideate with your team, for instance by running a Design Studio. This is a great way to get input for a prototype.

4. Decide on fidelity. If you are looking to build a new feature and test ideas early, a lofi or midfi prototype will very likely be enough to get you feedback on the user flow and see if users are able to understand and complete the tasks. If you are redesigning an existing feature, consider creating a hifi prototype, as users already know the interface well.

5. Schedule users for usability testing early, as it can take several weeks to book tests. This gives you a clear deadline as well.

‍

During

6. Stick to the agreed upon user journey. If you realise along the way that changes need to be made, involve your team in decision making.

7. Reuse design patterns when it makes sense but don’t be limited by them. Reusing patterns and components will make the prototyping process more efficient and can make it easier for users to understand how something new works.

8. Involve your team in the process, either by co-creating the prototype or by getting feedback from them throughout the prototyping process.

9. Document design decisions. This will help the rest of the team understand why things work the way they do.

After

10. Test the prototype with users. This helps you know if you are on the right track and if you need to iterate the design before handing it over to development.

11. Analyse the findings with your team, for instance by doing a thematic analysis.

12. Iterate the prototype as needed. It is important to work with the feedback from the users. If larger changes are made, it might be good to run a second round of tests.

13. Hand over to development. Make sure you hand over clear design specifications and test documentation to the development team and be available for any questions.

Tips

Turn reusable UI elements into components, as it will make the prototyping process more efficient.
Document and continuously review design patterns to see where it makes sense to reuse them. Having design patterns documented helps the team understand and contribute to the prototyping process.
Learn continuously. Prototyping tools change all the time, take some time to look at tutorials and stay up to date on your prototyping tool.

Learn more

Prototypes: Low fidelity vs. High fidelity - Nielsen Norman Group (article)
Paper prototyping 101 - Nielsen Norman Group (video)
Pencils vs. Pixels for UI prototyping and sketching - Nielsen Norman Group (video)
Get started with Balsamiq - Balsamiq (YouTube playlist)
Figma for beginners - Figma (YouTube playlist)

This is some text inside of a div block.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

No items found.

Before

1. Analyse and prioritise findings from e.g. user interviews or other user feedback that can act as the foundation for your prototype. This can be done through e.g. a thematic analysis.

2. Map the optimal user journey together with your team but make sure to plan for the unexpected. A clearly defined problem and a clear user journey will make prototyping easier.

3. Ideate with your team, for instance by running a Design Studio. This is a great way to get input for a prototype.

5. Schedule users for usability testing early, as it can take several weeks to book tests. This gives you a clear deadline as well.

‍

During

6. Stick to the agreed upon user journey. If you realise along the way that changes need to be made, involve your team in decision making.

8. Involve your team in the process, either by co-creating the prototype or by getting feedback from them throughout the prototyping process.

9. Document design decisions. This will help the rest of the team understand why things work the way they do.

After

10. Test the prototype with users. This helps you know if you are on the right track and if you need to iterate the design before handing it over to development.

11. Analyse the findings with your team, for instance by doing a thematic analysis.

12. Iterate the prototype as needed. It is important to work with the feedback from the users. If larger changes are made, it might be good to run a second round of tests.

13. Hand over to development. Make sure you hand over clear design specifications and test documentation to the development team and be available for any questions.

Tips

Turn reusable UI elements into components, as it will make the prototyping process more efficient.
Document and continuously review design patterns to see where it makes sense to reuse them. Having design patterns documented helps the team understand and contribute to the prototyping process.
Learn continuously. Prototyping tools change all the time, take some time to look at tutorials and stay up to date on your prototyping tool.

Learn more

Prototypes: Low fidelity vs. High fidelity - Nielsen Norman Group (article)
Paper prototyping 101 - Nielsen Norman Group (video)
Pencils vs. Pixels for UI prototyping and sketching - Nielsen Norman Group (video)
Get started with Balsamiq - Balsamiq (YouTube playlist)
Figma for beginners - Figma (YouTube playlist)

Templates

Ultimately, the choice of design tool depends on the specific needs of the designer and the project at hand. Each tool has its strengths and weaknesses, and designers must consider factors such as cost, ease of use, and collaboration features when selecting the best tool for their needs.

Design Sprint 2.0 board

Follow this day-by-day exercise schedule for a meaningful and efficient Design Sprint.

Design Sprint Plan

Usability test script

Score card

Design Sprint 2.0 board

Usability testing tips and tricks

Video intro

Tool recommendations

Below you will find some tool recommendations, but please note that you are free to choose whatever tool you prefer. For some tools we have group wide licenses, in which case access can be requested via licenses@visma.com. Remember that you always need cost approval from your immediate manager.