This project started with the idea of providing a solution in the fitness world for trainers and nutritionists who do not have the budget or know-how to build a website or application.Without a doubt, it has been a challenging project and it has taught me the importance of the role that UX designers play in today's world since one of the main reasons why people abstain from launching their websites is because they are not sure where or how to start. Being able to generate ideas and provide solutions for these people fills me with a lot of inspiration to continue on this path and continue helping through UX Design.

Final Thoughts

At the time of writing, the project is still currently ongoing. In the coming months, I will continue designing the pages that are still missing from the other Coach Pass categories (Branding, Messages, and Profile) and as I progress, I will carry out usability tests to find out how users interact with the website and identify areas for improvement.In order to effectively communicate the design to the project developer, I will write and organize my design deliverables and be available to help with any follow-up questions.

Next Steps

During this phase, the main objective was to synthesize the findings of my research and define who I will create the website for.Created: User Persona, Empathy Map, Storyboard, Project Goals, Feature Map, and Site Map.

To synthesize the qualitative data gathered during the surveys and user interviews, I created an empathy map for each persona to identify patterns among users, uncover insights, and generate needs.It was clear from this Empathy map that coaches and nutritionists need a platform to track their clients' progress and communicate with them effectively to promote their personalized training and nutrition plans. On the other hand, their clients want to feel supported and motivated by their coach in order to achieve their fitness goals.Therefore, to design a product that meets the needs and expectations of the user, I will prioritize the major areas focused on the empathy map, making sure to keep both users in mind during the ideation phase. To see the full empathy map, click on the button below.

Empathy Map

Based on the goals I defined, I created a feature roadmap for Coach Pass in order to help prioritize features that I would design for the next phase of this project in order to meet those goals.These are some of the features I categorized as must-have (P1) that provide a better understanding of the “big picture,” which allows me to focus on the most important tasks and make fast, autonomous decisions.

Feature Roadmap

Through my research, I had a good understanding of the key needs people would have when it comes to a fitness program platform. 
Two distinct personas with different needs and expectations were formed to help me focus on tackling the most important problems in order to address the major needs of the different user groups.The first persona is Max. He is a fitness trainer whose job is to help people achieve their fitness goals through monthly challenges, where he provides a complete workout routine for each day and a meal plan for his clients.

The second persona is Emily. She is a busy project manager who is starting a healthy lifestyle with the help of her trainer. She receives her exercise routine and meal plan via email.

Persona

Business Goals

Business-User Goals

Business-User-Tech

I decided to create a diagram in order to define the business and user goals that will serve as a guide for the future development of the platform and a rubric for determining what features to include on the website.

Technical Considerations

Project Goals

User Goals

Empathizing with users and defining goals helped me to understand their expectations of the Coach Pass website. This leads me to the next question: What is the first thing a user would notice or click on? Based primarily on competitor analysis, I created a sitemap to act as a framework for the different pages and navigation of the website.

Site Map

To better understand the user environment before starting with the design of the Coach Pass platform, I decided to create a storyboard that reflects the current problem of Max as a coach, and also where Emily as a client feels identified.Involving the two perspectives and empathizing with them will help me create a platform capable of meeting their needs and being better received by users in the future.

Storyboard

Define

#FF5A5F

The idea of the creation of the Coach Pass platform started after I followed different fitness accounts on social media where I noticed that many coaches and nutritionists promote their plans through social networks and deliver the programs to their clients in PDF documents, monitoring their progress through WhatsApp or email.I scoured the internet to find the existing options that could help them to create their plans and deliver them to their clients in a clear and detailed way, where their users could easily access the information. I began to identify the strengths and weaknesses of existing platforms, which provided me with more information about the current context of the direct and indirect competitors to help me identify opportunities to improve on Coach Pass's product design and strategy.

Competitive Analysis

Fitness trainers and nutritionists use training plans as a tool to work with their clients, track progress and make adjustments as needed. Many trainers and nutritionists who are still starting their business, do not have a website or platform to design, organize and deliver training programs to their clients.During this first stage of the project, research was very important to gain better knowledge about the tools that many of them use to promote their plans and deliver them to their clients, as well as understanding their motivations, needs, and frustrations in order to develop a platform that allows them to grow their business and achieve more credibility with their customers.

Research

Research Goal

Research Methodologies

Research Objectives

I conducted primary research on fitness trainers and nutritionists by creating an online survey and sharing it in fitness communities on Facebook and Reddit. I received 15 responses. This survey was conducted to learn about the goals, motivations, and pain points that trainers and nutritionists face when creating their training and nutrition plans for their clients. The survey was created in Google Forms and contained open and closed questions.The key questions were:

Surveys

Empathize

#E76214

After learning a little bit more about the journey of a fitness coach through the surveys, I decided to interview some people who currently access training and nutrition challenges to find out their motivations and the pain points they face when they start fitness programs.I interviewed 4 people (3 women and 1 man), between 18 and 33 years old. During these interviews, I asked open-ended questions to learn as much as I could about their expectations, in order to create a platform that meets their needs as well. These were the insights that I gleaned from those interviews.

Frustrations

Motivations

Needs

User Interviews

For the fitness and wellness industry, logos can not only attract customers, but also have the power to inspire confidence, reflect a sense of well-being, and project brand vision. Coach Pass wants to be an inclusive, inspiring, driven, and supportive brand.As Coach Pass is a new company, the brand was part of this design journey. I started to sketch some ideas of what the logo could look like. After that, I tried different vibrant color palettes. Choosing the right colors can increase brand recognition by up to 80%. Logo colors can influence potential customers and have a huge impact on how they perceive the Coach Pass brand.I decided to create a simple logo using two different colors that will reflect Coach Pass' mission: <ol><li>Orange: confident and friendly.</li> <li>Blue: reliable and trustworthy.</li></ol>

