Prototype usability testing

Context

To figure out how to make my designs user-friendly, I sent out live prototype tests to users using the usability testing research method.

Results

After having peer reviews for version 1 of my prototype and making version 2, I wanted to validate version 2 with actual user tests.

Usability testing

For this test, I used the usability testing method. These tests were done using Maze. Maze is a prototype testing tool where people can link their design prototypes (in my case, a Figma prototype) and give users specific tasks to complete in the prototype, such as navigating to a certain page. Maze then helps by showing information about the user’s path like click heatmaps, misclicks and time spent completing the task.

The users that will be testing this consist of multiple groups of people who all fit the target audience:

• Moonly employees who are into sports and buy sports clothing regularly (between 20-30 years of age)
• Personal friends who go to the gym multiple times a week and buy sports clothing regularly (between 22-26 years of age)
• Family members that go to the gym multiple times a week and buy sports clothing regularly (between 28-35 years of age)
• Members of my local gym that go to the gym multiple times a week and buy sports clothing regularly (between 20-35 years of age)
• Gym employees / personal trainers (between 20-30 years of age)

I wanted to figure out possible pitfalls of the design that I overlooked, so for my tests I want to create an authentic experience for users, going through the entire process of buying a product.

I set up the following tasks on Maze to gather information:

10-second test (shown an image of the product page for 10 seconds)

• To see what users remember from a brief look at the product page, I want to see if they recognize the customisation checkbox, the add to cart button, and product information.

Buy a product

• Start screen: home page
• End screen: order confirmation
• To see what path user’s take to go from the beginning to the end of buying a product, and to see if the flow is logical.

Rating from 1-10 (how easy was it to buy a product)

• To gather information on how the users rated the prototype experience.

Open the preview of a customised product

• Start screen: product page
• End screen: custom kit builder preview overlay
• To figure out if customising a product is easy to find on a product.

Open suggestion

• To gather any open suggestions from users in terms of design, UX, or other concerns.

From these tests, I gained lots of useful insights and feedback.

For the full results, please refer to the research document:

Based on these results, I designed the final version of the prototype:

Prototype - final

Conclusion

From my maze tests, I can conclude that the design is clean, well thought out and functions like a regular webshop that people are used to, which is good.

A lot of participants mentioned that the customise product checkbox was not easy to find and not prominent enough when they were asked to “open the customised product preview”. While this is not a direct harm to the flow of buying a product, it is one of Masita’s custom integration requests, which means it should still be fairly prominent, and intuitive for users that visit Masita to buy a custom product.

The average time to buy a product was 18 seconds, therefore I do not deem it necessary to change the navigation flow or button (CTA/navigation) styles, as I feel that these are intuitive and positively received.

In terms of colours, people mentioned that the Masita branding was prominent and was well-integrated, which means I do not have to rethink my colour usage.

Based on this, I will be making the following improvements to my design:

• Improved visibility for customise product (button instead of checkbox)
• Rethink if product price is prominent enough and aligned correctly (this was only suggested by one participant)

Learning outcomes

1: Professional Duties

By delivering professional products and validating them with user feedback, I show that I can make products that meet expectations in the relevant IT-area.

2: Situation-Orientation

By testing my prototype in a structured way and analysing the results, I show that I can adapt to the company's way of working.

4: Investigative Problem Solving

By identifying design issues with relevant research methods and user tests, I show that I take a critical look at research and validation of products.