mPwr

 Overview

In the personal training field, many trainers operate independently, running their own businesses. They work with clients at their homes, outside, and in local gyms. However, gyms that allow this independent work can be hard to find, particularly during COVID restrictions. mPwr was created as a tool to help trainers find gyms that would both allow and welcome independent trainers to use their space. By having trainers and their clients use these spaces during non-peak hours, gyms can provide a needed service, as well as generate an additional revenue stream.

mPwr has two main goals:

Empower the trainer to search, book, and rate gyms for training sessions.
Allow the trainer to communicate with their clients, request session spots, and transfer payments to the gym.

The founders of mPwr stressed the need to develop a clean and simple app. They wanted to create an experience similar to the booking process on AirBnB. At this point, there will be two users: the gym owner and the trainer. The gym owner is a passive user. They set their space openings on the calendar within the app, and simply approve the request when it comes through.

Why mPwr?

mPwr is a safe and easy place for trainers to find gyms for their clients. It’s also a mechanism for gyms to bring in additional revenue during non-peak hours. The trainer can find rated gyms in whatever location they need, filter based on their client needs, find open time slots, send a request to book, pay, and bank funds through the app.

Much has changed during coronavirus lockdown, leading many fitness enthusiasts to look for smaller training sessions, as well as adaptable and flexible trainers. mPwr allows everyone the gym population to train in a safe manner.

Who’s Responsible?

mPwr was an industry design project that I worked with collectively with a team of design students. When I was provided with this project, it was mid-development. The initial idea had been established as two designers began the design process. The user personas (2 different types of trainers) and initial red route user flows (routes for gym owners, trainers, and trainees) ideas were presented to us by prior designers. The deliverables from those designers were given to our team of three to collaborate and create a project scope.

From that point, we worked in both a collaborative manner to create an atomic design system, but also independently to ideate on the three different user flows. I covered the trainer user flow, contributed to the design system, and worked closely with the client to establish a logo, mood board, and design style.

Here’s the Step-by-Step

Step one: review prior deliverables and provide client with scope and timeline

After reviewing the deliverables from the previous designers and meeting with team and the mPwr founders, we created a scope and timeline. The project, originally projected to last four weeks, stretched over five weeks. The scope and timeline included deliverables, tasks, and milestones.

Deliverables and tasks:

Milestones:

Step Two: Mood Board

Using the existing name mPwr ("empower"), I developed color choices and font styles. I incorporated simplicity in the design. I created a mood board and presented it with explanations.

Step Three: Logo Development

I worked with the mPwr group to create an app logo. They wanted the name to feel somewhat “tech-like”, which is why the vowels were removed from the word. Accordingly, I drafted more versions for them to choose in order to have one final option for the prototype. They decided on the following final draft.

Step Four: Atomic Design System

Using the mood board, approved styles, and draft logo, my teammate created the start of the mPwr atomic design system. Throughout the prototype build, we added to it.

Step Five: LoFi Prototypes

Each teammate had a user and red routes associated with their user. My user was the trainer. My two main red routes were trainer onboarding and booking a gym.

Trainer Onboarding:

Trainer Booking a Gym:

Step Six: User Testing

I tested five users via Google Meet. They shared their screen and I asked them to do the following tasks:

Trainer onboarding: (a) sign up via email as Bob Smith, personal trainer, (b) add profile picture, (c) review profile and view public profile
Home page review to gym booking process: (a) review trainer homepage for clarity, (b) find a gym near Birmingham (35020), (c) review map, list view, and filters, (d) request session at Rob’s gym and review potential process to booking

Step Seven: Iterations to Prototype

After conducting the user test and creating a usability test report, I made more than 10 iterations to the design. The main ones were clarifying and expanding the reviews, allowing the user to choose various months when booking, and labeling the items shown on the trainer home page with gym names and distance from default location.

I also made iterations based on new information from mPwr group. They wanted the payment process to change and come from the trainee versus from the trainer. I noted that more decisions needed to be made and user testing would need to be conducted with a new persona added to verify the design.

Trainer Onboarding:

Iterations to look for:

Fade the last review. This will keep reviews from taking up the entire page but will help indicate there is more to see if the user desires. Offer a down arrow icon as an action button to make the view more option even more obvious. The reviews would show and expand the page vertically for reading. Provide a less or up arrow button when the user is done.
Profile picture: Create screens that allows assess to photos to therefore add profile picture to profile.
“Fillers”: Provide realistic filters and images for clarity and better usability.
Consistent locations throughout: Showcase things consistently. Create a realistic environment for the user, so they are not confused and focus on what they need to. Make the locations of the gym and trainer consistent with the map: Alabama.
Public profile: The user did not understand the ability to contact themselves. Even if it wasn’t functional, it didn’t make sense to them. Remove the button all together and only have it visible to the gym owner, like Facebook, etc.
Logout option: Remove it as another typical line item and have it as a faint clickable text. So, it’s available but not encouraged and yet it’s consistent with “profile view” clickable text.

Trainer Booking a Gym:

Iterations to look for:

The “reserve session” was removed on the “Rob’s Gym/May month” screen and “Send Request” took its place. The trainer sends the request to the trainee for acceptance and payment. Trainer waits for reply and gym booking also waits. The flow now stops at that point, until process is figured out (e.g. if the trainer sets a time limit, trainer sets a trainee limit on class and once it reaches the limit it sends, or trainer can manually send it when they please).
Have all rating stars show light to be consistent. When developing HiFi, perhaps use a primary color to stand out. In the list section that is small, rather than have “5 star icon”, write it as “5 star” similar to Amazon’s hover rating reveal. (see image example at bottom of report).
Schedule: Provide arrow or faded smaller “June” to indicate the option to see future months.
Homepage clarity: Add default location entry to onboarding. Then, add gym name and distance from default location. “Gyms near me” was more helpful to user when it was set to home address versus where they are when they open the app.

Step Eight: mPwr Group Presentation and Final Report

Each team member reviewed the iterations and prototypes with the mPwr members. I also delivered my usability testing report and we submitted next steps recommendations and handoff items.

Conclusion

Through usability testing and mPwr updates, I updated three main items in order to improve usability and meet the needs of the client.

Booking process: I created a new flow to request payment from trainee/client. This process needs to be developed more, but essentially, the training session would be approved by client and their money would be paid into escrow.
Rating Reviews: This feature was important to the mPwr group and was confusing during user testing. The stars needed to be consistent in color to verify how many were filled. When the ratings needed to be abbreviated, the alternate design was like Amazon’s, so it would likely be familiar to users.
Labels: I created labels were created on the homepage. The items became clear as to what they were and how far they were away.

Case Study | Prototype