My Trainer App
My Trainer is a B2C SaaS fitness mobile app designed for iOS, to provide personalized workout and nutrition plans that help users reach their fitness goals.
A brief overview
My Trainer is an app designed to cater to the unique needs of people facing common challenges in their fitness journeys. From those who struggle with finding the time to hit the gym, like the busy professional with a packed schedule, to someone who experiences anxiety at the thought of working out in a public gym setting, My Trainer offers a flexible, personalized solution. It also addresses the frustration of gym-goers who feel overlooked by their personal trainers or aren’t getting the attention they need to meet their fitness goals. In addition to workout routines, My Trainer helps solve the problem of working out without a healthy meal plan to suite. It helps users improve their overall health by providing tailored diet plans, ensuring that nutrition supports their workout regimen.
By bringing together convenience, privacy, expert guidance, and nutrition, My Trainer transforms the way users approach fitness, making it more accessible, personalized, and effective.
The problem
Despite the increasing popularity of fitness, many people struggle to maintain a consistent workout routine due to various reasons. For some, the fear of judgment and anxiety associated with exercising in public environments can be overwhelming, causing them to avoid the gym entirely. Others struggle to find the time to commit to regular workouts due to demanding schedules, leading to inconsistency and frustration. Additionally, a lack of personalized support and guidance from trainers can leave users feeling lost in their fitness pursuits, while those trying to achieve specific health goals may find it difficult to navigate dietary choices effectively.
The solution
My Trainer is designed to tackle these specific challenges head-on by providing a tailored fitness experience that prioritizes user comfort and accessibility. The app offers virtual training sessions that users can access from home or any private space, removing the intimidation factor associated with public gyms. It connects users with dedicated trainers while fostering an environment that motivates and encourages consistent progress. Moreover, My Trainer incorporates customized meal plans that guide users in making healthier dietary choices, directly contributing to their fitness achievements. By addressing both the physical and emotional barriers to fitness, My Trainer empowers users to reclaim their health and confidence.
The first step-Research
User research is a crucial first step in my design process, as it helps me learn about and understand the target users I'm designing for. It also allows me to uncover the real challenges and needs of users. To gain insights into their experiences, I employed both qualitative and quantitative research methods. During the qualitative phase, I engaged with five members of the gym I attend, conducting individual interviews to explore their thoughts and feelings about fitness. These conversations provided valuable context and allowed me to observe their behaviors and personalities, increasing my understanding of their needs. For the quantitative aspect, I launched an online poll aimed at pinpointing my target audience. This included individuals who seek personalized training at home or in the gym, those who have stopped exercising, and individuals interested in improving their eating habits to achieve specific health goals. I prepared quantitative research questions that were sent out as surveys, and I recorded six responses. My next step was to combine these responses from both methods and sort them to gain clearer insights, meaningful understanding, and identify similar patterns. To do this, I employed the affinity mapping method where I grouped the responses, finding patterns and similarities. By evaluating these findings, I laid the foundation for the subsequent stages of my design process.
Questions I put together and used to perform the qualitative user research with gym members↑
Survey questions that were sent out during the quantitative user research to pinpointed target users↑
After the first step, what next?
Before we move on to the next stage, let me introduce you to the approach I used for this design: the design thinking process. The diagram above provides an overview of this approach. The first stage, "Understand," involves conducting user research to learn about and understand the users and their needs (which I previously talked about). The next stage, "Define," is where I use the data from the first stage to clearly define the users' needs, empathize with their experiences, and identify the features that would be most beneficial to them. Next, in the define stage, I'll introduce the user personas and empathy maps created to further empathize with the users.
User Personas and Empathy maps
With the insights gathered from the research phase, I developed user personas and empathy maps to deepen my understanding of the users. This approach allowed me to view users as individuals with unique behaviors and goals, ensuring that the design would address their specific needs. The personas represent a diverse range of users, including full-time professionals, part-time exercisers, and newcomers to fitness. For the purpose of this case study, I will focus on the newcomers and part-time exercisers.
After creating the user personas, I revisited the insights gathered during the user research to pinpoint the specific needs and challenges faced by each user group. While the user needs were initially identified during the research stage, this section focuses on highligting those needs and the brainstormed solutions in the context of the personas. By understanding their pain points, motivations, and goals more deeply, I was able to prioritize the most critical needs that the design should address, ensuring that the solution is both user-centered and effective.
Defining flows
With the user needs clearly defined, the next step in the process was to map out the user flow and information architecture. This stage focuses on structuring the features derived from the brainstormed solutions, ensuring they align with the users’ goals and provide a seamless experience. By defining the user flow, I aimed to create a logical and intuitive journey that guides users through the app, while the information architecture ensures that content and features are organized in a way that is easy to navigate. Together, these elements form the backbone of a user-centered design, ensuring that the solution effectively addresses the identified needs.
User flow↓
Information architecture↓
Wireframes
With the user flow and information architecture established, the next step was to bring these concepts to life through wireframes. Wireframes serve as the blueprint for the design, providing a visual representation of the layout, structure, and functionality of the app. At this stage, the focus was on organizing key elements and features based on the user flow, ensuring that the design is intuitive and easy to navigate. These mid-fidelity wireframes helped to outline the core interactions and allowed for quick iterations before moving into more detailed designs.
Mid-fidelity wireframes
High Fidelity Designs
Using the structure of the wireframes as a visual foundation, I designed the high-fidelity designs. In this phase, I added key visual elements such as color schemes, typography, and branding to enhance the overall aesthetic and user experience. These design choices were carefully made to ensure consistency with the app’s goals, making it not only visually appealing but also intuitive and user-friendly. The typography and colors were chosen to portray an energetic interface, which is in line with one of the goals of the app. I've outlined some relevant high-fidelity screens below.
Sign up screens
As always, we start with the sign-up screens, featuring easy sign-up options with Google and Apple. These screens keep the user informed with important information (e.g., password requirements) to save time and reduce user frustration. These screens also ask for only essential details to reduce sign up time. Additionally, the loading screen displays work out related motivational quotes to keep the user motivated during load times.
Onboarding for personalization
These screens were designed to address the need for personalization. The questions are carefully researched to help users customize their workout routines and achieve their goals. Additionally, the app assists users in finding a balance between work and fitness by offering time flexibility, allowing them to receive push notifications that remind them to work out at their preferred times.
Tracking Workouts
One of the highlighted user needs was the ability to track fitness progress. These screens were designed to help users monitor the time spent on workouts, the exercises completed, consistency over a period of time, and calorie intake for those who are mindful of their diet.
Workout options
Although users receive daily recommended workouts based on the information they provided during onboarding, the workout section was designed to offer them choices. They can preview other workouts from their trainer or different trainers and decide to try them out. This is not limited to a specific type of training; users can also explore exercises related to yoga, meditation, and more. Additionally, they can filter to view content specific to their selections.
Meal plan
The meal plan was designed to recommend meals to users based on their dietary goals. During research, I discovered that one pain point users faced was deciding what to eat at different times of the day, so I added meals specific to various times of the day. It also includes recipes with measurements to help users follow along more easily and assist with calorie tracking. If a meal is not suitable at a given time, the user can choose to change the meal and receive another recommendation.
Work out without music- blah👎
One of my favorite features of the app is the option to integrate favorite music apps. Music significantly enhances motivation during workouts, so including it in the app was a no-brainer. I designed the app to be a comprehensive fitness package, and the ability for users, especially those who are accustomed to their routine, to add their music is something that users (testers) found very helpful.
Profile screens
Recognizing that this is a software-as-a-service (SaaS) product, I designed the profile to emphasize key actions and provide users with a space to manage their subscription.
Pricing screen
As with any SaaS app, I created a pricing page that displays the costs for various subscription periods. To assist users in making informed choices, the page highlights the best value option and includes an opportunity for users to unlock a free trial.
Conclusion
My Trainer is designed to cater to a wide range of fitness enthusiasts, from beginners to seasoned exercisers. Guided by user research, I incorporated features such as personalized workout and meal plans, flexible scheduling, and music integration to boost motivation and create an enjoyable experience. The app's user-friendly interface, and thoughtful features make it a comprehensive tool for achieving fitness goals. Future concepts to explore includes the integration of AI-powered spatial reality workouts, allowing users to exercise with friends from anywhere. Additionally, an e-commerce feature offering discounted gym wear could further enhance the user experience.
