Wireframe testing: How to find usability issues early on

Your team has identified a set of problems your users have that you’d like your product to solve, and you have decided to start the product discovery process and identify potential solutions. One method that can come in handy at this stage? Wireframing and testing low-fidelity designs with users.

At the early stages of the design process, testing wireframes can help you identify the most effective layout and outline of a page, and how to best present information to users. It’s quick, affordable, and hassle-free.

In this article, we’ll take a look at how wireframe testing works, why you should use it, and share a step-by-step guide to testing wireframes. We spoke to Samanvay Kasarala, User Experience Designer at FormAssembly; Ally Hangartner, Senior Product Designer at Klaviyo; and Archit Jha, Product Designer at DocuSign, to bring their expertise to the subject.

A wireframe is a simplified representation of a page interface that defines:

As a designer, you create wireframes early in the design and development process to define user journeys without investing resources into developing a high-fidelity prototype. Wireframes allow you to discuss ideas with stakeholders and collaborate freely without worrying about details such as colors, styling, fonts, or graphics.

You can create a wireframe using pen and paper or a digital tool like the ones described later, test them with users, and use the insights found in the tests to guide mid- to high-fidelity iterations of the wireframe, a process known as wireframe testing.

At this point, you could be thinking, “I know what a wireframe is, but why should I test them with users? Is that really necessary?”

Think about it this way: you could spend hundreds of hours developing pixel-perfect designs only to realize later on that there's a massive usability problem.

Maybe your users don't know what they need to do, or perhaps they try to achieve their tasks but can't find the right way to do it. Whatever the problem may be, the truth is that at that moment, you have lost precious time—and your company, money—you could have used testing earlier and faster, so by the time you have a final design, the UX was on point.

As a usability testing technique, wireframe testing allows you to:

Jakob Nielsen, principal of the Nielsen Norman Group, popularized wireframe testing as a method to find major usability issues efficiently. Instead of testing resource-intensive prototypes, wireframes allow startup companies to gauge a layout's effectiveness using small user batches without investing much time or money.

After the rise of lean development methodologies, wireframe testing became a practical and efficient usability testing technique companies use to test user journeys, extract insights, and iterate on their ideas quickly.

As a Senior Product Designer, Ally Hangartner has found wireframe testing ideal “to get feedback on very conceptually different solutions to a problem. Instead of spending the time making sure just a few screens are pixel-perfect, you have the opportunity to create more extensive user flows at a lower fidelity.”

That is, wireframe testing allows designers to avoid future, complex redesigns. As Anton Suprunenko explains, “Wireframes should precede the stage of visual design, not vice versa. It’s like deciding on the technology stack for your application after having the code written.”

Now that you understand the benefits of a wireframe test, how do you go about running one? Here’s each step you need to follow to conduct a wireframe test.

Product tip: Have a wireframe ready for testing with users? Import it into Maze and start testing in minutes. Learn more here.

The first step is to develop a research plan that defines the goal of your wireframe testing process, its purpose, and the entire logistics required to execute it successfully.

As part of your plan, you need to define the members involved in the testing process. Most likely, designers, UX researchers, and product managers will take part in the tests, but you can also include developers, marketers, and any other stakeholder.

Then, you want to share the plan with your team and discuss:

Samanvay Kasarala explains that their planning process starts by identifying their customers’ pain points about their product. Then, they consolidate these pain points in a coherent customer journey, which they use to develop the wireframes and run the tests.

According to Kasarala, “this process, in general, puts the customer at the start and end of our problem-solving process, but the ability to move quickly is down to using wireframes and not hi-fidelity designs.”

In this step, Ally Hangartner from Klaviyo recommends writing jobs-to-be-done statements, defining the problem scope, and getting clear on the target audience. She adds, “Initial ideation should be bold and less concerned with constraints and limitations; this is your opportunity to ask yourself, "In an ideal world, how could this experience look like for my user?”

Archit Jha adds that a critical aspect of the goal-setting process is to “establish metrics to measure the performance of the solutions against the problems.” Their team compiles the test's metrics and goals in a study plan, which, according to Jha, “acts as the primary source of truth for the study.”

Once you have defined a plan of action, you need to write a test script that will work as the basic guidelines for your participants during the tests. This test script will include:

The instructions the user needs to follow are the most important part of the entire script as it involves the tasks they will execute during the test. These tasks will help your team uncover usability issues. Also, spend time [brainstorming and selecting the questions] to ask before, during, and after the usability test.

According to Kasarala, they start by defining the tasks “since our process starts with identifying the problem areas first. We do not make assumptions without any basis in real data-feedback from our users.”

When designing your questionnaire, Hangartner recommends mixing both qualitative questions—e.g., "Describe what you would think if you landed on this page"—with quantitative questions—e.g., "On a scale of 1-5, how was your experience completing the task?"

Once you have defined the test plan and the details surrounding it, it’s time you start running the tests. Regardless of your plan's goals, tasks, and scenarios, you need to prepare your team as well as your location for the test, so nothing goes off schedule.

To avoid any problems with your test environment when running moderated tests, set up your testing environment beforehand and run a pilot test with your team members to make sure the wireframes work as intended.

For moderated tests, users should know when and where you are running your tests—meaning that you need to inform them of the test’s location (either in-person or remote) and time clearly—and what's expected from them. If you are giving way any incentives to your test participants, be sure to explain what they are and how they will receive them.

Jha recommends thinking of yourself “as an event organizer with the study plan being your checklist.” Even if things don't go as planned, flexibility and adaptability are critical. He adds: “You might run into a situation where participants are going in a direction different from what you had originally intended. Be quick to make necessary changes on the go.”

Hangartner recommends alternating the experiences you show the customer first since “this will help you avoid recency bias and ensure that the feedback you get is not skewed by the order in which you presented your solutions.”

Unmoderated tests require even more special attention before the participants complete them. To start, your test should be clear enough that the participant can execute their tasks correctly—if they aren't able to complete the test because of ambiguity in the tasks, your test will fail for the wrong reasons. Before the test starts, set up the right expectations as to what they are required to do.

After you have run your wireframe tests, you need to analyze the data from the results. Before you start doing so, take all the notes taken during the test and put them in one file, like a Google spreadsheet. Check for any inconsistencies in the notes and fix them, so everyone in your team understands them.

Product tip: When running wireframe testing with Maze, all your results are automatically compiled into a Maze Report that you can use to analyze issues, share with stakeholders, and iterate on designs. Learn more here.

Then, start looking for patterns in the results and organize the issues by their importance to your goal. The severity of these problems affecting the user’s skills to achieve your goals will guide new tests and future high-fidelity prototypes.

To this point, Jha adds:

"When synthesizing the results, keeping a few key themes in mind can benefit the extraction of actionable insights:

By now, we have made it clear that the process discussed here is all about testing wireframes in a quick, iterative process. Likewise, the testing tools you use should let you create basic wireframes quickly without complex features getting in their way.

The first recommendation is to use pen and paper to create your first wireframe variation or to sketch different options as you go. Then, replicate your hand-made sketch on your computer with a digital tool and test it with users.

Here’s a list of tools to use when creating and testing wireframes:

Wireframe testing is an effective methodology to use early in the design process for avoiding large usability issues later in your product development process.

To close this article, we want to give you some final takeaway tips: