Learn / Blog / Article

Back to blog

How to test your website prototype: steps, tips, and tools

Your team has been working hard on a brand-new website, and you’re ready to hit ‘publish’. Or, at least, you think you are. How can you be confident your site is up to scratch when nobody’s even seen it yet?

Creating a website prototype gives you an outside perspective from real people—and the opportunity to fix issues before you go live.

Last updated

4 Jul 2023

Reading time

9 min

Share

The challenge with prototypes is that unbiased feedback also uncovers unexpected problems. So when it comes to testing your prototype, you need to take a structured approach that leaves you with clear, actionable insights. This article explores how to do it—so let’s dive right in!

  1. How can I test my website prototype?

  2. How does Hotjar help with prototype testing?

  3. What are the benefits of website prototype testing?

Find out what users think of your website

Hotjar lets you observe how users behave on your website, then helps you get their feedback with automated surveys and interviews.

How can I test my website prototype?

An excellent website is carefully created with user needs in mind. To achieve this, UX designers typically take an iterative approach, building in stages rather than jumping to the end product. 

A website prototype ensures the finished website meets project goals by uncovering areas for improvement early in the process and providing plenty of time to incorporate stakeholder and user feedback with each iteration. 

Here’s how to test your prototype and ensure your site meets the highest possible standards from the get-go.

1. Get clear on what insights you need

At each phase of the design process, it’s important to have clear goals for your prototype testing. You can’t test for everything in one go, so agree on a specific question you need answered for each test.

Try to avoid overly general questions, such as, "Is our website engaging?" or "Does our drop-down menu work?"

Instead, get specific:

  • Can first-time visitors easily navigate to our product pages?

  • How quickly can users find our support pages from the drop-down menu?

  • Can users add a product to the shopping cart without extra guidance?

In the next phases, these goals will determine what kind of prototypes you create, what you ask of test participants, and what data you gather.

2. Create the right prototype for your goals

There are three main ‘levels’ of prototypes you can build to get feedback from your users. 

Low-fidelity prototypes are visual mock-ups of your website idea. They can be simple hand-drawn sketches or computer-designed wireframes showing more detail.

Low-fidelity UI prototyping is helpful when you want to test:

  • Your site's information architecture hierarchy

  • Page layout

  • Participants’ initial impressions of how they would navigate the website 

Simple testing helps you understand if these design aspects make sense to users. You can also test multiple designs to compare how participants react to them.

#This low-fidelity prototype shows how a website might look on mobile
This low-fidelity prototype shows how a website might look on mobile

High-fidelity prototypes are full-color, interactive designs. They’re still essentially images, but look like a real website and may contain clickable links that allow users to ‘browse’ the prototype.

They’re helpful when you want feedback on:

  • General design direction

  • Page structure and information architecture (again)

  • Links and buttons

  • Website copy and text readability

  • Graphics and visual elements

  • Ease of navigation

#This high-fidelity prototype shows how the finished website would look on mobile
This high-fidelity prototype shows how the finished website would look on mobile

Native prototypes are coded websites with basic functionality. While they might not have all the features of the planned website yet, these advanced prototypes process data and give users a realistic experience.

Native prototypes are useful near the end of the visual design process, when you’ve already validated early iterations and are preparing to start development.

They’re helpful for:

  • Testing UI components (like menus, pop-ups, and drop-downs)

  • Determining how live data might affect the user experience

  • Website usability testing

3. Choose the right type of prototype test for your goals

Most of the time, you’ll want participants to complete specific tasks depending on the goals you outlined in step one. 

For example:

  • You want to find out if users can navigate to a key product page from your homepage. In this case, perform a first-click test with a low-fidelity prototype. Simply ask users to navigate to a specific area on your site, then observe what they click on first.

  • You want to know if your pricing table makes sense to users. In this case, show users a low-fidelity wireframe and assign a task that involves reading pricing information. After the test, interview them to get their feedback about the table. 

  • You want to know if users find your drop-down menu bar intuitive. In this case, use a clickable high-fidelity or native prototype and ask users to navigate to a page linked in the drop-down menu.

