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

Image alt tag
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.

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.

Project Overview

My Role: UX Design Lead

Team: Content Strategist, Product Designer

Project Duration: 4 years; 2017-2021

Tools & Methods

  • User Research

  • Industry Research

  • Competitive Audit

  • Empathy Maps

  • User Persona

  • User Journey Map

  • Information Architecture

  • Wireframes

  • Prototype

  • Mockup

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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:

Creating a personal training app based on the science 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

Image alt tag

FLOW

Moving your body and completing workouts

Image alt tag

INPUT

Nourishing your body and getting proper nutrition

Image alt tag

REWIRE

Forming new habits and thought patterns

Image alt tag

ENERGY

Getting rest, hydration, and relaxation

Creating a personal training app based on the science of change

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

Creating a personal training app based on the science of change

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.

3. User Research

Here are a few of the interview questions asked

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.

Image alt tag

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.

Image alt tag

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.

Creating a personal training app based on the science of change
Creating a personal training app based on the science of change

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.

Creating a personal training app based on the science of change
Creating a personal training app based on the science of change

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

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 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.

Image alt tag

The Denizen

PRE-CONTEMPLATION

Image alt tag

The Nomad

CONTEMPLATION

Image alt tag

The Thinker

PREPARATION

Image alt tag

The Hero

ACTION

Image alt tag

The Iconoclast

RECYCLE

Image alt tag

The Victor

MAINTENANCE

Creating a personal training app based on the science of change

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.

Image alt tag

User Journey Map

Using the journey personas, I mapped the user journey to include the corresponding processes of change for each persona

Image alt tag

Sitemap

Once I mapped the user journey, I created a sitemap to guide the creation of the wireframes

Creating a personal training app based on the science of change

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

This is the lo-fi prototype. You can enlarge the screen and test it for yourself

Creating a personal training app based on the science of change
The home screen

The home screen

Mockup: Pre-Action

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.

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

  • How does your final design reflect your learnings about your users?

This is the high fidelity prototype. You can enlarge the screen and test it for yourself

Home screen

Home screen

Mockup: Action

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

This is the high fidelity prototype. You can enlarge the screen and test it for yourself

Creating a personal training app based on the science 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!