SaaS

Customer Relationship Management Software

GymBox

An iterative process

This is an on going project that you’re just seeing the beginning of. As the only designer I’ve gotten inspiration from Github, PostHog and various other references.

Treating any new project like a true beginner, in this case I really felt like one, I did all of the research and preparation I could think of. Many iterations occurred, and each time I learned something new and was able to adjust my view of this product.

I’ve designed enough for the GymBox Team to get this SaaS product ready for users, and there is much to come as we continue to expand its uses.

TEAM

Erin (Me) : UX Design Lead

Dillon : Co-Founder / CEO

Andrew : Co-Founder / CTO

Chris : Principle Engineer

IMPACT

Conducted Industry Research

Collaborated to design branding elements

Created High-Fidelity Designs for GymBox MVP

DESIGN TOOLS

Figma

Discord

PROBLEM

Gym Owners and Managers often have to use a mix of applications in order to run their gym effectively. GymBox wants to solve this problem and fill in the gaps to become the one stop shop for gym owners or individual fitness instructors. But we are starting small - the MVP includes taking payments through Stripe, using their API’s to create subscriptions and purchase options for classes or other products, member management, and member communications.

WHY THIS PROBLEM SPEAKS TO US

A mix of fitness backgrounds and a knack for problem solving sets apart the GymBox founders. Beginning, wanting to make the lives of owners, coaches, members and potential members fitness journey easy and more tailored to the individual.

We are building the ultimate and most complete set of solutions for gym business owners. We do this with the goal of making personal fitness the most accessible and enjoyable lifestyle change for everyday people as physically possible.

color pallet.png
Text Styles.png
buttons.png
input fields.png

Stepping Into

Something New

Through experimentation and iteration I discovered what worked for GymBox dashboards - and what did not

Initial attempts at dashboard design for the home dashboard included exploring different layouts.

And

Attempts to include as many data points as possible, resulting in a crowded and confusing business health dashboard.

Preparing to design my first dashboard

Research on what should be included in different types of dashboards, observing competitors, getting inspiration from sites like Dribble, and considering what kind of visualizations and metrics would actually be helpful.

The goal is for gym owners to be able to see their dashboard and quickly find what they are looking for, understand that information, and know how that information will impact their next step. We want to deliver the data that matters to these owners and is easily digestible.

Revenue Dashboard that shows Total Revenue, Customer Acquisition Cost, Number of New Members, and Revenue Per Customer. For these metrics there is a CTA button for the user to enter their Target or Goal in this area. Year-to-Date Overview and Revenue

Revenue Dashboard that shows Total Revenue, Customer Acquisition Cost, Number of New Members, and Revenue Per Customer. For these metrics there is a CTA button for the user to enter their Target or Goal in this area. Year-to-Date Overview and Revenue Source per Month give a more birds eye view of the company, where money is going and how much is coming in.

The Targets & Goals page with a tool tip, describing this feature.

The Targets & Goals page with a tool tip, describing this feature.

The top card displays the view before targets are entered with the empty input fields and shows that you can view the corresponding graph to the target you are entering. Bottom card displays the view once targets have been entered. Target Achievemen

The top card displays the view before targets are entered with the empty input fields and shows that you can view the corresponding graph to the target you are entering. Bottom card displays the view once targets have been entered. Target Achievement % and Forecast end-of-year Target are calculated based off the the Target that the user enters.

Once Targets have been entered. The Dashboard UI updates to include What their set target is and their current achievement of that target.

Once Targets have been entered. The Dashboard UI updates to include What their set target is and their current achievement of that target.

This Home Dashboard is designed past the MVP when we are assisting with leads, updates on member statuses, schedules and class sign-ins. The cards are equipped with drop downs where you can change what is displayed on your dashboard, arrows to naviga

This Home Dashboard is designed past the MVP when we are assisting with leads, updates on member statuses, schedules and class sign-ins. The cards are equipped with drop downs where you can change what is displayed on your dashboard, arrows to navigate you to that section, and a scroll bar to view more information.

Here you can see the calendar expanded with options to add an event, hide the calendar, or navigate to the Calendar tab.

Here you can see the calendar expanded with options to add an event, hide the calendar, or navigate to the Calendar tab.

When the user first visits their Membership Dashboard they have the option to either browse Subscription Presets (a feature that is not part of the MVP, but is something we will experiment with once we have users). The MVP will include the Membership

When the user first visits their Membership Dashboard they have the option to either browse Subscription Presets (a feature that is not part of the MVP, but is something we will experiment with once we have users). The MVP will include the Membership card with the CTA to create their first membership.

The Idea of Subscription Presets is to help them get ideas of the kinds of memberships they can create. It could also help them save time if they want a selection of tiered pricing but don't want to manually create them. The Select and Edit button wi

The Idea of Subscription Presets is to help them get ideas of the kinds of memberships they can create. It could also help them save time if they want a selection of tiered pricing but don't want to manually create them. The Select and Edit button will allow them to make any personalizations desired and save it as an Active Membership.

Here we see what editing a subscription looks like. Allowed to edit any of the inputs gives them complete freedom and personalization to an existing layout.

Here we see what editing a subscription looks like. Allowed to edit any of the inputs gives them complete freedom and personalization to an existing layout.

Once memberships are created, the user is able to inactivate a membership. Inactivating prevents having to delete a membership every time they do not want a specific membership to be displayed for purchase.

Once memberships are created, the user is able to inactivate a membership. Inactivating prevents having to delete a membership every time they do not want a specific membership to be displayed for purchase.

A potential pop-up for membership settings. Displaying radio buttons for different actions that can be taken that are not included on the Membership Dashboard.

A potential pop-up for membership settings. Displaying radio buttons for different actions that can be taken that are not included on the Membership Dashboard.

Knowing we wanted Created Memberships to be grouped together based on a commonality, we decided to group them based on memberships that recur and memberships that do not recur.

Knowing we wanted Created Memberships to be grouped together based on a commonality, we decided to group them based on memberships that recur and memberships that do not recur.

Once the user selected to Create Membership, they would first be asked if it is a Recurring or Non-Recurring Membership. This helps get one of the bigger and possibly confusing questions out of the way first.

Once the user selected to Create Membership, they would first be asked if it is a Recurring or Non-Recurring Membership. This helps get one of the bigger and possibly confusing questions out of the way first.

When the user hovers over an item it will lighten to indicate it is an area they can select.

When the user hovers over an item it will lighten to indicate it is an area they can select.

This is the sequence of questions asked for a Non-Recurring Membership. They will be asked how often a member will be charged for this membership (daily, monthly or one-time), how many classes are included and how long this non-recurring membership l

This is the sequence of questions asked for a Non-Recurring Membership. They will be asked how often a member will be charged for this membership (daily, monthly or one-time), how many classes are included and how long this non-recurring membership lasts.

For a Recurring membership, the user is not asked for the length of the membership. Recurring memberships are ongoing until the member cancels. The charge frequency is changed from daily, monthly, or yearly to include the option for a one-time, yearl

For a Recurring membership, the user is not asked for the length of the membership. Recurring memberships are ongoing until the member cancels. The charge frequency is changed from daily, monthly, or yearly to include the option for a one-time, yearly recurring payment.

Landing Page

The Landing page was the first screen designed for this project. Experimenting with a dark and light modes in the cool toned pallet. As you can see it's not the perfect design. But it was the start I needed as a designer to put the pieces together for the UI Design. Playing around with a light version of the color pallet was good practice - but we are sticking with the dark pallet.

Desktop - Dark.png
Desktop - Light.png