Spotter Fit: A Product Design Case Study

Focusing on my design process at Spotter Fit

Spotter Fit: A Fitness Companion App

Introduction

In early 2020, the world was impacted by the Coronavirus pandemic. We had to adapt to being able to live in quarantine. With gyms and fitness centers closed indefinitely, there was a need for people to find options in how they worked out at home. This brought an opportunity for myself and my colleagues to create Spotter Fit.

Team and Role

The prospect to start the company came from an incredible Software Developer colleague of mine, Melanie Garcia. As well as our Fitness Consultant Cristian Leuke. As a co-founder of the company, my primary role was to oversee direction of all Product Design and Marketing related initiatives.

Research

The idea for the Spotter Fit platform came from pain points in the workflow Cristian ran into when training clients. Cristian would need to utilize various applications in order to organize how he corresponded with his clients. We found an opportunity to find one place trainers and clients could formulate workout plans together.

We reached out to various trainers and their clients in order to get a idea of how they communicate and track workout plans. Most participants shared the same issues in workflow and properly tracking information that trainers provided. We gathered the feedback from the participants to formulate our requirements to develop a mobile app to help solve these issues.

Trainer View (Left) vs. Client View (Right)

Users

We defined two users for the platform. The first set of users being Fitness Trainers. These users are the primary points of contact and interaction. Their user needs were to utilize features that would allow trainers to add clients to their list of contacts, assign configurable workout sessions, track workout progressions, and provide feedback to clients.

The second set of users of the platform were their clients. The user needs of a client were to utilize features that allowed them to view assigned workouts, begin and complete previous workouts, review activity of completed workouts, and provide feedback to their trainers.

Design

Our team took an agile approach to the design and development of the Spotter Fit mobile app. We defined minimum requirements for an MVP, and reacted to them in an accelerated execution. We did not know how long the pandemic would last, and the opportunity to release a product was narrow.

User Flow — Add Client Home Workout

User Experience

User flows were created to give an in-depth outline of features within the app, and how each feature tied into one another. Flows were created for both the Trainer and Client users.

Trainer View — Add Exercise Designs

User Interface
Inspiration for the mobile app interface was based off of various fitness and entertainment apps such as Nike Runner and Spotify. We wanted the users to have familiarity of using Spotter Fit as compared to some of their favorite apps. The interface uses high contrast and impactful fonts to help users effectively navigate the app and create exercise programs for clients.

Client View — Complete Homework

Design System

Font Ramp

Font Ramp for the app

Roboto Condensed was selected as the main font used in the app for its clean and legible use for all user types. As well as its modern look to appeal to sports and fitness users.

Color

App Color Usage

Colors used within the app inspired by various fitness apps. Throughout the app, the dark background and high contrast text help give a sense of activity for users to easily flow through.

Iconography

Iconography used within the app were based off of Google Material Design icons for users to easily recognize what action they can take.

User Testing

A month long beta test was given to 20 different participants to give their impressions of the app. We quickly identified various bugs through user testing and mapped out future feature use cases such as creating workout templates, messaging clients, and client performance stat tracking.

Release and Takeaways

After a year of design and development work through out 2020, the app was finally released to the Apple Store in January 2021. Our team released the app with a subscription model in hopes of generating revenue for premium users with more than 20 clients that they manage.

The app release was a big undertaking for our team who had never released a mobile app on our own. Each member since then has gone on to other projects, and the app was removed from the app store in mid 2022.

--

--

Hello! I’m Gabriel Mendoza. I am a Product Designer with an emphasis on User Interface, Interaction, Visual, and User Experience design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gabriel Mendoza

Hello! I’m Gabriel Mendoza. I am a Product Designer with an emphasis on User Interface, Interaction, Visual, and User Experience design.