Prototype Testing: A Detailed Guide For Creating Sticky Products

Prototype Testing 101: A Detailed Guide For Creating Sticky Products cover

What is a prototype?

A prototype is a lightweight model, partial release, or early version of a product built to help learn more about ideas, products, or services. In the SaaS world, they’re typically used to evaluate how a new design or feature lands with end-users and inform the development and product management process.

What is prototype testing?

Prototype testing means taking that early version or mock-up of your product (your prototype), presenting it to your target audience, and gathering crucial feedback about which parts of it work and which need improvement.

Product design and development should be an iterative process. Testing interactive prototypes with users are one of the best ways to:

  • Spot potential issues early
  • Validate product design decisions
  • Fix challenges before wider releases

What are the benefits of testing prototypes before launch?

If you want to build a product that truly meets the needs of your customers, extensive user research is fundamentally important. Prototype tests help to gather actionable insights that inform the direction of your final product.

Get feedback fast and confirm your decisions

The design and development phase of any SaaS project takes a lot of time, energy, and effort. You want to make sure it’s invested in the right places.

Prototype testing enables you to quickly gather feedback and validate what you’re trying to build.

The testing process is also a perfect place to capture ideas, particularly if you supplement your prototype testing with other forms of research like card sorting or mind-mapping.

Identify friction before launching the product

Some of the most valuable feedback you can gather from prototype testing is where your target audience is experiencing any friction. You can do this by:

  • Analyzing session recordings to understand major themes emerging
  • Exploring heatmaps to understand patterns of behavior and blockers
  • Speaking to users directly about areas they found frustrating
Screenshot of heatmap
Use heatmaps to understand user behavior better.

Test usability before choosing a design direction

At least some of your testing sessions should be focused on usability.

If your customers can’t actually use your product for its intended use, nothing else matters: not your marketing, the fancy feature you’ve spent months developing for power users.

Prototype testing helps you build something that works by getting the key elements right and functioning as expected.

Save money

There’s a wealth of evidence highlighting how prototype testing can help save time and money. Research from the National Institute of Standard Technology indicates it takes three times longer for a development team to fix a bug in production, compared to earlier in the development process.

In a competitive marketplace, that makes a huge difference.

Those time delays have a massive impact on cost. It’s around 100 times more expensive to fix a bug after the fact, compared to before a release. Prototype testing helps you catch these sorts of errors in plenty of time, giving you peace of mind and ensuring your users aren’t the first ones to experience a buggy interface.

There’s an old saying which emphasizes this point well: “Measure twice, cut once.”

Types of prototypes you should test

So we know the prototyping test is extremely valuable. But what sort of testing should you conduct?

It depends on what you’re trying to achieve.

  • Developing an MVP? If you’re developing an entirely new product, end-to-end prototype testing will help you gather as much feedback as possible.
  • Gauging a redesign? You might want to understand how real users will react, whether they’ll be able to navigate around effectively and whether the new design helps them meet their needs.
  • Testing a new feature? Beta testing helps you get distinct feedback from individual user groups on a specific feature.

Whatever the context, there are different types of prototypes to consider using.

Low fidelity prototypes

What are they? These are usually paper prototypes (or at most extremely rough digital sketches) that typically don’t allow for any user interaction. It could represent all or part of your product.

Why use them? These work extremely well early in the design process, to generate and share ideas quickly with multiple stakeholders, and rapidly iterate your designs.

High fidelity prototypes

What are they? These are interactive, high-fidelity artifacts that are meant to closely resemble your final product. They should be extremely functional and enable detailed user interaction.

Why use them? As you get into the final stages of the design process, you should feel confident your product meets the primary needs of your users. You shouldn’t expect huge UX problems to emerge at this point.

Instead, you’ll be validating the final iteration of your prototype before starting development work. You might get insights on:

  • Copy, menu links, and information architecture
  • User journeys: are they smooth and can they complete them?
  • Tweaking UI components (e.g. menu structure, pop-ups)
  • Graphics/visuals (e.g. any issues with image quality)
  • Any last usability issues

Live data prototypes

What are they? These prototypes are usually additions to the code-base that is often on top of existing products. Compared to traditional prototypes, they are considerably more interactive and offer an element of realism.

