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.
What is a wireframe?
A wireframe is a simplified representation of a page interface that defines:
- The organization of each element on a page—that is, the layout
- How each part will work—that is, the functionality
- The way information will be presented to the user—that is, the information architecture
- The steps a user takes to complete a task—that is, the user flow
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.
The benefits of 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:
- Explore different early layout concepts
- Detect critical usability problems early in the design process
- Test your ideas rapidly and validate them with users
- Learn valuable information that you can use to guide the design of higher fidelity prototypes
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.”
How to run an effective wireframe test
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.
Define your plan
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:
- The test goals—i.e., the purpose of your test
- The tasks associated with completing the goals—i.e., the expected user behavior during the test
- The scenarios expected for the user to complete the tasks—i.e., the context in which the user will perform the task
- The test location—you can run remote tests or in-person tests
- The testing method—you can facilitate your tests (known as "moderated" tests), or you can let the participant carry out the test alone (known as "unmoderated" tests)
- The metrics to be used to measure and compare the tests' results
- The wireframes that will be used during the test
- The members that will take part in the testing process and their responsibilities
- The users that will participate in the tests
- The process to recruit the users
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.”
Write a test script
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:
- An introduction, which sets the expectations for the test
- A pre-test questionnaire, which aims to understand the familiarity the participants have with the product
- A set of instructions the participant needs to follow during the test. This can include any questions to ask during the test and the tasks they need to carry out
- A post-test questionnaire, which aims to uncover any issues the participant had during the test
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?"
In order to extract actionable insights from a wireframe test, it's important to create a balance between quantitative and qualitative data. A good balance yields rich results that can be broken down into digestible chunks of information.
Archit Jha, Product Designer at DocuSign
Run the test
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.
Analyze the results
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:
- Validate or disprove the assumptions/hypotheses
- Observe and report on behavioral patterns
- Collect identified issues and assign a criticality rating (minor, moderate, severe)
- Add evidence to identified issues through relevant quotes or numerical data
- Capture statistical and tactical recommendations separately
- Garner feedback and decide immediate next steps."
Best tools for creating and testing wireframes
By now, we have made it clear that the process discussed here is all about testing wireframes in a quick, iterative process. Likewise, the 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:
- Maze: allows you to run rapid tests with your wireframes. You can copy and paste the wireframe link in Maze and start creating tests for your users right away.
- Balsamiq: a popular tool for creating mockups
- Moqups: another tool for creating simple interaction design workflows
- Figma: a design tool popular for its real-time collaboration features
- InVision: a prototyping tool that lets you create responsive vector-based screen designs
- Proto: another no-code wireframing tool
- Adobe Illustrator: an industry-leading tool for upscaling the early-stage wireframes and transforming them into high-fidelity vector-based wireframes
- Adobe XD: a perfect tool for creating prototypes and wireframes
Wrap up tips for wireframing testing
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:
- Use grayscale colors in your wireframe
- Use simple typeface options; one serif and one sans-serif font are more than enough
- Use shapes and symbols as placeholders that represent different web elements. For example, a video can be a rectangle with two diagonal lines and an “x.” Make sure the users are aware of these symbols to avoid any confusion.
- Run tests early in the design process and use the feedback for future iterations