💡 Pro tip: you’ll often find it helpful to get direct feedback from users, either by asking them usability testing questions or getting them to ‘think out loud’ during tests. By observing and listening to users, you can understand both how they behave in prototype tests and why they behave this way.

There are a few more options to consider when choosing your prototype test—let’s check them out.

Moderated vs. unmoderated usability testing

Moderated testing is where a team member is present to give the user guidance or ask them questions. It’s suitable when you need in-depth insights into the reason behind user preferences and behaviors.

Unmoderated testing involves giving the user instructions and leaving them to interact with the prototype without external guidance (while being recorded). You can follow up by interviewing the user after the test—but during the test itself, the user is alone.

In general, unmoderated testing is appropriate when you want to test a very specific question or observe and measure behavior patterns.

In-person testing vs. remote testing

With modern usability testing tools, carrying out tests remotely is incredibly convenient. And with no need for travel or a testing facility, remote testing is significantly more cost-effective than in-person testing.

However, there are still some advantages of in-person testing. For one, many researchers consider the ability to read body language and facial expressions essential for conducting interviews.

What’s more, with in-person interviews comes less concern about sensitive data being leaked. (Plus, researchers don’t have to worry about the participant having IT problems.)

Quantitative vs. qualitative testing

Prototype testing often focuses on gathering qualitative data, such as:

  • User descriptions of how they perceive the prototype

  • Researchers’ observations as participants navigate a prototype or complete tasks in it 

💡Pro tip: observe your participants with Hotjar Recordings. Recordings lets you watch a video-like replay of individual journeys participants take through your prototype. You’ll see every click, scroll, and mouse movement (or, on mobile, every tap, pinch, and scroll) for a fuller understanding of user behavior.

Depending on your goals, it can make sense to gather quantitative data too. This is particularly appropriate if you’re performing large-scale prototype or beta testing.

In this case, quantitative data could include:

  • User journey completion rates

  • Clicks recorded by heatmap tools

  • Results from concept tests, where users are asked to select which of two variants they prefer

  • Results from first-click tests, where a tool records the first place users click after receiving a prompt like, "Where would you click to buy this product?"

🔥 If you’re using Hotjar

Want to find out which of two design variants your users prefer? Use the concept testing template in Hotjar Surveys to get quick feedback on logos, headlines, graphics, and more.

4. Invite the right participants

The participants you recruit will depend on your goals and the stage of development you’re at. 

  • For early testing with low-fidelity prototypes, testing with colleagues or friends—i.e. people not from your target audience—is usually sufficient 

  • For later-stage testing with high-fidelity prototypes, it makes more sense to run tests with participants from your target audience

This is because, in the early stages, you’re more concerned with understanding if the basic structure and your app is intuitive. In later stages, you’re usually testing how well the app meets your audience’s specific needs.

🔥 If you’re using Hotjar

Recruit participants for prototype testing by using pop-up surveys on your website. Use our ready-made survey template to present willing participants with a link to your prototype.

#Recruit prototype testing participants in minutes with Hotjar’s ready-made template
Recruit prototype testing participants in minutes with Hotjar’s ready-made template

5. Run and record your tests

You’ll need to analyze your data later to find insights, so make sure you’re set up for success:

  • Give clear instructions with helpful context. Ask users to imagine themselves in a relevant scenario, for example: "You’re looking for a last-minute birthday gift for a relative. Your task is to add a printed hoodie to your shopping cart, go to the checkout, and select the express shipping option."

  • Invite open criticism. When asking for feedback, make it clear there are no wrong answers and that you’re open to criticism.

  • Record your testing sessions. Video replays of usability test sessions help you analyze usability tests to see the fine details of where users struggle.

💡Pro tip: find participants faster with Hotjar.

Hotjar’s user research tool, Engage, helps you host, record, and analyze remote user interviews. Get automated transcriptions of each interview and easily share time-stamped notes with colleagues.

What’s more, Engage gives you access to a pool of over 175,000 verified participants to make recruiting testers super simple.

6. Share your findings and implement changes

