Learn / Blog / Article
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 updated4 Jul 2023
Reading time9 min
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!
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
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.
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
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
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.
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.
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.
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).
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.
🔥 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.
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
UX design and analysis
Coming in hot: the power of first impressions
Consumers have more than their fair share of vendors to choose from when shopping online. When attention is split between different brands and devices, ensuring your online presence stands out from the crowd hinges on first impressions.
But catering to the ever-changing habits and preferences of digital buyers is no small feat. That’s why Hotjar surveyed hundreds of US-based consumers—to reveal the insights you need to guarantee your website exceeds user expectations.
UX design and analysis
How we use Hotjar for interaction design: 4 practical use cases
We don’t just design and build Hotjar—we’re users, too. Insights from Hotjar regularly drive our decisions, keeping customer-centricity top of mind.
This article unpacks how our product design team uses Hotjar for interaction design, a sub-discipline of user experience (UX) design.
UX design and analysis
Driving empathy in design with user feedback
Here's a hard truth: some customers lose their initial excitement toward your company's products or services as time passes; others choose your competitors' offerings from the get-go. More often than not, this failure to resonate with target customers reveals an “It's not you, it's us” situation: it shows you've neglected to understand what users truly want and need.
You're here because you know better than to let this happen. As a designer, you want to polish your approach and pick up on the finer details of the user experience (UX). And if you’re hoping to win people’s business and loyalty, you're right to shift your focus to empathy-driven design.