CoachFit

An online platform to create a fitness community where people can find, book and meet trainers from around the world.
Overview

The idea for this product came from a conversation with a personal trainer that was looking to find a way to promote his business. He wanted to create a fitness platform to connect online people with professionals in the wellness industry online. I got together with a friend, who is a developer. We started working on this project by analyzing how the virtual fitness industry is changing during the pandemic.

ROLE
UX/UI Designer
TIMELINE
March - April 2021
TOOLS

PROBLEM STATEMENT

People are having difficulties staying engaged in an online fitness experience that is not personalized.

HYPOTHESIS

Developing a platform where users can have “mentors” in the fitness field to whom they can ask questions. The fitness professionals create personal workout plans based on available equipment and make sure the users are exercising with the correct form.

Projects Goals

I started defining the main focus of the project by analyzing the user's goal of having a user-friendly online experience combined with the business goal of developing a strong identity in order to attract new customers. I wanted to have different points of view to gain a more comprehensive idea of the objectives.

Create a personalized online fitness experience.
Create a responsive website.
Create a new brand identity.
Find the right trainer.

DESIGN PROCESS

The process began with learning the customer journey through market research and interviews to understand how competitors solve similar problems and users behaviors.

After analyzing the insights, I began conceptualizing the solution and creating user flows and wireframes. From there I started to design and prototype the website, testing the ideas, validating methods, and receiving feedback in order to improve page usability by capturing visual input from users in real-time.

Research

The main focus of the research was to discover how the pandemic changed the online training industry. Also, it was crucial to observe the users’ goals, difficulties, and motivators. Finally, I wanted to understand what keeps users engaged and how to improve the experience.

COMPETITIVE ANALYSIS
  • Assessment quiz;
  • Doesn't currently sync with all fitness devices;
  • Trainers fully certified;
  • Able to communicate anytime;
  • Recorded videos.
SECONDARY RESEARCH
  • For an in-person session, rates across the country can vary from around $50 to $164 per hour;
  • Most of the apps/websites use monthly plans for as low as $80;
  • Trainers can help people to reach goals faster and preventing them from getting injuries;
  • New technology could be an interesting aspect to investigate: tracking apps or AR/VR could definitely improve the online experience.

CONSIDERATIONS

One of the main goals of the secondary research was to determine the role that AR/VR plays in the online fitness market. The initial idea was to find a way to integrate this technology into the daily routine to help people correcting their form while exercising. 

The technology has been used in the industry in three ways:

  • entertainment: making workouts more fun by adding gaming elements (smart glasses);
  • educational aspect: using QR codes to learn how to use machines at the gym (phone);
  • real-time data: keeping people updated on what’s going on in the body while working out (wearable).

I decided not to focus on this aspect for the time being as the technology is not able to fully support the idea yet.

INDIVIDUAL INTERVIEWS & ONLINE SURVEY

I conducted 5 remote interviews and 8 online surveys about online fitness habits and preferences. The sample took into account men and women whose ages ranged from 20 to 50 that are using online apps to virtually workout.

Personalized experience
Users feel fitness apps are too standard and don’t take into consideration personal preferences.
Correct form
They are not sure if they are keeping the correct form while exercising.
Long-term commitment
Users have a hard time staying engaged and committed long term.
Feeling alone
They really miss human contact, and working out by themselves is difficult.

PARTICIPANT #1

" The form is a concern as it's hard to correct it by myself. Also, I need someone to constantly motivate me. "

PARTICIPANT #2

" I spend so much time finding the right class on Youtube. I really would like a structured plan with personalized exercises. "

Persona

Based on the research findings, Valerie has been defined as the primary persona that would represent the user archetype for future decision making and the development of the design.

User Flow

I started empathizing with Valerie by creating two scenarios to see how she would interact with the website. In the first scenario, she’s a new user whereas in the second, she’s a recurring user. In both, I tested her on how she would book a session with a trainer.

Sketches &
Wireframes

Once the key elements to design were defined, I began sketching the pages of the website and translating them later into wireframes.

SKETCHES | Homepage, Trainer List, Trainer Page

The wireframes were designed to build the architecture of the website and to analyze the hierarchy of the content that I wanted to display based on my findings.

HOMEPAGE | WIREFRAMES
TRAINER PAGE | WIREFRAMES
HOMEPAGE | WIREFRAMES
TRAINER PAGE | WIREFRAMES
Concept Testing

After conducting concept testing on two versions of the homepage and the logo, the blue color and the name CoachFit resonated more with 70% of the participants.  

LOGO
HOMEPAGE
Branding

Coachfit wants to be a classy, dynamic but comforting brand. The color palette conveys trust and stability while the blue-purple shades aim to boost productivity and encourage people to work out more.

MOODBOARD
LOGO
COMBINATION MARK
PICTORIAL MARK
TYPEFACE
HEADINGS
BODY TEXT
BUTTONS
COLOR PALETTE
PRIMARY
SECONDARY
UI Design

All the visual explorations of colors, moods, and styles are expressed in the final responsive design.

HOMEPAGE | DESKTOP, TABLET, MOBILE VERSION
TRAINER LIST PAGE | DESKTOP VERSION
TRAINER PROFILE PAGE | DESKTOP VERSION
BOOKING PAGE | DESKTOP VERSION
Usability Testing

Once the prototype was ready, I conducted 5 remote usability test via Zoom and 10 via Maze. I asked participants to complete a few tasks on the prototype I created in Figma. I wanted to observe how users interacted with and navigated the website.

View Prototype
OBSERVATIONS
  • 100% of users can easily identify what the website is;
  • 100% of users find the color palette in line with the product;
  • 100% of the users can easily complete all the tasks requested;
  • 20% of the users are not sure if they are committing to a monthly plan or a pay-as-you-go session;
  • 20% of the users think the round blue icons (homepage and profile page) are clickable.
INSIGHTS
  • Users are more inclined to select trainers with a high rating;
  • Users would be drawn into picking programmed group sessions if the topic is interesting;
  • A modern and fast checkout process with Venmo or Paypal is the favorite payment method;
  • If users liked a trainer, they would pay for a package with multiple sessions;
  • Users would like to have filters automatically applied (based on their profile) during the trainer research process.
Revision

I implemented the prototype based on the usability testing findings:

  • Changed the hero image;
  • Activated the find a trainer CTA on the global navigation;
BEFORE & AFTER
  • Modified trainers' cards;
BEFORE & AFTER
  • Added radio buttons to sorting;
BEFORE & AFTER
  • Added checkboxes to filters;
BEFORE & AFTER
  • Created options for booking multiple sessions;
  • Created a shortcut to start the sign-up process from the book a session CTA.
View Revised Prototype

TAKEAWAYS

Despite the fact that gyms and studios will start to reopen soon, people have gotten used to online fitness training. They can work out whenever and wherever, creating a very flexible schedule without physical limitations. There’s so much room for improvement in this field, and AR/VR can play a really interesting role in creating a more personalized virtual fitness experience.