UX Design

43%

In this prototype, you can tap and scroll to view massage instructions, schedule sessions or view statistics.

Companion app for Muscqler

Muscqler, a business selling high-end massaging devices, wanted to separate themselves from the competition, and commissioned me to design an app to accompany their products. The commission was relatively open-ended, and I plotted a design direction by researching their customers.

The app connects to a massage gun via Bluetooth, allowing users to view and follow instructions for massage routines, while the device performs the correct motions at the right time. There's also options for scheduling massages and viewing user statistics.

Explore the process

More of my Muscqler work

Making the Muscqler app

1. Introduction

The product

This is the MUSCQLER Pro Fit. By rapidly vibrating the ball, it allows you to easily massage yourself. It’s meant for revalidation, relaxation, and as a sports aid.

The users

MUSCQLER has three user segments: athletes, physiotherapists, and non-professionals.

The project

Design an app that connects to the massage gun and focuses on providing the user instructions through tutorials.

2. Conducting research

Research aim

I set out to find out how, why and when the users use the massage gun, and what their opinions are on several aspects of the device.

the methods

I conducted semi-structural interviews with three users from each segment, and observed users going through their massaging routines.

analyzing the data

I thoroughly analyzed all of the data that I gathered, generating and labeling insights and design implications.

3. Research insights

one device, many uses

I reconfirmed that the massage gun is used for revalidation, relaxation, and sports, and discovered usage habits and routines vary wildly between users.

scratching specific itches

Even though different users use the device in many different ways, each individual user only uses the massage gun for a few specific purposes.

random moments

Most users have no real schedule or routine when it comes to massaging themselves, even though they would prefer massage regularly.

4. Design implications

A sea of routines

Because of the high variety of use, there should be a lot of different massage routines in the app, to cover everyone’s needs.

Finding the right routines

Users should be able to easily find the massage instructions that are relevant to them within the large amount of routines.

Scheduling

Users should be able to schedule tutorials and they should be encouraged to massage regularly to make more use of their device.

5. Ideation process

Hosting a creative session

I presented my research results to the company owners and hosted a creative session with them to generate ideas for the app.

Results of the creative session

The most interesting results of the creative session were the idea to include a body map and the idea to include personal goals/achievements in the app.

Investigating the competition

I also took a short look at the main competitor’s app. It's always good to see what others are doing right and to find out on what areas you might be able to surpass them.

6. Visual stlye

Making it intuitive

I applied design principles and interface conventions in order to make the app as intuitive as possible. I also paid attention to accessibility.

Adhering to the style book

In designing the app, was important to keep the visual style in line with Muscqler's brand guidelines.

Doing something interesting

The final touch to any product is a bit of visual pizzazz. I added some flair by assigning images to the different categories of massages.

7. Wireframing

Lo-fi prototyping

After creating static wireframes, I made a lo-fi interactive prototype in Adobe XD to get a good view and feel for the flow of how the app would function using various designs.

Categorization and navigation

I used a system of categories and the body map from the creative session to make navigating to any tutorial easy, even within the multitude of different types of tutorials.

Including features

With research results and the creative session in mind, I added a schedule, goals, articles, statistics, a body map, and more.

8. Building the final prototype

Applying styles

I applied the brand identity to my designs for the app, while purposefully using colors and images to improve the experience.

Testing the designs

During the wireframing and the hi-fidelity prototyping, I conducted tests with users to see if the app held up.

Readying for developers

I fixed any flaws that came to light during the tests and optimized the final prototype, so that the handoff to developers would go smoothly.