Why use them? With a distinct group of stakeholders or users, you might want to demonstrate how a specific data feed layers on top of existing functionality. A low-fidelity prototype won’t do the job here – you need an element of realism.

Feasibility prototype

What are they? A feasibility prototype is explicitly designed to test one specific element, component, or feature of a product.

Why use them? If you want to kick off some ‘green field’ development – perhaps using a new technology – a feasibility prototype could help you understand:

  • How it works for your end-users
  • How long it takes
  • Blockers and barriers

Alternatively, you might want to use a feasibility prototype to conduct a thorough usability test of one particularly risky/large new feature before a wider release.

Alternatives to prototype testing

We’ve covered how important prototype testing is – but it’s not your only option. You’ve got a range of alternatives (or supplements to the testing process) to choose from. One of the most effective is something called a fake door test.

Essentially, you’re looking to gauge demand by seeing how users respond to a potential new feature, change, or upgrade.

They work particularly well when you’re looking to validate design ideas quickly (without going to the effort of building a prototype). So, what does a fake door test entail?

  1. Launch an in-app prompt (a modal is a great option)
  2. Invite users to join a beta testing list
  3. Based on demand, develop and roll out the new feature

Let’s look at an illustrative example using Asana. Imagine they want to ‘fake door test’ their Goal feature. When users hit the prompt…

Screenshot of Userpilot x Asana fake door test
Invite users to click a button, link or tooltip with Userpilot.

Launch a message explaining you’re inviting them to join a testing group. Simple as that!

Screenshot of Userpilot x Asana fake door test message
Fake door tests are an excellent way to gauge demand.

Remember not to overuse fake door tests: customers will get frustrated if they constantly click on features only to be invited to a waiting list.

User testing methods for testing your prototype

Once your prototype is up and running (whether that’s a basic wireframe or something much higher fidelity), you’re going to want to start testing. That’s where you really start to understand whether your prototype does the job it’s intended for.

In this section of the article, we’ll unpack what sort of tests you should consider (and how they help).

Moderated or unmoderated user testing

Moderated tests. These are typically used to gather insights early in the design of a new product, and usually require a facilitator’s involvement who will:

  • Observe users interacting with the product
  • Record key findings and observations
  • Capture direct feedback

Different variations of moderated tests include popup or guerilla testing, guided user interviews, usability studies via screen sharing, and more.

Unmoderated tests. These are a less structured form of usability testing conducted independently of a moderator. They are much cheaper and easier to set up (as you won’t require a lab, test conditions, or moderators). However, the data can be trickier to sort through – it’s much trickier to understand why without capturing user sentiment. Typical unmoderated tests include heatmaps, eye-tracking, and first-click tests.

Remote vs in-person user testing

Remote tests. This sort of usability testing is conducted virtually – for example, using a tablet or computer. It’s much easier to recruit a broader range of participants, who might feel more comfortable using their own devices and in more familiar surroundings.

In-person tests. While in-person testing typically means a more arduous recruitment process, it offers a richer array of insights (e.g. body language, facial expressions). This should be weighed up against the challenges of finding and recruiting suitable participants.

Qualitative vs quantitative user testing

Qualitative testing. This is designed to understand the ‘why’ behind a decision. That could mean gathering insights about a user’s thoughts, feelings, opinions, and challenges about your product. User researchers can help inform and validate the development of meaningful features that will create real value for end-users.

Screenshot of survey
Gather insights to understand why users act a certain way.

Quantitative testing. An equally important area to consider, these usability tests give you a more accurate picture of ‘what’s happening’. You can gather data on:

  • Journey completion rates
  • Clicks from A/B testing
  • Friction (from heatmaps)
  • Performance and platform stability

Best practices for successful prototype testing

Let’s explore some best practices and principles to help you conduct meaningful prototype testing – and boost your product’s usability.

Be specific about what you are looking to test

“If everything is a priority, nothing’s a priority.”

That famous saying applies perfectly to prototype testing. If you try and test everything at once, you won’t be able to gather enough insights to make meaningful changes to your product.

Use the following framework to help break down exactly what you’re looking to test.

Userpilot prototype testing framework
Use this framework for more meaningful prototype testing.

