UX Prototyping: Your Complete Guide

You’re working on a website redesign and want to refine the site’s user experience. What’s your next step once you have some ideas you want to play around with? UX prototyping. Through my conversations with designers intimately familiar with UX prototyping, I’ve discovered that it can save you invaluable time and money. The best part is that you don’t have to have any fancy tools to get started. (Though you certainly can use them if you choose!)

I chatted with Lindsay Derby, a Design Lead at HubSpot, to learn more about how she has used UX prototyping to take products to the next level. Buckle up: Derby has a lot of excellent tips to share with you about how to harness the power of UX prototyping effectively. 

What is a UX prototype? 

A prototype is a simulation of a product you are creating, which means a UX prototype is a simulation of a product’s user experience. When you create a UX prototype, you’re specifically concerned with the experience users have with the product. Because of this, you may be iterating on the placement of your menu or other navigational elements or your calls to action (CTAs), to name a few features designers typically work on with UX prototypes. 

Low-fidelity vs High-fidelity UX Prototypes 

Not all UX prototypes are created equally. Typically, product teams categorize a prototype as low or high-fidelity. Neither is better or worse, objectively — they’re just different. (However, some designers may have a preference for low or high-fidelity prototypes, and that’s valid, too.) 

A low-fidelity prototype is a quick diagram design teams use to work through early-stage ideas. Due to this, you’ll often see low-fidelity UX prototypes completed on pen and paper. It’s not very complex. The point of working with a low-fidelity UX prototype is to get your concepts down on pen and paper and then ultimately determine any gaps or refine an idea that has a lot of momentum.

Derby shares that, generally, she prefers this type of prototype. “[I prefer low-fidelity prototypes] that have just enough detail for stakeholders to understand the design direction without getting lost in details like copy and specific images,” she says. “The last thing I want in the prototype phase is feedback on colors. I want focused feedback on interactions and concepts to identify usability issues. That said, high fidelity prototypes have their place, especially when showing designs to actual customers who may need more details and context to understand a design.”

On the contrary, a high-fidelity UX prototype is more complex. Designers usually build high-fidelity prototypes with the assistance of software, such as Figma. Because of this, a high-fidelity prototype typically comes later in the design process than a low-fidelity one. For example, you can start with a low-fidelity UX prototype to determine the best homepage navigation for your site, and then, once you’ve discarded ideas that are a definite no, can move onto a high-fidelity prototype to continue to refine. 

According to Derby, “There are many ways to do UX prototypes. You can get as basic as using paper prototypes and doing field testing with users or hallway testing with coworkers to test out sketches. These are hand-drawn representations of a user interface used in the early stages of design. You can move up in fidelity as needed and get all the way to functional prototypes, incorporating actual interactions and complex features into the designs. These often use design software like Figma.” 

Free UX Research Kit + Templates

3 templates for conducting user tests, summarizing your UX research, and presenting your findings.

• User Testing Template
• UX Research Testing Report Template
• UX Research Presentation Template

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

Why is UX prototyping beneficial?

According to Derby, there are a myriad of reasons why UX prototyping is a can’t-skip step. “UX prototypes can be a huge time-saver in the overall product development timeline,” she shares. “It is critically important to test design decisions at the UX prototype phase because it is much easier and more efficient to iterate design components in software like Figma than editing code down the road.” 

Thanks to your UX prototypes, you’ll be able to catch any potential user experience issues before they actually get written into the code. In other words, the time and money you’ll save with the help of UX prototyping is infinite. “By working out as many usability issues as possible in the prototype phase, you can save very expensive engineering hours when it comes time to build the final product,” says Derby. 

Need another reason why the UX prototyping process is a must? To quickly iterate on and test several different designs your team has in mind. “UX prototypes allow for early user testing and feedback, helping to ensure that the final product meets the needs and expectations of the target users. This goes a long way in risk mitigation as we can spot potential usability challenges before development, leading to a more refined and user-friendly end product.” Ultimately, you can’t ask your engineering team to build several completely different product versions — but you can easily create vastly different UX prototypes. Because of this, experimenting is more accessible than ever. 

