GymBuddy
working out is better with friends
OVERVIEW
GymBuddy is a workout app created to help users stay accountable to their fitness goals by connecting users with friends and other like-minded users. As such, the company is looking to help create more repeat usage and sustained engagement.
ROLES
UX Researcher/Designer
UI Designer
TOOLS
Figma
Google Suite
PROJECT DURATION
Nov. 2022 - Jan. 2023
2 months
Challenges/Problem Statement
OVERVIEW
Average user engagement for the app is typically heavy for the first three weeks then drops off and soon after users delete the app.
The company would like to add a messaging feature that creates sustained engagement.
Is it enough to just add a messaging feature? What other features might help increase repeat usage?
Goals
Create an integrated messaging feature.
Add a social feed for users to share motivating content.
Easily share favorite workouts with others.
How might we keep users engaged with their community and motivated towards their goals?
Research & Analysis
OVERVIEW
I began my research by conducting competitive and comparative analysis and then user interviews with the target demographic.
COMPETITIVE ANALYSIS
I looked at 4 competing apps in the market to see what features would be worth exploring.
Productive Habit Tracker
Fitlist - Gym Workout Log
Map My Run
Nike Run Club
Competitive analysis of 4 apps. (click for a closer view)
USER INTERVIEW INSIGHTS
From there I conducted 5 user interviews to better understand how people typically use workout apps and what would keeps them engaged with the apps that they chose. Those interviews along with the competitive research lead me to the following insights:
In-app messaging is typically used mostly to share content from the app.
The act of sharing completed workouts with others was enough motivation for those who struggle to work out alone.
Most users were using workout apps as gym replacements, but aren’t exploring them for more than the few specific workouts they use.
Affinity Map
Findings & Implementation
OVERVIEW
After completing my user interviews and competitive analysis, I decided that I the additions to the app should be fairly simple; adding an integrated messaging feature to keep communication within the app and adding a social feed reminiscent of Instagram and Facebook for users to share and be inspired by health and fitness content. That being said, the red routes that I focused on included different ways for a user to use the app with a friend.
RED ROUTES
User send a message to a friend.
Share a workout with a friend.
Share a post from the social feed.
User flows created in FigJam
Wireframes
Wireframes
OVERVIEW
From the user flows I created my initial wireframes for the app. After completing them I put together a simple prototype and conducted a series of usability tests.
GUERRILLA USABILITY TEST FINDINGS
The main points I found that needed to be resolved in the High Fidelity designs were:
Users struggled to find the social feed.
Wasn’t intuitive to find the saved workouts in the profile hamburger menu.
No easy way home through the messaging flow.
Design
OVERVIEW
Once the research and wireframes were put together, it was time to work on the design.
STYLE GUIDE
Before starting on the high-fidelity designs, I planned out the aesthetic and tone of the app. Since the mission of the app is to make working out enjoyable by connecting with friends, I wanted the visual style to be something fun and inviting. I focused on 3 elements for the style guide before building out the screens.
Creating a fun and friendly mascot design along with a wordmark logo to be used within the interface.
Putting together a bright and fun color palette allowing for tone on tone effects.
Basic Sans font used for a clean typography with just enough personality.
Basic style guide with logo, color palette, and typography
HIGH FIDELITY SCREENS
For the high fidelity screens, the goal was to create an app that is fun, youthful, and gender-neutral that is simple and easy to use. Since the main task was to create a messaging feature to keep users engaged, the screens I focused on have top do with the messaging flow and the added social media feature.
Selection of high fidelity screens
Usability Test
OVERVIEW
After completing the first iteration of the high fidelity screens I ran a remote usability test with 5 users.
I wanted to test the main red routes so I gave participants the following scenarios:
You would like to check your messages and send a new message to a friend on the app.
You’re looking for inspiration from other users to share with a friend. Where would you go and how would you share?
You have a workout saved that you’ve been enjoying that you want to share with a friend. Where would you go to do that?
RESULTS
While the flows were intuitive for users to complete, the main thing I realized needed altered was the contrast. The original design didn’t have enough contrast built into the system so if an image was lighter, the headings, information and icons would blend in and be hard for the user to see. With that, I created greater contrast within the next iteration of the design.
Remote usability test
Rainbow spreadsheet with notes from usability test
Version 1 screen (left) compared to version 2 screen (right)
Reflections
FINAL THOUGHTS
Now that this project has come to an end I have the following reflections:
If this product goes to launch, more work need to be put in to the social media feature.
Since the project is utilizing an “existing” workout app, not much thought went into the workout feature.
More work needs to be put into this feature for it to be viable for market.
Future additions to help increase engagement could include ways to gamify reaching workout goals or creating friendly competitions between friends to increase motivation.
Thank you for reading this far! If you’re interested in learning more, email me at hello@jamiekepko.com and if you want to check out the Figma prototype, head over to the link here: https://bit.ly/3QT1POt