My Role: UX Design Lead
Team: Content Strategist, Product Designer
Project Duration: 4 years; 2017-2021
Tools & Methods
User Journey Map
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
Moving your body and completing workouts
Nourishing your body and getting proper nutrition
Forming new habits and thought patterns
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
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.
3. User Research
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.
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.
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.
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.
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.
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 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.
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
Once I mapped the user journey, I created a sitemap to guide the creation of the wireframes
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 4 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes. During the test.......
I made 3 different iterations before I started to work on the mockup
Once the usability issues were resolved, I moved on to design 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.
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:
Recipes for smoothies
How does your final design reflect your learnings about your users?
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.
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.
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.