Testing Figma Prototypes with Maze
A step-by-step guide on how to test Figma prototypes with users
How It All Got Started
The previous year, my colleagues and I made a brave decision to start testing high-fidelity prototypes created in Figma with the users. Before that, we already had a practice of conducting traditional one-to-one moderated usability testing sessions but usually the overall process was not that quick and required too much effort to find the right time to hold a session with a user, transcribe recordings, present results to the team, etc. So we decided to try and conduct usability testing in a quicker (aka unmoderated) way.
The team assigned me quite an important task to find the tool that could automate unmoderated testing, work hand in hand with Figma, and give a comprehensive overview of the test results that could be easily shared with the whole team. After some googling and comparing between various tools, I finally found the one that seemed like a perfect match. This tool was called Maze.
Great Things about Maze
In a nutshell, Maze is a platform that allows you to validate and test ideas with or without a prototype and turn them into actionable insights that can be shared with stakeholders and collaborators. Maze supports integration with the most popular design tools, including Figma, Sketch, Adobe XD, InVision, and Marvel. And I believe there are also some plans to integrate with ProtoPie in the near future. Another great thing about Maze is that it does not require the user to go through ̶f̶i̶r̶e̶ ̶a̶n̶d̶ ̶w̶a̶t̶e̶r̶ many steps by downloading a browser extension (like in UserZoom GO) or an app (like in Lookback) if you test a mobile prototype. The user just clicks a shared link to the Maze prototype and voila, it opens a page with all the instructions and tasks (or missions, as Maze gently calls it).
Now it’s been more than six months since we started using Maze, so I thought the time had come to talk about my experience of working with this tool. In this guide, I will share steps as well as tips & tricks on how to prepare the Figma prototype for Maze, create the first Maze file with blocks, send it to the users, and finally share the test results with your team (which, by the way, can be done in just a few clicks ✨). So here we go.
Making a Figma Prototype Maze-Ready
Let’s assume that your prototype is set and ready and you’ve already spent thousands of hours on creating user flows and connecting all of the screen frames with each other in Figma (I know how painful it is *sweating*). In addition to that, you clearly know the testing objectives, questions you want to ask, and you’ve already prepared text scenarios or tasks you want to test with your users. Great, let’s move on.
Now it’s time to prepare and polish your prototype to make it Maze-ready. Be ready to spend a few hours on it but it’s worth it:
- Make sure to duplicate the prototype to a dedicated file in Figma.
- Get rid of any screens, frames, images, any assets that are not relevant to the user flows you want to test. In addition to that, you can use the Figma plugin Clean Document, which can help you get rid of not relevant hidden layers (but it can also smart sort layers, make all pixel-perfect, and do other great things). I think this is the only plugin I use most of the time to keep my designs polished and organized. Pure perfectionist joy.
- Make sure all of your primary screens live in a frame, otherwise Maze will not be able to process it. Overall, it’s a good idea to make sure that frames and groups are used correctly in your prototype. Here is a good article on how to differentiate between the two of them: https://www.figma.com/best-practices/groups-versus-frames/
- Use the Figma Overlay actions if there are any overlays used in the prototype, such as overflow menus, bottom sheets, side panels, modal windows, and so on. You can simply draw a connection between an entry screen and a destination overlay element and assign the Open Overlay property. That way, the design file remains lightweight since you do not duplicate a background frame that lays behind the overlay.
- Utilize the power of Figma components if there are any entities that are repetitive across your prototype. Make sure these components live in the dedicated library file in Figma which can be your UI kit or a design system.
- Since Maze supports Interactive components ✨, you can take full advantage of it and make your prototype more realistic for the user to interact with. For example, you can assign a hover or pressed effect to the button in variants by simply drawing a connection between an enabled and hover variant of the button. But be cautious, such interactive elements should be tight to a certain action, otherwise, it might confuse the user if a clickable looking element does not do anything. Ideally, the user should be able to interact with any elements when testing the prototype, but it cannot be realistically done in Figma, since it does not support complicated prototyping logic and conditions. If you want your prototype to look and feel super realistic, ProtoPie is a great tool for such a purpose.
- Give a distinctive name to the starting screen frames. Each flow you want to test should have an entry screen from where the user starts the journey. Give a name to each starting screen, so it will be easier to find a specific flow in Maze. Usually, I name the starting screens as numbers 1, 2, 3, and so on, depending on the number of flows I plan to test, but you can give it a more self-explanatory text name.
- Maze also recommends compressing images and optimizing the custom font file to reduce the size of the Figma file. The full article on how to prepare a Figma prototype for exporting to Maze lies here: https://help.maze.co/hc/en-us/articles/360052723313
This polishing step is especially important if you want to test a mobile version of your prototype because it ensures that the final design file is lightweight and, as a result, the users will not experience any loading issues and will not abandon the testing session. You know how frustrating it is when something loads more than just a few seconds.
Creating a Maze File with Blocks
Once the prototype is polished, it’s time to go to Maze and create a free account.
The overall structure of the Maze platform consists of projects (folders), mazes (files), and blocks. Mazes are files that can include design iterations of your prototype (if you plan to test the prototype iteratively), desktop and mobile versions, as well as versions in different languages. Usually I name my mazes like “[Device][Language][Iteration]” or “Mobile ENG 1.0”. Blocks allow you to structure your test however you want and can be of different types of questions (open, multiple choice, yes/no questions), usability tasks, and so on.
So first, let’s create a project and name it. Here is where all of your testing files or mazes will be located. I usually dedicate a project to a specific prototype idea I want to test, for example, “Creating a to-do list”. Then, let’s create a maze inside it. Once you click to create a maze, choose from a plethora of templates (some of them are available only for a pro plan though) or start from scratch. Templates already include pre-built blocks. Depending on the research method you chose, these blocks can include a card sorting task, feedback survey, standardized questionnaire, feature usability test, etc.
Since we are on a free account, we can just start from scratch. A maze draft file will be created with some pre-built screens, such as the Welcome and Thank You screens, the first and last screens that the user will see when they run the Maze test. Those screens cannot be deleted but can be customized on a pro plan where you can remove the Maze logo and add a personal touch. Since we are on a free account, we leave the Welcome and Thank You screens as is.
If your users are from around the world, Maze will automatically translate its platform’s interface and the Welcome and Thank You screens to the native language of your users based on their browsers’ preferences (here’s the full list of languages supported by Maze). However, it cannot translate the text scenarios or any other content you provide. If needed, just create a separate Maze file with translated scenarios and a prototype.
Then, let’s continue and add a block with a type Mission. This is the first usability task the user will see after the Welcome screen. Give a usability task a short name, for example, “Add a to-do item” and a more detailed description like “Imagine you need to buy a bouquet of flowers today. Add such a task to your list.”
Next, click Add prototype and Paste the shared link of your testing prototype from Figma. Make sure that the shared Figma link can be viewed by anyone (Anyone with the link can view). Finally, click Import and Allow access, so Maze can read your Figma files.
Once the Figma prototype is uploaded to Maze, Set the path you expect the users to take. The expected path is a required setting and should contain at least two screens. It will allow Maze to compare the path that the user actually took with the ideal path you set. Once you get the test results, Maze will indicate whether the user failed the mission and took the wrong path or maid it through and took the expected path. It’s also possible to add some variability and add more than just one expected path.
Set the path by just clicking through your screens in the preview window. If you want to change the starting screen, here’s where the names of the starting frames we added in Figma previously come really handy. Simply click Change your starting screen and type in the name of the starting screen in the search box ✨
If you use interactive components in your prototype, make sure to toggle on Enable interactive components. To track non-click events such as delays, enable the Track non-click events setting. Another interesting feature you can experiment with on a pro plan is called Conditions. Here’s where you add a bit more complicated logic to your test. Let’s say if the user gives up a usability task, you want to ask a question about what exactly confused the user. This is where the conditions come handy. You simply set If the tester gave up ➡️ Jump to a block question Why did you give up?
On a pro plan, you can also enable Clips to track audio, video, and screen recordings and see how the user interacted with the prototype once you get the results. However, during the session in Maze, the user will be prompted to confirm their microphone & camera and screen recording sharing or continue without a recording. If you are testing a prototype on a mobile device, Maze will prompt only audio and video recordings. Screen recording on a mobile device is not supported.
When experimenting with this feature, I thought that Maze recorded only screens without prompting any additional permissions like microphone or camera and that I would be able watch every single recording. But to my surprise, I got only a few screen recordings because, as I found out later, most of the users continued the test without a recording. So be aware that not all of the users would be willing to give the permission to record a screen.
Additionally, check the maze settings such as the Scaled prototype option to disable prototype scaling, Delay success message to delay the success message when the users complete the mission, and so on.
After the applied settings, make sure to preview the mission by clicking the Quick look icon. If the prototype needs some changes, go to the Figma file, save changes, and then click Refresh my prototype in Maze. If your changes affect the user flow and order of screens, make sure to correct the expected path as well.
And that’s it. You can add up to 10 blocks (on a free account) to the Maze file such as an an open question and ask how difficult the task was. If there is more than one usability task in your test, duplicate the mission block you created and apply changes to it. Once all of the blocks are perfectly crafted, Preview the maze and Share the link with the team to do some pilot prototype testing. Warn your colleagues, that the shared Maze link is just a draft and should not be shared with the users. Otherwise, Maze will not be able to collect the test results and statistics.
If you test a mobile prototype, it’s especially important to spend some extra hours and do pilot testing to make sure that the prototype loads without significant delays on a smartphone (especially an old one). If you experience such an issue, double check that the prototype is polished and that you follow these steps. In case nothing helped, try a testing tool called Useberry, they have an option to upload a Figma prototype as images. It will not look super realistic but will load a mobile prototype pretty quickly (even if you have a large number of frames in a user flow).
Sharing a Maze File with Users
Once the Maze draft file is ready to be shared with the users, click Start testing. Remember that after this step, you cannot apply any changes to the Maze file. If you plan to share the active Maze link only with your colleagues, toggle off Tester tracking, this setting allows to record every user’s interaction during the Maze session. If you do some guerrilla testing with the users on the same device, toggle off the Unique session setting. You can also record custom user’s metadata by adding tags to the Maze link. I did not experiment with this feature but if you know exactly that the link will be sent, for example, to users located in London and you want to see that information in the test results, add a custom tag to the Maze link: t.maze.co/74641933?city=london
Finally, Copy maze link and send it to your users via email or any other service. Another way to spread the Maze link is to Send Reach campaign or Hire participant from the panel. There is also an option to be notified about the test results by Slack. To do that, just click Connect to Slack. If your team does not use Slack, you would need to go to the Maze file and check for test results manually.
If you enabled Clips when crafting the Maze file, it would be a good idea to acknowledge the users in an email, for example, that during the session the user will prompted to give permission to audio, video, and screen recording and that only screen sharing is preferred for the test. That way the user will not be surprised or scared away by various prompts. Additionally, you can add such a warning to the Welcome screen.
Analyzing and Sharing Results with the Team
Let’s imagine you’ve already got some results (congratulations, by the way, I know this feeling 😊). To check the results, go to the Maze file and it will automatically open the Results tab along with the Testers tab.
The Results tab gives an overview of how the users coped with a Maze block. If it’s a Mission block (like in our case), it will show how many users completed the task via the expected path (Direct Success), the unexpected path (Indirect Success), or gave up the task (Give-up / Bounce). You can view the aggregated path heatmaps (the same path that the users went through) per each mission outcome (Direct Success, Indirect Success, Give-up). You can also view path clips if the Clips setting was enabled for the Mission block and the users allowed the screen recording. At the bottom of the tab is the Tester paths, a table with all the users’ sessions who went through the mission + collected metrics such as Duration, Misclicks, and Outcome.
The Testers tab has pretty much the same information as the Results tab but per each individual user or tester. By clicking on the tester’s ID, you will see metadata including a browser name and version, operating system, language, and any other metadata you added manually to the Maze link. Next, is a block with Responses, which shows the journey that the tester took, how successful that journey was, what questions the tester replied (if any), etc.
One of the great features of Maze is that it automatically generates a Report that can be easily shared with your co-workers in just a few clicks ✨ You do not need to spend many hours on creating such a report yourself. So let’s Go to Report and see what it does.
- Metrics about every single block in your test such Total testers, Misclick rate, Average Duration, Success, and Bounce.
- Mission’s paths that show on what screen how many users navigated outside the expected path (Off-Path), successfully moved to the next screen (Success), or left the mission (Bounced).
- Success metrics per each screen.
- Usability breakdown that include the collected metrics (Average time, Misclick rate, Usability score) per each screen in the mission.
- Optimal path analysis that shows a heatmap per each screen as well as how many users navigated outside the expected path (Off-Path), successfully moved to the next screen (Success), or left the mission (Bounced).
Once the results are carefully analyzed by you and your team, it’s time to either improve the prototype and send it to users again for additional feedback or close the project. In the first case, just Duplicate the maze in the same project folder and name it like “Mobile ENG 2.0”. Otherwise, just go to the Projects page and click Archive this project 🙌
Final Thoughts
I know the guide turned out to be quite long but I tried to include every tip that helped me personally. If you’re interested to know not only about usability testing but other research methods that can be done in Maze such as card sorting, surveys, concept validation, and so on, check these detailed guides.
Happy prototype testing, everyone 🚀