Lastly, there’s an opportunity to keep the project’s key stakeholders in the loop with design decisions. “Prototypes enable the designer and other stakeholders to be more confident in design decisions and lean into a user-centered design approach,” says Derby. (Want to learn more about user-centered design? Consider this post your complete guide.)

What is the UX prototyping process? 

With all of that in mind, it makes sense if you want to get started with UX prototyping right away! Here’s the process you should follow when doing so. 

1. Gather your information. 

Your first step is to understand the user that you are creating the product for. If you don’t know what the users want or need, how are you supposed to build a product that successfully provides them with it?

To successfully gather information, you’ll want to collect user research, make user personas, and define the overall goals and objectives of the product. (Did you know that you don’t have to tackle the task of creating a user persona by yourself? HubSpot has a free tool to help, and it’s pretty amazing if I do say so myself.) 

2. Make your wireframes.

You have the information you need to create a successful UX prototype and, eventually, build a product that your users will love. Now what? 

It’s time to make low-fidelity wireframes. These basic sketches will give context to the layout of your product’s user interface. Remember: These should be vague and won’t contain much detail aside from the arrangement of essential elements. 

3. Build your UX prototypes. 

Now that you know what you want the interface of your product to look like, you can experiment with the user experience. This means it’s time for you to create your low-fidelity UX prototype. This is your chance to play around with elements such as where you’re going to place your menu. Don’t be afraid to try a lot of different designs — that’s why you’re working with pencil and paper. Once you have an idea you want to work with, you can create a high-fidelity prototype to go more in-depth. 

4. Test it and iterate. 

It’s not enough to just build a prototype and accept it as perfect — you should get feedback from your users about what they think of it. Your users will point out usability problems, or gaps. From there, iterate, and test again. Once you’ve done that, you’re ready to hand it off to your development team. 

Free UX Research Kit + Templates

3 templates for conducting user tests, summarizing your UX research, and presenting your findings.

• User Testing Template
• UX Research Testing Report Template
• UX Research Presentation Template

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

What are the best UX prototyping tools? 

Heads up: This is a trick question! The best UX prototyping tool depends on if you’re looking to create a low or high-fidelity prototype. That being said, I’ll walk you through some tools that should be on your radar for both types. 

Low-Fidelity Prototypes

As you now know, low-fidelity types tend to be hand-drawn and are typically used earlier in the design process in comparison to their high-fidelity counterparts. Because of this, all you will need to create a low-fidelity prototype is a pencil and paper. (Or, a whiteboard and marker, if that’s your team’s jam.) 

I highly encourage you to keep a sketchbook where you collect all of your low-fidelity UX prototypes. This makes it easier to find a specific sketch if you later want to reflect on why you chose to place a CTA at a certain place, or want to take a second glance at your menu usability. 

High-Fidelity Prototypes

If you are creating a high-fidelity UX prototype, here’s some great news: You don’t have to do it all by hand! Because high-fidelity prototypes tend to be more in-depth and are typically used a bit later in the design process, you will want to work with software to make yours.

Derby has two favorites that she prefers using. “I love FigJam and Figma because they work incredibly well for team collaboration and design system integration,” she says. 

With that recommendation in mind, let’s walk through each specific functionality to determine how you can make it work for you.

Figma 

Figma is a popular cloud-based web design tool that allows your team to seamlessly collaborate in real-time. Because of this, it is largely considered a designer fan-favorite. It specifically focused on user interface and user experience design projects. When working with Figma, users will love that it allows them to edit vectors, offers design system management, and even build — you guessed it — prototypes. 

FigJam

FigJam is a Figma product, as the name suggests. With the help of this tool, you can brainstorm, create diagrams, and even work through strategy all in one convenient location. Another reason FigJam is an excellent tool is that there are over 300 premade templates that you can use to help supercharge collaboration, or you can create your own. 

(Psst: Want more UX tools? Look no further.) 

Use UX prototyping to take your products to the next level.

With the help of UX prototyping, you can take your products to the next level. The most important thing is to continue to iterate and test until you — and more importantly, your users — are content with your product's experience.