To recap, you should be considering:

  • Who you’re testing with
  • What exactly you are trying to understand
  • Why it’s important
  • How you’ll achieve your goals

That’ll give you enough context and detail to start your prototype testing with a strong foundation. That, in turn, will help you feel pretty confident about what sort of prototype to build, and what type of testing will help you achieve your goals.

Consider testing multiple versions of your prototype

The whole point of prototype testing is to learn. If that means you get negative feedback and have to go back to the drawing board, so be it. With that in mind, you should always think about testing multiple versions of a prototype. It’ll help:

  • People to provide more honest feedback
  • Deeper exploration of new ideas and features
  • Understand your information architecture by analyzing user behavior

One way of gathering feedback is to use the “I Like, I Wish, What If” method, which helps your participants voice their opinions in a critical but constructive way. There’s more on this method (along with a downloadable template) later in the article.

Choose the right audience

What’s a critical ingredient of any effective prototype test? Make sure you test with the right group of people. Different user groups might include:

  • Colleagues. For quick, rough feedback when you’re relatively early in the design stage.
  • Power users. Feedback – either positive or negative – tends to be particularly pronounced with customers who use your product a lot. That’ll help you identify patterns for a broader user group.
Screenshot of user segmentation in Userpilot
Easily target specific user groups in Userpilot.
  • Users across regions. Different cultures and local customs could have a knock-on impact on how users interact with your product. Test your prototype with them, and find out how.
  • Business stakeholders. Every SaaS will have a diverse group of stakeholders, whether that’s legal, HR, marketing, or leadership. As well as meeting the needs of your users, testing your prototypes at various stages of development will help keep teams aligned and prevent any last-minute surprises.

Remove in-app guidance such as hotspots

Finally, if you are testing elements of existing products with live data, it’s critically important you remove any in-app guidance.

That includes tooltips, hotspots, or interactive guides. Why?

Because otherwise test participants might be unduly influenced (or helped along). It’s not an accurate test, and that means you won’t get the data you need to help inform your decision-making.

Best prototype testing tool

In this section of the article, we’re going to explore some of the many tools on the market available to test prototypes and gather insights.

Userpilot- for collecting user feedback and selecting users

Userpilot is a fantastic option for usability testing of all varieties. It’s simple to design and build in-app surveys to quickly gather valuable feedback. Importantly, you can target distinct audience segments to ensure your surveys trigger the right user groups.

Userpilot survey animation.
Userpilot lets you launch surveys targeted at relevant user segments.

You can also perform fake door testing with pre-built UI templates as we’ve seen a little earlier, and also recruit users for pilot tests, with targeted, engaging in-app messages.

friction-log-recruit-users-userpilot-prototype-testing
A range of flexible UI options for effective fake door testing.

Figma

Figma is a powerful design and collaboration tool. With a great range of pricing options, you can use Figma to build functional prototypes quickly and efficiently. Real-time feedback helps you draw on the knowledge of your entire design and dev team.

Screenshot of Figma website
Figma is rapidly growing in popularity.

Framer

Framer is an integrated platform for design, prototyping, and development at speed. It’s a great option for producing both low high-fidelity prototypes that simplify testing and gathering insights. With a range of off-the-shelf componentry, you can go beyond basic wireframes to create interactive designs – and that makes it easier for your development team.

Screenshot of framer website
Launch mockups and websites quickly with Framer.

UXPin

UXPin is a specialist tool for higher fidelity prototyping. It means the gap between your prototypes and the final design is as small as possible, giving you more assurance about the research you’ve conducted. It’s a design tool with hundreds of pre-built UI elements and integrations, and the reusable components mean communication with developers is seamless.

Screenshot of UXPin prototyping capabilites
A great option for serious prototype development.

Conclusion

We’ve covered a lot! Hopefully, you now have a framework that helps you understand:

  • What prototyping testing is and the value of doing it
  • Different variations of prototype test and when you’d use them
  • Best practices and principles to apply to any prototype test
  • What tools are available to help you build and test your prototype

Want to build product experiences code-free? Book a demo call with our team and get started! Click the link in the banner below to learn more.

previous post next post

Leave a comment