A well-established company launched a family and friends fitnesss app for mobile devices. The app would allow users within a group or family to see each other’s stats as well as health and fitness progress. This app has remained in rotation for the past several years without any significant growth.

Target Audience

18 - 34 years old
Tech-savvy
Budget conscious
Communication being an important part of their lives

The Problem

On average, user engagement is heavy for the first three weeks then it drops off and soon after users delete the app. The client cannot pinpoint the reason for this behavior in their users and wants to add a messaging feature in hopes to engage users.

The Solution

In order to solve the dominating issue, the client wanted to add a messaging function that can create sustained engagement. After some research, I learned in addition to a messaging feature, users also want to be motivated to strive to their health and fitness goals. I also learned that users within the target age range preferred to focus more on their diet and health over fitness.

I redesigned the entire Home page to expand on the features. Instead of having the app focus mostly on running, I included steps, a variety of exercise, calories burned, and fitness programs. I also included progress bars so users can visually track their daily goals.

This redesign expands on the concept of fitness and approaches it from a more methodical angle. Each exercise can be recorded and steps can be tracked so users have can have a more comprehensive way to take control of their health and fitness goals.
‍

On top of that, I added diet features so users can track their nutrition and health features that give users an overview of their general health aspects such as heart rate, weight, BMI, and even sleep patterns.

Because the app had an issue with retaining users, I added both a Challenge page and a Social page in addition to a messaging function to give users a reason to keep using the app. The Challenge page allows users to join challenges, events, and earn rewards. The Social page also comes with a feed so users can share their progress and accomplishments with the FitMate community.

Majority of the respondents that fell in the target age range were actually students and did not work for a living. This turned out to be a major detail, as the target audience would also be budget conscious, which was consistent to a “student”--a young person with limited resources yet highly social and tech savvy.

As it turns out, people within that age range aren’t fitness fanatics. Majority of respondents only dedicate between 5 to 10 hours a week to fitness, on average, an hour a day. I would have to design something that even a lightly active individual would find useful.

I also wanted to know if respondents were motivated by others to stay healthy. Based on the results, majority of respondents were either neutral or found some motivation in others.

I took the survey another step forward and asked respondents how they’d rate a messaging function in a fitness app. Majority of the respondents liked the idea. This showed me that the client’s desire to add a messaging function wasn’t entirely without reason. I learned that I had to create a platform that would invite a community to interact with one another.

To further understand why the app was failing, I decided to list a variety of features found in different health or fitness apps and asked which features were desirable. Surprisingly, I found that many people wanted to see how many calories they were burning as well as progress tracking. Very few people cared for gamification or even exercise input. These results are consistent with previous answers. Majority of the target audience simply cared more about their health and diet than they did about exercise. With all my research finalized, I learned that the app was simply not catering to the target audience.

In Summary, Respondents...

Wireframes

After extensive research and analysis, I was ready to design a new version of the app that was based on what the users would want. To do this, I had to change the client’s initial wireframes. Because the target audience is young and tech savvy, I wanted to create a darker app with contrasting values. This theme wouldn’t work on an older audience, as it can be too overwhelming, however, since the target audience is young and socialble, I would want something that can not only grab their attention, but would also incite a motivating feeling.

I then proceeded to redesign the information architecture of the entire app. The Home page now included areas to record activity, food, and track overall health. I removed the Map page and Notifications page and then added a Challenges page as well as a Friends page. One of the features that I kept from the client’s initial design was the fitness and run clubs. However, I did change the name to “Programs” so that the app can feature a variety of courses for fitness, health, and diet rather than being centered on running.

After finalizing my intended concepts, I proceeded to draft out my wireframes. Based on the surveys and analysis of the initial wireframes, I added a variety of features:

Usability Test: Phase I

Once I completed my wireframes, I began my first phase of usability testing. Using my Slack channel, I recruited 4 testers to run through my wireframes and identify any critical issues with my design and architecture. After completing the usability tests, I learned that users came across a handful of problems that either prevented them from completing tasks or simply confused them to the point where they had difficulty accomplishing tasks.

Problem 1: Users found the Challenges page confusing

Problem 2: Users found the Friends page lacking

Problem 3: Users found the nutrition page overwhelming

High Fidelity Mockups

After identifying the  problems in my wireframes, I proceeded to define the app  by adding a color palette and images. My intention was to have users feel motivated and uplifted by including high energy and driven photos with bright glowing colors on top of a dark grey background.

Using green and blue gradients, I added depth to buttons and other components. I also used a bright yellow as my accent colors to draw the users’ eyes to progress bars and hyperlinks. On top of that, I adjusted quite a few areas that testers found problematic, such as the nutrition page. Users found the nutrition facts overwhelming, so I adjusted by adding an accordion. Users can choose to deep dive into particular foods if they wish.

I also adjusted the Challenges page. Users had difficulty navigating the wireframes due to the wording of the secondary navigation. To solve this issue, I changed “Join” to “Explore” in hopes that users can correlate the word “explore” with “browse” or “new”.

On top of the secondary navigation adjustment, I also removed the icons in the invitation page and replaced them with buttons. This change created a more modern aesthetic and also creates a larger field for users to tap on, reducing the probability of missing the interaction.

I decided to change the “Friends” page to “Social” and then I added a feed. Users can now get to know others through the feed and make friends based on posts rather than looking through random people’s profile. By adding a feed, users are given the opportunity to interact with each other whether it’d be sharing their achievements, joining events, or looking for advice. This creates a FitMate community where people feel included and seen. This can give users a reason to keep using FitMate. Even if users aren’t heavily active, they still can use the app for its health, food, and social features.

Usability Test: Phase II

After completing the high fidelity mockups, I went in for a second round of testing. This time I recruited 5 users through my Slack channel. In this phase, I wanted to know if testers liked the photo choices, color palette, and adjustments I made from the wireframes.

Problem: Users did not know how to go back after inviting friends to a challenge.

Solution: Add a button to allow users to join a challenge immediately after inviting friends. This button will eliminate confusion and continue the user flow without any disruptions.

Usability Test: Phase II

I have done a few projects at this point in my journey, however, I felt that in this particular project I started come into the design thinking mindset. I had a lot more creative freedom and I was able to pinpoint issues and expand on designs that would benefit the users. I thoroughly enjoyed researching and understanding the target audience. Each stat was eye-opening as I analyzed my data.

I was able design something comprehensive, something that made sense.I learned quite a few things:

Overall, this app showcased my creative abilities and design thinking. The use of intense colors and dynamic images highlights the app as something modern and geared towards a younger audience. The additional health, food, challenge, social, and messaging features makes the app more inclusive. Users will feel welcomed, motivated, and supported by FitMate.