Tools & Methods
User Research
Industry Research
Competitive Audit
Empathy Maps
User Persona
User Journey Map
Information Architecture
Wireframes
Prototype
Mockup
Creating a personal training app based on the science of change
A fitness app that focuses on behavioral change in order to help users get better results
Timeline: 2017-2021
Role: UX Design Lead
Project Overview
My Role: UX Design Lead
Team: Content Strategist, Product Designer
Project Duration: 4 years; 2017-2021
Description:
The Electric Body app was a four-year-long project that started as a template with little to no customization available to create a product to my desired specifications. The branding lacked freshness, the UI Design was dull, and the app was generic with poor usability, only assigning workouts and meal plans. I set out to completely transform this app into a fresh, more usable design by utilizing the UX Process detailed here.
Discovering Gaps In The Market:
I noticed a gap in the market for helping users who have trouble staying consistent with their fitness goals. Most fitness programs only focus on providing workouts and nutrition guidance but don’t have solutions for assisting users to stay consistent with their follow-through. Through research it was clear, simply telling people what to do isn’t as effective as teaching them how to do it continuously. So I created an app to fill that gap by utilizing the processes of change to help users make their fitness habits stick
Why I chose this project
Research & Insights
I conducted three different forms of research in order to gain insights for this project. I gathered all of the data and synthesized them to get a clear idea of what direction to go in.
1. Behavioral Change
As part of my education for becoming a personal trainer, I became certified in the area of behavioral change through the National Academy of Sports Medicine. (NASM) I supplemented my certification with several books and science-based articles on the subject, in addition to working closely with a licensed psychologist for insight into implementing the concepts.
2. Industry Research
I gathered the latest data on fitness industry trends to get a macro view of things; and I did a competitive audit on three different specific companies: Peloton, Noom, and Future.
3. User Research
For user research, I conducted four interviews with people who have experience with trying and failing to reach fitness goals to gain insight into what pain points they've had when it comes to creating new fitness habits.
1. Behavioral Change Research
Behavioral change is about altering habits and behaviors for the long term. The cycle of change is broken down into six different steps, and each has a series of processes you can use to advance you to the next step. Here are the stages of change and their corresponding processes of change:
2A. Industry Research
I used industry research to create the main elements that would guide EB. When broken down, there’s a consistent theme in fitness that divides the parts necessary for success for users to reach their fitness goals into four basic categories: workouts, nutrition, motivation, and rest. I used these categories to create the four core elements of Electric Body.
The Electric Body Elements
FLOW
Moving your body and completing workouts
INPUT
Nourishing your body and getting proper nutrition
REWIRE
Forming new habits and thought patterns
ENERGY
Getting rest, hydration, and relaxation
2B. Competitive Audit
I conducted a competitive audit by looking at big apps like Peloton and Noom, and a more boutique app Future. I chose Peloton because they are an industry leader so I want to understand what the standard is. I chose Noom because they focus on psychology like I do, and I chose Future because they’re midsize and focused on 1:1 training.
Gaps & Opportunities
Peloton is too expensive; Noom feels generic; Future is a slow process
We can offer a more accessible price
We can offer personalized training that includes a psychology-based approach
We can have a faster turnaround time for delivering workouts
3. User Research
Here are a few of the interview questions asked
Interviews
I conducted user interviews to build a new persona and to inform the design. Together with the psychologist, I worked with, we prepared an interview script with 20 open-ended questions, focusing on our target audience's thoughts and ideas on fitness to get a better understanding of their pain points. I recruited and interviewed 4 users remotely. I referenced the user interview findings throughout the entire design process.
Insights
I transcribed and synthesized the user responses, and was able to group the main insights into themes. The two major themes were:
Users not seeing the results they're looking for in the goals they've set for themselves
Users not being able to make a commitment, with the expressed need for accountability.
The pain points discovered during this process are consistent with the behavioral change framework being an appropriate solution for user problems.
Empathy Maps
I used my findings to create empathy maps of each interviewee, which would later help me create both a user persona and a user problem statement.
Persona
We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created a persona based on user interviews. We used this persona at each stage of the design process, whenever we wanted to step out of ourselves and reconsider our initial ideas.
Problem Statement
Maya is a busy woman who needs a workout program that can help her effectively lose weight because she’s having trouble staying consistent with her fitness goals.
People who are looking to lose weight often have trouble making fitness a consistent part of their lives. Users need more than just assigned workouts and generic meal plans, they need an effective way to create a lasting change in habits so they can achieve the results they’re looking for.
By using the principles of the science of change to make a lasting impact
Mapping The Customer Journey
With the business goal in mind, I wanted to make sure that our users are prepared to make a long-term commitment to monthly purchases for our training. Given the model of change, we recognized that having a user take action before they are ready, would result in them being less likely to follow through after the first month or even the first week of signing up.
To prevent this, I used the steps found in the stages of change to create the user journey, to ensure users went through each stage with the confidence and readiness to take action consistently
Mapping out the journey helped to show that there should be a series of free resources that foster long-term commitment before having users sign-up for paid training.
The User Journey Map
The Journey Personas
After creating the customer journey map, I used it to create personas for each step of the user journey. I used these personas to create the necessary tools needed for users at each stage of their journey.
Brainstorming Ideas
Taking all of the research I conducted, I had a brainstorming session to create ideas for what features to build and made the decision to divide the app into two main categories: Pre-Action and Action.
Pre-Action is a free version of the app that has resources for the user to take small steps before they are ready to sign-up for paid coaching. The pre-action will utilize the processes of change to help move the user through the user journey into Action. This decision was based on what I learned in my research about readiness: Resolutions fail when the proper preparation and actions are not taken. By approaching a goal with an understanding of how to best prepare, act, and maintain a new behavior, the client will be more likely to succeed. Everything in this part of the app will be focused on preparedness.
The Action part of the app is the paid version and will include workouts, coaching, nutrition support, and other resources that help users in their desire to remain consistent with their new fitness habits.
User Journey Map
Using the journey personas, I mapped the user journey to include the corresponding processes of change for each persona
Sitemap
Once I mapped the user journey, I created a sitemap to guide the creation of the wireframes
Wireframes
Time to start designing
Using Figma, I translated my ideas into low-fidelity wireframes. Then, I improved them by adding a few relevant stock images and copies. At this stage, the wireframes were defined enough for some user testing. Based on 2 tests, I made a few alternations and moved on to creating high-fidelity prototypes. During the test, it was discovered that users would prefer an easier way to choose their workouts, and have more resources to help guide their nutrition choices.
Creating A Design System
In order to stand out from competitors, I updated the EB branding and created a design system using colors that are fun and vibrant, and typography and logos that look modern and strong.
The home screen
High Fidelity
I made a mockup of the Pre-Action stage with 30 screens
Once the usability issues were resolved, I designed the final screens in Figma. My goal was to create a visual identity using the new design system I created. I drew inspiration from the UI of other fitness apps and tried to keep the screens simple and easy to use.
Features
I took the feature ideas I generated during my brainstorming session and built those out in two separate files, starting with the Pre-Action version that moves users through the processes of change. These features include:
Simple workouts
Recipes for smoothies
Quizzes
Community feed
Home screen
High Fidelity
I made a mockup of the action stage with 40 screens
In a separate Figma file, I created the Action stage of the user journey which includes coaching, workouts, nutrition, and other resources and I kept the visual design fairly consistent.
Features
Daily workouts
Food Log
Weekly Check-in
Prototype Validation
Testing the food diary
The team performed a usability study with three participants, in order to test the food diary. The study was conducted via a zoom call, and each user was given a small part of the user flow to complete: entering their breakfast into their food diary. Users were able to complete the task but gave the feedback that they would like to be taken to the food log screen immediately after their data is entered, instead of the home screen
Updates
I updated the user flow to reflect the feedback we received from the study. The final designs reflect our commitment to our users to help them stay consistent, by slowly guiding them through the stages of change.
What I learned
This was my first, and longest UX project to date, totaling four years. The amount of time I was able to spend on this project helped shape me as a designer. I learned so much by putting the UX process into action, but here are my three key learnings:
1. Listening to the user is more valuable than my own preconceived ideas.
Ideas can be good but incorporating too many of them might give the user experience more friction than is desirable. My goal moving forward is to develop the ability to marry ideas with usability, and I believe I can achieve this by testing a few features at a time, instead of adding every single feature idea at once.
2. Working collaboratively is important
Working with a team of people really helped synergize ideas and efforts. Being able to brainstorm, make revisions, and final decisions with a team of people help the project grow beyond what I even thought was possible. Moving forward, it is my priority to continue working with a team of people to improve my skill and create better projects
3. Having adequate structure will save me unnecessary trouble
I worked from the information architecture that I created, but I found the framework to be insufficient, causing me to redo a lot of work once I started creating the wireframes. I don't think it's a bad thing to increase the scope of the project once you begin working on it, but I do believe a lot of the recreation of work could have been avoided with a better framework. The biggest example of where I lacked structure is the lack of information architecture for the pre-action version.
Next Steps
Community feature refinement
More user testing
Adding or removing features as necessary
The top priority would be testing and refining the community aspect of the app because it has the potential to be the strongest driver of good user experience. Users want to be where other users already are.
Drop me a message
Let's share ideas & discuss ways to collaborate!