Helping users test their digital products

Maze App

Product Design

Maze is a web app that gives product designers and ux researchers the ability to test prototypes and collect quantitative data.

maze case study mockup

Project Overview

For this case study, I collaborated with a small team of designers to analyse and iterate on the Maze app. We were provided with a comprehensive brief from Maze, which highlighted the areas within the app they felt could be improved. The goal of this case study was to improve the experience of adding tasks to the mission blocks and consider the connection to follow-up questions within Maze.
ROLE
  • ✓ User Research
  • ✓ Product Strategy
  • ✓ UX Design
  • ✓ UI Design
  • ✓ Prototyping
  • ✓ Usability Testing
TOOLS
  • ✓ FigJam
  • ✓ Notion
  • ✓ Figma
  • ✓ Maze
PROJECT DETAILS
  • ✓ 5 Weeks
  • ✓ Teamwork

The Problem

Currently it is challenging for Maze users to navigate and understand how to create usability tasks within a block. It is also not too clear for users that they have the ability to add follow-up questions to track the success of each task.

Hypothesis

We believe that improving the mission blocks in Maze, for UX Researchers and Product Managers, [will improve their understanding of using Maze for usability testing], therefore [users are more likely to finish setting up a usability test which will increase the number of users for Maze].

The Solution

The app already provided users with the functionality to add a prototype, create missions and follow-up questions. Our solution built upon these by restructuring the layout of the missions (tasks) and questions so that the hierarchy is clearer.

maze case study mockup banner

The Full Process

Questions & Observations

To help us better frame any problems with the product, we began by forming some questions and observations that we had about the product. To easily document these we followed the structure [situation], [response], [problem to business or experience] to ensure we aware of users and business needs. Here are some of the observations we had:

When [adding a new Usability Test], users [have to create a new block and select a Mission and directed to enter a task], which causes [a problem as it is not clear that you are creating a Test with subquestions].

When [a user add a new question to their Usability Test], users [have to create a new block], which causes [a problem as it is not clear how the Task and the subquestions are related].

maze case study observations

Research

To confirm our observations and begin forming a hypothesis backed by data, we created a user survey on Maze to uncover the core problems with the product that we could prioritise for user and business needs.

maze case study survey

Synthesis

Having shared our survey with users of the product, the next stage of the case study was focused on synthesising the data to recognise trends and form a hypothesis. During the synthesis we segmented user responses and created an affinity map in FigJam to prioritise the problems of users inline with business needs.

maze case study affinity map

Validated observations

The trends we identified in the affinity map helped us to validate our early observations on what users' main frustrations were when using the app. We identified the primary frustration based on what we felt would provide the greatest gains for both user and business.

Primary Frustration
When [creating usability tests], users are [finding it challenging to create follow up questions usability tasks], which results in [them feeling confused and frustrated].

How Might We

With a picture of the problem at hand starting to come into place, we jumped into the ideation phase and worked through the solution design model, identifying users actual behaviour, and optimal behaviour. This allowed us to form a how might we statement to begin forming a solution:

How might we make it easier to write and add usability tasks with follow-up questions to Maze?

Ideation

To avoid following the first idea, we conducted a series of ideation techniques. This allowed us to consider an array of solutions. One of these techniques was to map what could be improved or added to the product after. We then prioritised which idea will bring the the most user value and business value as well as having a low enough effort for the time constraint that we had.

maze case study mind map

User Story & Flow

At this stage we formed the user story so that we had a clear goal in mind when trying to create an improved user flow. We first drew the current user flow and then we used rapid sketching to help us visualise how the possible screens might look.

User Story: As a UX Researcher/Designer, I want to set usability tasks that has a clear flow into follow up questions, so I can test the prototype’s success.

maze case study sketchmaze case study user flow

Wireframes & Prototyping

Mid Fidelity Wireframes

To create our Mid-Fi wireframes, we used a neutral color palette to avoid any decision bias and would use this prototype to get feedback internally. Autoflow in Figma was used to help us easily map the user flow between each page ahead of converting the pages into a prototype.

maze case study mid-fi wireframes

Styles & Components

The sketches and mid-fi prototype helped us recognise frustrations with the experience that we improved at the hi-fi stage. To create the high fidelity prototype we inspected the products style and followed the 4px rule to effectively and easily create a prototype that was consistent with the product styling. Before creating the prototype, we defined styles and components to easily and quickly help us design consistently.

maze case study styles

High Fidelity Prototype

Below is the final version of the prototype that we created. We included interactions and transitions from Figma to match the products flow.

Testing

With the hi-fi prototype created, we decided to do an unmoderated usability test and formed a testing script with scenario as well as tasks for the user to complete to validate the prototype with real users. To test the prototype we used Maze and gathered feedback following every task.

maze case study test

Outcome

Here are some of the highlights and learnings from this project:

maze case study highlights