Designing a Hybrid Fitness and Social Media App

Service

Product Design

The Challenge

Vernon Aziah founded OG Fitness in early 2020. Within a few weeks, he had more clients than he knew what to do with. His charisma and passion oozes through everything he does. This helped him quickly become major influencer in the D.C Metropolitan fitness community. The only thing more impressive than the content he puts out are the results he achieves for his clients.

On many occasions, he’s helped clients drop multiple inches, gain tons of muscle, or lose dozens of pounds in ~30 days. Vernon is someone who takes pride in everything he does. He’s always looking for ways to serve his clients and community. Throughout the course of his business, he noticed a few bottlenecks in the client customer journey that he wanted to address:

  • Discovery

    It’s hard to find the right trainer, there aren’t many well built platforms dedicated to this.

  • Engagement

    Once you find a trainer, it’s hard to manage your relationship. Many resort to using text and instagram to send updates.

  • Management

    This is overwhelming for trainers and disorganized for clients.

The Solution

Vernon saw an opportunity to design a client/trainer app that would solve all of those problems. OG Fitness is a fitness companion app that gives people a personal trainer and community in their pockets.

For Clients

The community and content they need to take their fitness journey to the next level. They can track their progress and connect with your trainer and other like minded people on the same journey.

For Trainers

A dedicated platform to grow their brands, share content, create interactive workout plans, sell products, and manage clients/scheduling. 

User Experience

We began with a discovery session to align on the scope of the app and desired functionality. This included an audit of existing alternatives and competitors. From there we helped them develop a customer profile to align on the people problems and our proposed solutions. 

Next we used those people problems to frame the jobs to be done, which fed into the user flows and information architecture.

Then we bring it all together with a visual design that speaks to the brand ethos.

Information Architecture and User Stories

We started by conducting a brainstorming exercise to design a customer profile to guide the process. It was important to align on the people problems we’re solving for before beginning the design.

Then we outlined how the app will be structured. We mapped out the user flows by defining the jobs to be done and capturing all of the steps involved in fulfilling each job. We map out the content that the user is presented with and the actions they can take based based on where they are in the flow. At each step, we refer back to our target persona, Alexis, to put ourselves in their shoes and guide our thinking. This helps ensure we design a product that serves their core needs.

Alexis signed up for OG fitness because she wants to get results just like Vernon’s other clients. So every time she works out or makes a meal, she takes a photo to track her progress. This is so she can go back and see how far she’s come and this also creates accountability with her trainer. 

She can choose to share these photos with all of her network on the app (other clients and trainers) or she can share this privately with only her trainer.

Her trainer would get a notification every time she posts a photo. 

Photos can be categorized as meal photos, progress pics, or just general content.

Sometimes Alexis wants some inspiration throughout the day so she opens up the app to see content posted by her fitness community and trainer, just like a curated fitness instagram feed. She can use hashtags to filter through the content in case she wants to see transformation, meals, quotes, inspiration, etc.

Whenever Alexis is ready to workout, she’ll open up her up, head to the explore feed and look for the workout that’s right for her. She’s not on any specificic program right now, she just knows today is a cardio day. So she searches for a good cardio routine and then does the exercises as shown in the app.


Individual exercises are organized into workouts and workouts are organized into training programs. Alexis can filter through different types of exercises, workouts, or programs based on what she needs at the moment. 

She’s going to be using the app right before and during her workout, so she’ll be on the go. So it’s important to make things visual and easy to skim/tap through so she can get what she needs and focus on her workout

In addition to workouts, she can also use the app for see people training near her, so that she can join in on group sessions based off of her schedule. 

She can also look thru all the meal photos posted by the community in case she wants ideas on what to cook next. 

Or she can search through the directory of trainers to find the trainer and program that’s right for her.

 

Alexis goes back to her profile every once in a while to see how far she’s come. She likes to click through her photo reel to see the mirror photos after each workout. And all the great food she’s been eating. She can also easily click to manage her account and schedule.

Alexis can train at home, but she loves going into the gym. She likes training in groups because it helps her stay accountable and it’s nice to have partners on the journey with you. 

So she wants to see which sessions are available on a daily basis,. She also wants to see the full calendar so she can book sessions in advance and plan her week around her training. 

She wants to be able to choose between group and individual training.

She should also be able to see her personal schedule and past sessions she’s attended. This way she has one to place to see her track record and book training as needed.

All of the content in the app is going to be gathered from trainers. Alexis and other clients want the app so that they can get access to content from their favorite trainer.

Trainers should be able to upload this content from their computer or their phone.

 This section outlines all of the content trainers will be able to upload into the app. This also shows the taxonomy of information and the different types of information that the app will process.

UI Design

Visual Design

Everything about the brand and personality says strength, encouragement, striving. This is brought to life by: 

  • Vernon’s charisma, high energy, and desire to serve
  • The Go-getter attitude of the entire OG tribe
  • The accelerated and transformational results Vernon creates for his clients in record breaking time

We communicate this through the design using the following:

  • A dark themed and high-contrast design
  • A strong, punchy and impactful font
  • Creating movement throughout the design to speak to the “Active” theme. 

Interactive Online Workouts for Clients

Whenever you’re ready to break a sweat, we have hundreds of workouts and programs waiting for you. From Cardio, to Strength Building, you name it. All complete with instructions, videos, and a schedule.

A Tool for Trainers to Build Their Businesses

Whether it’s virtual or in-person, creating fitness plans and programs has never been easier. List them for free or charge as much as you want. You can sell them right on your profile.

Have a project in mind?
Let’s get it poppin'