UX case study — Nike Training Challenge redesign for a better workout experience
Background
When the quarantine began amid the spread of the COVID-19 viruses, I began to think more about my health since staring at a computer screen all day for months would only get me into a worse immune system. This is when I actually started to use a fitness app that tracks all my exercises and creates a workout plan. Nike Training Challenge is my current favorite after trying other fitness apps. It has motivated me to do various types of exercises to train different types of muscles in a short amount of time a day. However, I’ve faced some difficulties while using the app so I decided to see if I could make any improvements to the app.
Overview
Nike Training Club allows anyone to do a workout at any time, whether you have an experience or not. Therefore, the process of searching for exercises and creating a workout plan should be quick and convenient. Although there are lots of exercises to choose from the app, the users find it difficult to find exercises that suit them in a short period of time while doing some stretches. This redesign of the mobile app is aimed at current and new users' to get the most out of their exercising experiences for better workout performances.
Design Process
App Analysis
In order to better understand the functionalities of the app and its overall structure and navigation, I conducted an in-depth analysis.
App audit
Empathize with the Users
Interviews
A total of five interviews were conducted through zoom calls or surveys since meeting people in person was difficult during the quarantine. All the participants have some experiences of doing workouts. Participants were asked to answer some questions about the workout experiences, then they were asked to screen-record the app while doing one of the workout activities. Among the five participants, three of them have used the app before, while two of them use other fitness tracking apps.
User Research & Analysis
- Users do workouts for 2–3 times a week, for 30–45min each time.
- All users tend to keep switching workout activities because they can’t find the right workouts that match their needs.
- 40% of the participants are willing to start workouts faster because they have to do a lot of actions to reach the screen that they desire.
- 80% of the participants said they want a detailed workout plan for different levels of people because they feel overwhelmed when they see all different types of workouts on the browsing page not knowing where to start from.
Here is how one of the users described their workout experience:
“Sometimes I don’t even know if I’m choosing the right workout.”
With the information that I gathered from the interviews, I listed each participant’s information to post-its and used affinity mapping to identify the pain points and group commonalities.
Affinity Mapping
Based on the interviews and usability testings, I organized users opinions by creating an affinity map.
Summary
- Users want to find exercises according to difficulty levels and time more efficiently.
- Users want to view activities in a more organized way instead of solid lists.
- Users are not aware of the Nutrition & Wellness feature because they are not able to see the feature right after opening the app.
Persona
Based on the data from the interviews and research, I was able to define a user persona:
Define the Problem
Pain point 1: Organization issue on the Home page
When the users first open the app, the “For you” page is the first screen that shows up. This page allows users to browse through recommended workouts and articles based on their preferences of workout goals. However, they have to scroll several times to view all the articles.
Pain point 2: Difficulties of browsing workups
The “Browse” page has a list of workout challenges grouped by different workout and muscle types. However, users have difficulties using the filter function so they would end up scrolling through the entire page to find the right workouts for them.
Pain point 3: Discovery issue for viewing saved workouts
Users can view their Saved workouts by clicking the bookmark icon in the top-right corner. However, they find it difficult to view all workouts at once because the workouts are only viewable by lists.
Pain point 4: Difficulties in finding the past workouts in history
The “Activity” page shows users’ past records of workouts and workouts are filtered by dates and months. However, long-time users have difficulty viewing past workouts from months ago.
Pain point 5: Lack of workout customization options
During the workout process, users can change the workout setting such as options for having the guiding sound or the counting sound. However, they are unable to change workout duration and break time.
Ideating the Solution
User flow
I created a user task flow of the user’s process from opening the app to starting the desired workout. Three questions in this chart indicate where users face difficulties while using the app.
Lo-fi sketches
After having a strong understanding of pain points and needs for the app through task flow, I came up with some sketches of possible solutions.
Based on feedback from my peers, I proceeded to wireframe some of the sketches with several modifications.
Prototype
I used Adobe XD to create high fidelity designs and a clickable prototype of the proposed solutions.
Pain point 1: Organization issue on the Home page
Solutions
- Image sizes: By reducing the image sizes, users can compare with other options that are under the same topic.
- Expandable options: By minimizing the other sections, users can now jump to view the only part that they are willing to see.
Pain point 2: Difficulties of browsing workouts
Solutions
- Workout browsing: By minimizing the size of each workout type and changing the viewing options into smaller columns, users can find their desired workouts faster and more efficient.
- Filters: Users can view the number of workouts available for each workout type for faster browsing.
Pain point 3: Discovery issue for viewing saved workouts
Solutions
- Search bar: Users can now search their saved workouts if there are a large number of workouts on the list already.
- Filter and Sort bar: Users can view workouts by filtering their desired options and sorting for a more efficient browsing experience.
Pain point 4: Difficulties in finding the past workouts in history
Solutions
- Yearly summary: By adding the summary of the total number of and total minutes of workouts of the year, users can have an idea of where they are, and can set a goal based on it.
- Monthly workout lists: By hiding the workout details inside the list for each month, users now do not have to keep scrolling down the page to view the month that they are looking for.
Pain point 5: Lack of workout customization options
Solutions
- Text and icon sizes: By enlarged the size of time elapsed and the icons, users can view the time easily and change any workout settings without tapping the other empty spaces around each icon.
- Workout settings: Users can make changes for the workout by adjusting the workout and reset time and the number of circuits they want to run for each workout.
After creating high fidelity wireframes, I created a prototype using Adobe XD. Click the link below to test my prototype.
Validation
Testing Prototype
I tested the finished prototype on 5 people, with age ranging from 18 to 24 years old. In order to validate new changes, I asked them to provide feedback or opinions on each feature that I redesigned.
- 2 of the participants were already the user of the app.
- 2 of the participants was a user of the other fitness application.
- 1 of the participants does exercise on a regular basis but never used a fitness app before.
Success/Pain points
Recommendations
- Make the workout list changeable between columns and lists.
- Change workouts viewing options in the activity history page by making workouts from each month viewable in a separate page
Iterations
After receiving usability testing data and their recommendations, I analyzed them to improve the new features that I designed. I made changes to two screens and asked the same group of participants for feedback.
1. Browsing Workouts
In order to make the viewing option flexible, I created icons that switch between two types: lists and columns.
2. Activity History
I moved the entire workout activities from one month to the new page. I made the page easier to read by removing the top bar and adding a back button on the left top corner of the screen.
Takeaways/Reflection
Through redesigning and experiencing the whole case study, I learned that at every decision-making process for design, we need to put users as the center of the focus because one little change can make the whole user experience completely different.
Thanks for reading! Please reach me at sandylee0325@gmail.com or connect via LinkedIn if you have any comments or suggestions.
