Uplift Club Fitness Tracking and Health app

The app Uplift Club is a health tracking app that allows users to create groups with friends and family in order to keep up with how others are doing in their health journeys. Uplift Club has tasked me with developing a messaging function within the app in order to increase engagement and retention.

Uplift Club Fitness Tracking and Health app

The app Uplift Club is a health tracking app that allows users to create groups with friends and family in order to keep up with how others are doing in their health journeys. 

The Problem

Although this is an established company, analytics have shown that average user engagement is high in the first 3 weeks but after that engagement falls and many users end up deleting the app not long after. 

My Role

Create a more engaging experience with messaging features. In order to increase engagement and retention Uplift Club has tasked me with developing a messaging function within the app for users to message each other about health and fitness goals/achievements.  The idea is that by creating an engaging in-app messaging experience that is integrated throughout the app that user engagement will be sustained and increased. 

Step 1 : Research and background

My first step was to identify some leaders in the industry with similar successful apps. By looking at and analyzing how industry leaders handle these features I was able to get a better understanding of possible solutions for increasing engagement with messaging features. The competitors I chose to analyze were:

  • Fitlist - Gym Workout Log

  • Map my Run

  • Nike Run Club

After Identifying the strengths, weaknesses, and inspiration point of each competitor I was ready to create a project plan

Project Plan

I reviewed all of the research and data UpLift club sent me and getting a better overview of the project with the industry leader comparisons the next step was to create a plan for the whole project. I needed to keep on a tight schedule for this project so the plan needed to reflect that. I ended up having the time to add another round of validation and Design than I had planned for in the project plan.

Secondary Research

Objective: Identify methods for creating an engaging messaging experience.

Research Questions:

  • What are some messaging best practices/industry standards?  

  • What encourages a user to use the messaging function in an app?

  • In what ways do users interact with in-app messaging? 

  • How does messaging in an app increase user engagement?

Key research findings

  • Chat feature increases user time spent on the app

  • Chat improves community experience

  • Important principles: Functionality, Efficiency, Intuitiveness, Customizability, Attractiveness

  • What makes a good notification: non-interfering, small size, contextual

  • Give the user control

  • Design notifications in a hierarchy of required user attention of high, medium, and low attention

Beginning Designing : User Flow

This diagram helped me visualize the user experience when moving through functions.

Wireframes

Creating low-fidelity wireframes of the app screens was the next part of the project plan. This is a technique for quickly gaining a view of the overall UI of the project and gain user testing insights faster for further iteration.

I created 3 different wireframes according to 3 red routes of common user scenarios. I decided to create red routes regarding returning user tasks because the project objective is to create a new feature in an existing app for better engagement and retention, not necessarily focused on new users. Additionally the messaging feature is for messaging among friend or family groups, having established groups makes more sense for a returning user to already have.

Guerrilla Testing the Wireframes

I tested 3 subjects who were between the ages of 18-35 who have used a fitness tracker app before.  I chose this profile of tester based on what was spelled out in the project brief. I tested 3 people because of the time constraints of this project. I made the wireframes interactive to serve as a low-fidelity prototype.

Findings

  • The flow was easy to anticipate

  • The send button for sending challenges was not noticeable enough

  • The exercise logging options need to be revisited

Design Plan

Using what I have learned in my training as well as from the guerrilla user testing I was able to create a design plan.

  • Make the colors engaging and upbeat with out being too distracting.

  • Create a more streamlined logging feature by looking into industry comparisons more and seeing what works for other apps.

  • Make sure all of the action buttons are more noticeable and bright like send buttons and notifications.

  • Eye-catching and inspirational photos.

High Fidelity Prototype 1 for Red Route 1

High Fidelity Prototype 1 for Red Route 2

High Fidelity Prototype 1 for Red Route 3

First Round of High Fidelity Prototype Testing

This round of testing with the high fidelity prototype was very illuminating, I was able to identify what was working quite well for the testers and a few patterns of issues as well.  I chose people who are fairly tech savvy and would potentially be interested in a product like this.  

Findings

  • The colors and gradients were well received by testers

  • In-app messages were liked

  • Bottom navigation was easily used

  • Expand/collapse aspect of the logging function was not working well for users

  • User confusion with the use of the word ‘log’ and ‘add’

  • The whistle icon looked like a dolphin at first glance

Redesign Plan

  1. The logging function still needs work, the expand and collapse needs to be stream lined to a smoother experience with tapping outside of the card rather than on the tiny arrow.

  2. Make the language more consistent in logging by changing the terms ‘add’ to ‘log’.

  3. Add a plus sign to the logging option cards to make it more clear that its a place to add it.

  4. Change the loading screen background photo to a picture that looks more active.

  5. Change the logo to a water bottle thats more clearly recognized than the whistle that some said looked like a dolphin.

  6. Add user icons to the text bubbles in the chat feature.

High Fidelity Prototype 2 for Red Route 1

High Fidelity Prototype 2 for Red Route 2

High Fidelity Prototype 2 for Red Route 3

Second Round of High Fidelity Prototype Testing

Testing for the second high fidelity prototype was conducted with 3 users who fit the profile of a potential user.

Findings

  • In-app messaging of earning a trophy was well recieved

  • Users enjoyed the option to send a message with the challenge

  • The simplicity of the backgrounds made it very readable

  • Active/inactive buttons were not always obvious

  • UI needs to be more consistent

Redesign Plan

  1. Change the inactive buttons by lowering the color opacity

  2. Remove the bottle logo from some screens besides the main screens

  3. Create cards behind some of the text to increase readability

  4. Tighten up spacing and general color consistency

High Fidelity Prototype 3 for Red Route 1

High Fidelity Prototype 3 for Red Route 2

High Fidelity Prototype 3 for Red Route 3

Evaluating Project Goals

This project had the goal of increasing engagement and retention through adding a messaging system to this existing health tracking app.  To meet these goals I focused on creating a messaging function that was easy to use and quickly recognizable, as well as helpful and enthusiastic in-app messages.  I am now done with my part of this project but if I was still working on it there are a few ways I might evaluate it to measure the success of these goals and identify what might need to change.

I would evaluate it by:

  • Analyzing user engagement data

  • Comparing user retention numbers before and after the changes

  • Conducting more user interviews 

Previous
Previous

Assembly Design Project

Next
Next

TinyTales Design Sprint