Optimizing Early Stage Iteration with Atomic Design

December 30, 2020

mPwr is a Boston based startup that aims to connect Gym Owners with Personal Trainers that are looking to rent space for them and their clients.

I was brought on board, along with two other designers, to help create consistency across their designs as well as working out the kinks in the experience for Gym Owners.

My responsibilities included:

A System Designed for Iteration

The two sets of wireframes from the previous designers were very different visually.  We created a basic design system to keep our resources consistent across wireframes.

Since we were building our component library from the ground up, I designed the system to be Atomic. This allowed us to design, edit and organize components as we built them. Fortunately for us, Figma's Variant system was released right as we began the project.

Once we finished a base set of Atomic Components, creating the consistency we needed across wireframes became simple.

As I was only working on this project for a few weeks, I created a document for future mPwr designers to reference when using the system for the first time. Instead of explaining it further, you can take a look at my Design Handoff document

Check out the mPwr Design Handoff Document Here

Gym Owners

After setting up the Design System, we unified the designs of the wireframes and created prototypes for testing.

Great Rate Mate

Originally, Gym Owners would set a Percentage of Revenue that they would take from the Personal Trainers session at their gym (Plus a flat fee). If a Trainer made $100 in a session and the Gym Owner takes 30%, they split that money $70 to the trainer, $30 to the Gym.

Both Gym Owners and Trainers that we spoke to were firmly against that payment scheme. Our conversations showed that an Hourly rate per Trainee would be the best for both parties.

Owners didn’t want Trainers to charge higher prices behind their back to pocket some extra cash and Trainers found it much easier to price by the Trainee.

“I’ve done Revenue Share with one Trainer and it’s because he’s been here for 15 years, everyone else goes by the hour."

“Trainers are able to go around owners by charging Trainees  a different rate than they tell us”

The changes in this flow are reflected here:

Gym Owners can set different rates that will be applied to their Gym's available hours.

Owners then set available hours and apply rental rates set in the previous screen.

The conversations with Gym Owners allowed us to trim off some fat from the profile creation process. I wanted to make sure we had enough info to draw in Trainers, without requiring owners to answer too many questions.

Make 'em Pay!

The change to Paying per Trainee per Hour forced us to change the overall payment flow.

To keep user accountable, we have Trainers and Trainees put up their money while Gym Owners put up their time. Once the training session is completed, money is paid out to each party.

What originally looked like this:

Now looks like this:

Closing Thoughts

I found myself deeply interested in the Design System side of this project. I’ve never considered myself an organized person. Creating a solution for order in their wireframes however, felt more natural than other organizational methods I’ve used.

The creation of the system allowed the team to communicate our ideas with the Founders in a much clearer way.  We found that UX Concepts could be difficult to explain to them. Having an organized system to present those concepts with their app as the example made it much easier.

I see a bright future for mPwr. Test participants across the board were excited with the idea. Especially during COVID, more and more people are aiming to workout in smaller private groups.