Power up Case Study

Power Up is a well-established company that launched a family and friends health tracking app three years ago. The app allows users within a group (a family or group of friends) to see how others within the group are doing regarding health and fitness. Currently, there is no messaging feature within the product. The company would like to integrate messaging into the app.

Role

UX design, UI design, User researcher, wireframe, high fidelity prototype, and usability test.

Tool used

Figma, miro, google doc, Zoom.

Problem

On average user engagement is heavy for the first three weeks then engagement rate drops off and soon after users delete the app.
Company wanted the general messaging feature integrated within the existing features.

Goal

Increase repeat users usage and engagement.
Design new messaging features.

Research

Empathizing with users

I planned to finish the project within a 4 weeks timeline. Since there is a good amount of resources and studies of fitness applications in the market, online secondary research fits my project the best from both time management and information gathering perspective.
Below are the key takeaways and insights based on my secondary research:

Workout together with others would motivate users and attempt them to engage more;
Competition with groups could motivate users;
Encourages and support from others users could motivate users.

MVP

For MVPs, I wanted to focus on the most efficient and effective way to help the company boost their user engagement. I prioritized the MVP’s, and decided to work on:

Chat function allowing users to message each other;
Work out together with friends

Design

User Flow

I started to create the user flows for the essential path users would take.
I divided my user flow into two paths, one is for the users who want to invite friends to work out with them; the other one is for users who received an invitation from another user.

Sketches

Since Power up is a well established platform, they already have essential frames for their application.
I focused on building the screens for new features at the same time to keep the consistency and don't change a whole lot from their existing frames.

Wireframes

Before I jump into wireframes, I conduct a guerilla test with 5 users.
I wanted to observe and find if there is any pain point or confusion for users during the test.

Findings

Users feel anxiety for “RSVP” in the chat box, they are not sure if they are charged and they feel anxiety that there is no way back if they RSVP by accident.

Solutions

To avoid causing user anxiety, I decided to add an explanation for users to know they will not be charged until the day they attend;
I also want to add an Un-RSVP button on the “check RSVP” page, so users could always go back if they clicked it by accident.

Design System

Power up’s brand personality is a trusted friend with a good sense of humor who always has your best interests in mind.
I want users to feel motivated, energetic and excited when they use it, therefore I chose pinked red as the primary color, I also chose different shades of gray. I tried to minimize colors used because I want to keep the interface minimalistic yet appealing.
I went for a lighter background, because I wanted users to feel less overwhelmed.

High fidelity screens

I started to apply the design system on my high fidelity screens.

High fidelity Tests

The second round test, I conducted it with 5 users both online and in person, the test lasted 30 minutes each.
I wanted to see if there is any pain point for users when they invite a friend to join a workout session; RSVP an invitation from friend; and chat with one friend.