Maze usability testing
Improving Maze’s usability testing feature by maximising screen real estate, and unifying UI components.
UI, UX, Concept
01 The brief
Maze is a usability testing tool designed for product teams to help gain better user insights on their product concepts.
The problem
Maze has highlighted that users find it challenging to navigate and understand how to create product flows within the ‘Mission block’. It's equally important that users are aware of the ability to add follow-up questions to track the success of each task.
The goal
Simple..ify... Simplify the process of building a path from a prototype designed in a linked designing tool.
✏️
Usability tests in Maze are built using different types of blocks. The Mission
block is where users build prototype flows to test their product. The rest are
built up of common survey questions like Yes/No, open questions, and multiple
to name a few.
The build page for a mission block, current design.
02 Research
Finding key points for how to improve people’s experience of building out a path was key to this process.
To build a path a prototype has to be synced and then interacted with to build a recored path. The mockup mobile screen is relatively small in screen and could be tricky to work with if the interactions are small. It’s also tricky to understand the path being built as the thumbnails in the card are cropped to square and tricky to read.
Identifying Key points of interest
The mobile mockup is relatively small in size, freeing up space and allowing the prototype to be larger would help users be more confident to interact with the screen and be measured by their own actions that they are clicking on the right elements.
When adding a block, there are two options, either card ‘add block’ which sticks at the bottom of the card stack, or hover between blocks to add. Block options open in the same stack, hiding the flow being built. Also no option to add multiple blocks at any one time.
The vertical and horizontal navigation
The vertical navigation on the left opens up on hover, this takes up useful space which could be put to use on other elements.
In the horizontal navigation there are a number of different button types and sizes. Giving better better context to there function would help with cognitive load.
Problem statement
To start, let’s align any thoughts I have on the problem that is to be solved in this sprint. Framing the problem will help spark opportunities and influence the solutions that we end up with.
🤔
When users want to build a flow from a prototype, they encounter the challenge of dealing with a small mockup mobile screen and visually discounted legacy thumbnails that hinders their progress and leads to frustration and drop-off.
With a picture of the problem, and identifying key points of interest, this then allowed me to determine possible solutions, form ‘how might we’ statements to begin building outcomes for possible solutions and anticipate the benefits of the work.
Maximising screen real estate for key features
Give users a lighter experience in a workspace with less noise and more comprehensive visual representation of the flow they are building.Clarity in user interaction
People need to feel that the actions they take are recorded and to give that feedback appropriately, there is an opportunity to enhance this feeling for user, by providing real-time feedback and a sense of control.Style cohesion
Addressing some of the UI that is missing some consistency and/or obvious as to what that CTA may do or take you.
⁉️
How might we... make it easier to interact with a a prototype and provide real time feedback
How might we... maximise the space available to allow for better interaction of key areas and reduce cognitive load.
How might we... Reduce number of component styles without loosing integrity.
Anticipated Benefits
Reduced cognitive load
Enhanced user confidence
Increased productivity
Improved flow completion rates
03 Design
Outcome (ish)
From discovering a few key points I jumped right in and made some small adjustments to address the prototype feature alone.
Adjusted the shape of the thumbnail in the path card to show the entire screen rather than cropped square, adding better context to what has been built.
Removed the tab section above the mockup. There is already a preview button in the top nav bar so that can go.
The comments can also go up in the nav bar next to the team icon so they can be easily accessed.
Changing the team icon from a ‘+’ to a user and plus icon reflecting the functionality. I also did cleaned up the button sizing.
Making the mobile mockup larger given there is more space
Moved the refresh button to the bottom and the label to be inline.
Added a previous screen to the left to give a sense of movement and perspective when creating a path.
Job done! 🥳
Well sort of, this stage would be a great case to test and understand where if the business values a deeper dive into this.
Since this is a concept project I will take that deeper dive in and address other points discovered and dig into more research.
These are the areas I want to look into more.
Vertical navigation
Block card design and how a block card is added to the stack
Clarity to tasks needed to complete a mission block
Maximise overall screen real estate.
Rapidly iterating screen real estate
To quickly understand and iterate on the space available I started by blocking out sections to see where elements would have the potential to move and how much more space could be gained.
It became obvious that removing the vertical navigation/app bar would free up space and allow for key areas to function with more clarity.
And what if the content of for a mission block was given more focus and creating an expected path was a feature within giving more focus to a single task at hand. The thought being that this would help with focus and create less distractions for the user.
Left: existing, Right: new proposed
Left: Content, Right: Prototype.
Addressing two nav/app bars
I wanted to address having both horizontal and vertical navigation as mentioned in the research.
One quick win, both menu overlay had different background effects, one had a shadow, the other a full screen darken effect.
By adding a hamburger menu in the top right enabled the vertical to be removed. to keep the same interaction the nev would open on hover of the button. It’s also worth noting that this menu is on every page whilst logged in so removing all together could be cause other points of friction.
On further inspection the draw menus had different Background effects, one had a shadow, the other a full screen darken effect.
Before and after showing the impact of space gained.
Moving the ‘add new block’ to open in a new draw menu rather than the same stack as the editable blocks, allows for multiple blocks to be moved in rather than one at a time.
New task block in context of the screen.
Maximising content blocks space
Below is a before and after of the design for the content blocks. By removing the space between and outline to the cards saved a tone of space. In total it saved just over 40% in space giving a much more holistic view of the usability test being made. Putting the content type descriptor in a chip matching the icon also helped identify what the block is.
Clarity by subtraction
To create clarity and remove distraction the content takes centre stage and is split into stages taking influence from e-commerce step by step checkout flow.
Adding a section to add a follow up question would open the block draw menu. Suggestions would help educate what blocks are useful to follow up with, and a link to Maze’s Notion page which is packed full of question advice.
✏️
To demonstrate the features within the mission block I used a crude mockup of a made up app, mimicking a onboarding flow
The screen of the Mission block and building a path from a prototype.
Paths, with less.
Creating an expected path benefits most from the work to maximise the use of space. Now entire space, removing any distractions or unwanted confusion as to what is being made.
Inspiration for interactive with a prototype and adding a path came from Instagram stories on desktop. When interacting with the prototype that screen would slide to the left creating a history of previous clicks. The path can also navigated through and edited at a desired point.
Given the possible complexity or focus needed to creating a path, it felt right add the ability to entire into full screen to give further focus.
The screen of the Mission block and building a path from a prototype.
04 Learnings
Validation
If this project was to be real world, I would want to test each phase (Navigation, block redesign, and Mission redesign). Then staggering the release, depending on the results.
It would have also been imperative to work with and understand the developers needs and of any constraints from the beginning so that blocks would appear later down the line.
📝
This project was interesting to undertake as a concept. I had to work hard to find research that would validate my thinking, it helped me think outside of the box and find sources in places I may not have thought if everything was handed to me.
Next Steps
Whilst working on this project I was curious how a MVP of the Mission Block and building a flow from a prototype would work as a mobile app.
Below are some quick hi-fidelity mockup designs I made from a very crude list of information architecture of initial screens possibly need.
Home screen
Projects
Maze’s
Mission blocks
Flows
Prototype
The idea was trigged from thinking about best ways of interacting with prototypes from a build and a testers perspective. What better way than using the screen of your own phone to get a real life experience. It would be interesting to understand if this is in Maze’s road map, and even understand if there would ever be a need for it from a user base.