Identify trends in user behavior and feedback. Make notes of any interesting feedback users gave you, paying particular attention to comments or themes that came up repeatedly.

If you conducted tests using interactive prototypes, rewatch your test recordings and pay close attention to areas where users got lost, confused, or distracted. 

(Need help? 👉 Read our guide to usability testing analysis to learn more about interpreting your test data.)

Share your findings in a report. Give your colleagues a summary of your research, results, and proposals for moving forward. Include enough detail so they clearly see the reasons behind your recommendations.

Include links to key data. It’s easier to get buy-in when colleagues can see important data themselves—like interview clips of users explaining where they struggled, or recordings of test sessions that show users encountering website bugs.

🔥 If you’re using Hotjar

When observing session recordings of user journeys, use the Highlights feature in Hotjar to clip the most interesting part of a recording, label it as a success, frustration, or bug, and tag your teammates to take a look for themselves.

#Create a highlight in Hotjar to collaborate with your team
Create a highlight in Hotjar to collaborate with your team

How does Hotjar help with prototype testing?

A behavior analytics platform like Hotjar is just what you need to take your prototype testing to the next level and get user-centric insights that matter. Find out how below.

📹 See how test participants browse your prototypes with Recordings

One of the best ways to find areas for improvement is to watch users navigating your prototype. With an over-the-shoulder view of their journeys, you see where they struggle, what grabs their interest, and why they get lost.

Simply install Hotjar on your website to start recording user journeys. You can use it on functional website prototypes or on low-fidelity mock-ups (as long as they’re hosted on your site).

#Recordings show every scroll, mouse movement, and click
Recordings show every scroll, mouse movement, and click

Prototype testing often helps us identify discrepancies between how users claim they interact with a product and how they actually use it. For instance, users may request more options, but testing reveals that having too many choices might lead to frustration and confusion. Early testing is, therefore, highly beneficial, and observing users behavior through heatmaps or session recordings can uncover many hidden opportunities to accelerate customer value.

Rebecca Lindstrom
UX Designer, McKinsey & Company

🔥 Get an aggregated view of what users click on and engage with Heatmaps

Seeing where users click, scroll, or move uncovers important patterns in behavior. For example, you’ll find out whether they try to navigate through menu items, or via your search bar.

What’s more, it reveals instances of users trying to click non-clickable items—something that can easily cause frustration.

Simply set up Hotjar Heatmaps to see an aggregated view of where all users clicked across your tests. This is ideal when you’re doing extensive testing with more than 10 users.

💡Pro tip: get faster insights with engagement zones in Hotjar Heatmaps.

Most heatmap tools show separate heatmaps for clicks, scrolls, and mouse movements. Hotjar’s engagement zones combine all three to reveal areas users interact with most—while shortening your analysis time.

Engagement zones reveal the most engaging parts of the page

🎤 Learn more from your users with Interviews

User interviews can be the most insightful part of your prototype testing. However, organizing interviews is a time commitment—not to mention the fiddly admin of recording calls and sharing files.

Hotjar Engage allows you to automate these processes, from recruiting candidates to hosting, recording, and transcribing calls. Its advanced playback features make it easy to analyze calls and share notes with colleagues, so you can act on your learnings.

#Conduct user interviews in Engage for easy prototype testing
Conduct user interviews in Engage for easy prototype testing

What are the benefits of website prototype testing?

While the benefits may vary according to your development stage, prototype testing improves your overall development process in several ways. Here are six of them:

To build a better website, join the dots between user actions and sentiments

When you’re creating an important website, you can’t afford to rely on assumptions about how users will respond. Prototype testing gives you vital feedback from real people, so you can ensure the finished product meets user needs.

But evaluating your prototype isn’t solely about listening to what users say—it’s about learning from what they do, too. Accordingly, plan your testing to include a combination of interviews and observation, so you can understand what users are doing and why. 

With this deeper sense of empathy, you’ll be equipped to create a website that truly delights them.

Everything you need to optimize websites

With surveys, heatmaps, recordings, funnel analysis and more, Hotjar delivers the insights you need to create better websites.

Prototype testing FAQs