How to use prototypes in UX design

Man with a cool cap and glasses holding a phone

As an entrepreneur, you know the feeling of coming up with a new idea. Whether you took a more traditional approach using user research to generate new ideas or just came up with a new idea while you were on your evening walk, it's a very exciting moment! Yet, as Jeff Bezos once said, ideas are the easy part and execution is everything (and definitely the hardest part).

Prototypes can be your means of bringing ideas to life. Prototypes are a way of creating an early version or a “draft” of your idea that can transform it from a theoretical concept to a tangible object. Prototypes can be functional to a certain degree, and they can help you validate your ideas with potential users. Common types of prototypes can be low-fidelity prototypes and high-fidelity prototypes.

In the context of most digital products, low-fidelity prototypes are usually wireframes that mimic the appearance of an application or a website’s interface. High-fidelity prototypes go a step above and they would usually contain interactions (simple or more complex). Such interactions can be navigation menus, links, buttons, and more.  They can help you mimic a functioning digital product where you can navigate between pages and different parts.

There are many tools where you can build prototypes, among them Figma, ProtoPie, Axure, and Framer.

Why should you prototype?

1 - Get the conversation started

A prototype can be a great starting point for a conversation when you discuss your idea with your team members, developers, or investors. Letting them test a prototype is much more effective than you just explaining the idea. We all know that an image is worth a thousand words, and in the digital innovation world, a prototype can save you at least five useless meetings where you only talk about things in theory. In addition, it can help you get buy-in for your ideas faster.

2 - Get feedback from real users

Apart from being a great tool to get feedback from your stakeholders about your ideas, prototypes let you test your ideas with real users too. Depending on what elements of your idea you want to test, you can plan usability tests, first-click tests and many other tests to validate the usability and the desirability of your ideas with real users. These tests can give you very valuable feedback that will inform your development direction down the line.

3 - Speed up your development and save money

Doing user research on prototypes can reduce your development time by 33%-50%. No need to mention that it will save you money too. Bear this in mind if you want to be quick in getting to market with your ideas.

4 - Get more clarity on your idea

Prototyping is a lot like writing in that you start with an idea, and the act of writing/prototyping changes the fundamental idea as you go along. In the end, you usually have a slightly (or completely) different idea than what you had imagined when you started. Prototyping can help refine your vision and make you understand what your idea really is and how it can be improved.

5 - Reduce the risk of failure

Innovation is a risky business. Prototyping and testing allow you to significantly reduce this risk compared to a process where you build a fully functioning product and launch it just to realize that you wasted a lot of resources on an unsuccessful idea.

How do you get started?

Step 1 - Define Questions

Before creating an actual prototype, the first step would be defining what questions your prototype needs to answer.

Types of questions can range from “I just want to get a sense of what the product looks like and what’s the first impression people have when they see it” to “Can users actually understand how to use it?”. Once you determine this part, it will be easy for you to decide which approach to take and which questions to ask. Bear in mind that the questions need to match the place where you are in your development.

General questions about users' impressions and thoughts are more adequate for the initial stage of the development. Specific questions about actual interactions (e.g. sign-in, filling forms, checking-out) are more adequate for advanced stages.

Step 2 - Build Your Prototype

As mentioned before, where you are in your development is what’s going to dictate the type of prototype you’ll need to build to get the feedback you need.  

Early stages - In the initial stage of your development, you might want to build a low-fidelity prototype. This will allow you to ask questions that are more related to the impression users have when they see your product for the first time. Building a simple low-fidelity prototype in a tool such as Figma, Affinity Designer, or Vectornator could take around 30-60 minutes. You should aim to create 2-3 versions for your users or stakeholders to compare and give feedback.

Advanced stages - Once you refine your idea and you are almost ready to start developing a digital product, you can create a high-fidelity prototype and create usability tests to test your design. In this stage, it is also recommended to create 2 versions and do a classic A/B test with two groups to grasp what makes more sense for users.

These prototypes could take slightly longer to build, depending on the amount of interactivity you want to embed in them. Tools such as Figma, and Marvel are better suited for this task.

Bear in mind that developing very detailed prototypes is time-consuming and doesn’t allow you to focus your efforts on the most important interactions.

Ideally, you would want to test user flows that are not too long for two reasons: 1. Not to tire out your test participants (aim for up to 60 minutes per participant, 30 minutes would be even better) and 2. To focus on 2-3 key interactions that can significantly improve your product. For this reason, when you develop a high-fidelity prototype, what you need to determine is the scope of what you need to test. Sometimes, it’s better to create 2-3 prototypes to test different interactions and scenarios rather than building a very complex prototype that contains everything.

Step 3 - Test Your Prototype

Many tools can help you perform tests on prototypes, including Maze, UserZoom, and Loop11.
The type of user research you’ll do with your prototypes will depend, once again, on where you are in your development.

Early stages

In these stages you’d normally test your prototype around your users general impression about your design and less about specific interactions (that comes in later stages).

For instance, if you are a fintech startup that wants to understand if your loan application page makes your users feel confident enough to apply for a loan and if they understand its main functions, you can build a low-fidelity prototype and create a test around it. A good method to test it is the five-second test where users see the prototype for five seconds and are then asked a bunch of questions. The questions could be along these lines:

  1. Who do you think is the main audience for this product?
  2. What do you think are the main services available on it?
  3. From 1-5, how confident would you feel to use it to apply for a loan? (1 - not at all , 5 - very confident)

Advanced stages

When your development advances and your ideas are a bit more refined, you can test specific interactions with your prototype using usability tests.

For instance, if you are an e-commerce startup, you can build a couple of interactive prototypes that mimic part of an online shopping experience.

This will allow you to test interactions such as adding products to a shopping cart or to a wishlist and see where users have difficulties completing these tasks and why. The focus is on adding items to the shopping cart and wishlist, rather than on all possible pages where you can navigate from there. The interactions you need to test should define your scope when you develop your interactive prototype. Also, if you’re debating between two solutions you can  develop a couple of prototypes to mimic the same interaction so you can A/B test them with different groups of users.

Pitfalls to avoid

Prototyping doesn’t come without potential pitfalls. Here are the main ones and the way to avoid them:

  1. Thinking that you’re wasting time - If anything, prototyping will save you precious development time and money later down the line, and will speed up your collaboration process with your stakeholders.
  2. Falling in love with your first idea - Remember that prototypes are like raw materials that need some refinement before you can call them “final products”. To get the best results, you’ll have to go through a few iterations of prototyping up until achieving your optimal result.
  3. Prototyping without a clear purpose - If you want to optimize the ROI on your prototyping efforts, don’t just start prototyping to see where the process takes you. Instead, define the questions that need answers, and then decide which level of prototype you need to create to answer them.
  4. Feeling discouraged by failed prototypes - One of the reasons why you create prototypes is to test them. Some of them will not work, but that means that you’ve learned something new and that you’re in a better place to create a better idea. When it comes to prototyping you should look at the process as learning rather than seeing it “success or failure”.

To sum up, prototyping is a process that could help you speed up your innovation processes by bringing ideas to life and testing them with real users. Prototypes can help you get buy-in from your stakeholders for your ideas, reduce your development time, save money, and reduce risks.

If you need help in creating prototypes and testing them, our agency can help do it the right way based on our past experience.  

Get in touch

Need help with
prototyping?
Get in touch