Branding

With my personas and must-have features defined, it was time to ideate and come up with ideas guided by the user problems that were defined during the empathize phase. 
During this phase, I focused on the exploration and identification of potential solutions for the creation of the Coach Pass platform.

With this user flow in mind, I started visualizing past the MVP through wireframing as much as I could. I had to take into account that coaches and nutritionists need a platform that is easy to navigate and customize, and at the same time, they require certain features that are essential for the development of their work to be included.After studying some of the most common design patterns used by current websites that offer similar services, I started sketching low-fidelity pages that allowed me to capture my ideas quickly. These are a few preliminary sketches that I did:

Desktop Homepage

Client Management

Coach Pass Library

Tables

Sketches

I created a style tile by designing and adding various symbols that were reused throughout the platform, such as typography, colors, buttons, and images. The style tile serves as a synthesis document for brand ideas that enables efficient yet intense design explorations and helps capture the personality of the Coach Pass brand in a visual language.

Style Tile

By creating task flows that focus on the key features of the Coach Pass website, I was able to better understand Max's overall journey interacting on the website. I mapped user flows whose scenarios correspond to the established tasks:<ol><li>Create a new training program</li><li>Assign an existing or new program to a client</li></ol>Below is an example of the user flow based on the first task. The complete task flow can be viewed by clicking the button.

Task Flow

Ideate

For coaches and nutritionists, it is crucial to access the Coach Pass platform from any device, given that many of them do not work from home and they do not always carry a computer with them.As the designer of this new website, I had to ensure that users had a consistent experience across different devices. I started the product design from desktop and then proceeded to the mobile and tablet designs. I decided to do it in this order because according to the surveys I conducted during the research phase, 60% of trainers would utilize Coach pass on a desktop to track client information and update their programs.

Responsive UI Design

Using the style tile as a guide, I created a UI kit to help me achieve consistency in the Coach Pass website design process.

UI Kit

In view of the different pathways a user can take when interacting through the Coach Pass platform to create a fitness program, I created a user flow to explore the scenarios the users would be in and the different paths and decisions they would encounter when trying to complete the key tasks defined.In this user stream, I highlighted one of the most relevant categories on the website, which is the library of exercises and routines. These libraries contain the information trainers need to create their programs and "fitness challenges". The nutrition section will have a similar flow so that users can navigate through the website in an intuitive way.

User Flow

Once I had a visual direction of the layout, I started to add more detail and precision to the sketches by turning them into mid-fidelity wireframes. Still focusing on navigation and functionality, I designed in grayscale to minimize distraction.

Low Fidelity and Responsive Wireframes

Coach Pass will be a platform designed to help coaches and nutritionists without their own websites and at any stage of their career create and provide training and nutrition plans to their clients at a fraction of the cost compared to contracting with a website or app development agency.

Challenge:

Coach Pass is a startup that proposes the creation of a platform where fitness coaches and nutritionists will be able to plan, organize and control their programs, allowing them to customize their plans and deliver them to their clients in a clear and detailed way with easy access to information.

Project Scope:

Role:

Create a responsive website for Coach Pass that will allow coaches and nutritionists to personalize their website through its digital platform, incorporating their personal brand and their training and nutrition plans.With this tool, they will be able to track individual client progress, easily communicate with them through a messaging feature, and present their plan information in a clearer and more accessible way.

Solution:

Time:

Figma, Whimsical, Photoshop, Adobe Illustrator

Tools:

With all the high-fidelity pages designed, I built the prototype using Figma in order to observe how users interact with the site during usability testing and identify areas for improvement.

Desktop Prototype

Prototype

Overall, the design worked well for all users. They were able to complete the assigned task in the exercises and workouts sections. All users created a workout program and assigned it to a client without any issues. Additionally, they interacted with and explored other sections of the prototype to find out what other Coach Pass offers.However, there were some areas for improvement. I wrote the participant's observations made during the test and grouped them by common patterns in order to make design improvements and create an enjoyable product for users.

Affinity Map

The goal of the usability test was to understand how real users interact with the Coach Pass website and make changes based on the feedback.Once I had this feedback, I made the corresponding revisions and created the final prototype.

One of the aspects where there was confusion among users was with the icons on the side navigation bar, especially in the clients, nutrition, and profile sections.I decided to replace them with more intuitive images by picking a concrete object for the icon that most users can easily recognize. Additionally, I included a text label in the hover state to help overcome the ambiguity and clarify its meaning in that particular context.

Icons:

1. In the Create a new program section, I reduced the size of the table so users don't have to scroll down as much to add daily workouts.

2. Initially, I used the color #F5F7F6 for the stroke of the tables. During usability testing, some participants tested the prototype on large screens and were unable to see the lines clearly. I wanted to keep the lines a light color to balance with the orange and dark blue colors that are the primary and secondary colors of the Coach Pass brand. Based on that, I decided to use the neutral color #282117, reducing its transparency to 15%.

Tables:

Priority Revisions

Test

I conducted a usability test involving four participants to observe how users interact with it and to identify how I could improve the design. User tests were done via in-person as well as video calls (using Zoom).The main objectives of the usability test were:<ul><li>To test the participant's first impressions of the coach pass platform.</li><li>To observe how users navigate through the Coach Pass platform to create their fitness programs.</li><li>To identify any pain points that the users may have during the process of creating a workout program and assigning them to a client.</li><li>To evaluate the overall usability of the Coach Pass platform and identify areas for improvement.</li></ul>To read the full usability test plan, click on the button below.

Coach Pass

A functional & responsive platform for fitness coaches and nutritionists