pexels-emma-bauso-2253879.jpg

Running usability tests to uncover pain points and spot opportunities for improvements for Mas & Pas

X - 1_iphone12black_portrait 1.png
usability 1.png

Finished designing the MVP journey with a focus on Interaction Design

customer-review 1.png

Developed a usability testing plan, and moderated testing

heatmap 1.png

Updated and refined the UI tool kit ready for future journey designs

PROJECT OVERVIEW AND MY ROLE

Client

Mas & Pas 

Length

4 Months

Challenge

Finish MVP and validate

My role

Senior UX Designer

Group 30.png

Discovery Workshop

Understanding what we have

Screenshot 2021-05-22 at 01.52 1.png

When starting at a new company it’s important to get an understanding of the current work done to date, and the current challange. Therefore I spent the first period of my time at Mas & Pas going through various documents and Figma files, and having meetings. To piece together the current work. The challange was two fold - to finish the MVP, a platform to allow parents to search for local activities for their children, and to finish the business registration and listing side too. The second half consisted of validating this MVP through usability testing.

FINISHING THE MVP

Adding the final pieces

Image 1.2 1.png
Screenshot 2021-05-22 at 01.59 1.png

Although a lot of the MVP had been designed prior to my arrival, there were a lot of loose ends and extra journeys to design. Some of these included: A Management panel for businesses to update their listings, A listing journey for Businesses to add their classes to the site, and a Search and Booking journey for Parents. After many workshop activities with the PO and Developers I had a clear direction to go in. So I took to the sketch book and sketched out all these journeys and how they interlink.

HI FIDELITY AND PROTOTYPING

Figma and interaction design

Frame 1156 1.png

While finishing the MVP and other journeys, it was clear we were lacking some vital components that would impact our Interaction Design. For example, there were over 100 categories to choose from when listing an event. Currently in the design it was simple dropdown with a list of 100 items. Not the best interaction considering the context. Therefore for each item like this I spent time creating a few options at the UI visual level to discuss with the team. The dropdown example is above, Option 1 was chosen.

MacBook - 1 1.png

Now we had the user journeys clear, and our component designs were coming along well. It was time to prototype up some clickable designs. Now, the company were full steam ahead with building for launch, and agreed to carry out testing after launch. Not ideal, but given the circumstances this was the second best option. However, it was vital that prototypes were still created to convey the journeys to the team and developers to avoid any misunderstanding. Some journeys, like the above Management panel, has a lot of sub-journeys. So in Figma I created a starting page, which listed all the journeys that people could follow.

DISCUSSION GUIDE AND PROTOCOL

Designing how we test

Screenshot 2021-05-22 at 15.36 1.png
Screenshot 2021-05-22 at 15.37 1.png

It’s important to test, it’s even more important to test accurately. Therefore a Protocol and Discussion guide are key. These describe two things - the Protocol lays out the full research and it’s goals. What it hopes to achieve. This is for internal use, to make sure not only that everyone is on the same page but that we are aiming for the right things. The Discussion guide is a lot short, essentially a script for the testing which will usually include an intro, and a set of tasks. Above is a snippet of the ones that I wrote. Credit goes to Jack Fantham, a UX Researcher for supplying the templates I used.

USABILITY TESTING

Remote moderation

adam-wilson-mM7V59F5syw-unsplash 1.png

Testing was conducted remotely, which I have a lot of experience in now. 6 Parents were test, and 5 business owners. The testing took 5 days in total. All sessions were recorded for later analysis and to show other team members who could not observe at the time. I also used this as a chance to education Mas & Pas on the value of those 5 days used.

DATA ANALYSIS

Understanding the testing

Screenshot 2021-05-23 at 16.43 1.png

Thanks to Jack Fantham again I had a template for a Testing Matrix. This hosted all the issues found, their severity, their root cause, and some notes on potential solutions. Some of these were filled out on the fly, as I moderated. Others were added after the testing as I went through the videos. Some of the major issues can be seen above.

FINAL REPORT

Suggestions for the future

Slide 16_9 - 1 1.png

A full report was written up, this was split into two parts. Part one focused on the testing and what was found. Detailing the severity of certain issues, and which ones needed to be fixed immediately , and which ones could wait. Part Two details some potential solutions, but this was lightweight and more thought would be needed here.

LAST ITEMS

Visual UI kit

A4 - 2 1.png
A4 - 1 1.png

The challange was to finish the MVP and validate the journey, which was achieved. However before I finished I updated Mas & Pas UI tool kit. Adding all the components we created into it, and tidying up the Figma file. You can see the full foundations of the system above. Mas & Pas and now working on the changes, before they plan to launch to the public in the near future.

usability 1.png

Finished designing the MVP journey with a focus on Interaction Design

customer-review 1.png