Fitfam
Adding a messaging feature to
encourage repeat usage &
engagement on a mobile fitness app.
Project type
Individual School Project
Tools
Figma
Deliverables
Mobile App Mockups
Prototype
Role
Product Designer
DISCOVER
The Problem
Fitfam is a family and friends health tracking app that allows users within a family or group of friends to see how others within that group are doing regarding health and fitness. Currently there is no messaging feature and the company would like to integrate one.
The main objective is to integrate messaging within the existing features in a meaningful way. Just adding the ability to message is not enough - the goal is to increase repeat usage and engagement.
The Design Question
How might we provide a meaningful way for users to connect with each other about their fitness goals?
Competitor Research
As a first step, I chose to look at a few different fitness apps and how they incorporate social interaction and messaging onto their platform.
Map My Run
Workout feed is automatically generated, so it’s very low effort
After you complete a run it prompts you to share or add a comment or photo
When inviting friends, it leads to a prewritten text that you can edit and a link to the app.
How to add friends is hidden pretty deep in the menu, making it hard to find.
Fitbit
Steps are automatically logged for your friends to see and compare
Adding friends is easy as they give you options to text or email from your contact list
The community feed includes special interest groups, so even if you do not have friends on the app there are real people posting things for you to see
On peoples profiles there are clear buttons to “cheer” “taunt” or “message”
Fiton
On nearly every class they show other users’ profiles, and show when you have a friend who has taken the class
When you open a class you have an option to take it alone or schedule to do it with friends so you can work out together virtually
The activity feed is auto generated so friends will see that you worked out without you having to do anything
Insights
While the fitness apps I looked at all include messaging and provide some way to connect with friends, it seems to be a secondary goal, the first being fitness and wellness. Even if users aren’t using the app to message frequently, being able to see what their friends and family are up may keep them coming back to the app.
The main goals I have when adding messaging to Fitfam are:
Messaging and posting workouts should be as effortless as possible for users
Keeping friends/family visible on the app so users feel more connected, if they see a friend did a workout they may be more likely to do it too
Persona
From the information provided to me about Fitfam’s target market and current user frustrations I created a persona:
Stephani is 26 years old, she tries to stay fit by working out a few times a week, but often falls short of that goal. She is tech savvy and likes to try new fitness apps for her workouts but tends to stop using them after a few weeks.
Stephani’s Frustrations
When she sets a new fitness goal she’s excited and ready to workout, but tends to lose interest and motivation relatively quickly
She has friends who work out and use fitness apps, but currently she can’t connect with them in a way that motivates her to keep going or offers accountability for her fitness goals
Stephani’s Goals
Wants an easy way to share workouts with friends and family
To maintain her fitness goals long term, she likes to have people that she can talk to about those goals
DESIGN
User Flows
For my user flows I focused on the different ways that users could start a conversation. In order to get an idea of what type of messaging users would find most engaging I wanted to create a few ways they could start a message: from the goal screen, after a choosing a workout, and a classic inbox.
Wireframes
Based on my user flows I sketched out a few ideas before translating them into wireframes.
Visual Design
In the real world for a project like this I would be working within an existing app, which would mean the branding design and style guide would already be set. For this project I needed to come up with those things on my own though, so I borrowed from the patterns I saw industry leaders using. Bright and cheery blues were popular alongside neutral blacks and greys. Using an ombre gradient effect was a fun way to add some visual interest.
High Fidelity Prototype
For the high fidelity mockup I borrowed from a free UI kit for some of the design features and then tried to build an app with a believable user experience. I wanted users to interact with the app as if they had already connected with friends and set some fitness goals so they had something to message about.
VALIDATE
User Testing
Round 1
For my first round of user testing I spoke with 5 people familiar with fitness apps in the target age range. My interviews were done virtually and participants shared their screen so I could see their movements within the app as they spoke.
I had a two main goals during my testing:
Goal One - Make sure the messaging features were intuitive and easy to use.
Goal Two - Check in with users to see if the messaging was set up in a way that they would actually engage with it, rather than see and ignore.
Insights
Overall the testing went great, other than a few minor design issues folks were able to easily navigate through the app. If they were uncertain about what icons meant or where a button would lead them, typically they were able to answer their own questions quickly by clicking around a little. There were a few issues that needed addressing though...
Issue 1: Show me group stats!
For group goals, users wanted to see how the other members of the challenge were doing. Users were confused that there was only one progress bar for the group. They thought maybe everyone was contributing to the same goal, rather than competing against each other. It was pretty unanimous that folks wanted more of a competition vibe.
Proposed change
Gamify the group goals and show different users’ progress more clearly
Arrange members in order of how well they’re doing
Add a way to like when friends make progress.
Issue 2: What do I do now that I’ve set a goal?
Users weren’t sure what their next step would be after setting a group goal or scheduling a workout. There was no confirmation that an invite was sent, or what that invitation looked like to their friend, so users were left just having to trust that the goal/workout was sent as they expected.
Proposed change
Open a pre-written message when users set a new goal or schedule a workout to confirm that their invite has been sent.
Make sure the users can edit the message in case they don’t like the default.
Design a way to show pending goals and workouts.
Issue 3: Is this a message about my group goal or not?
Users were confused about how group messaging and messaging about a goal aligned. They didn’t understand if a group message in the inbox would be the same message string from the goals page. When they had a group message open they weren’t sure if it would sync up with the goals and workouts they had set with those friends
Proposed change
Make it more clear how the messages and group goals are connected.
Include the goal name and group stats on the message screen.
Hopefully this will encourage users to message about the group goal because they can see it on the same screen.
User Testing
Round 2
For my second round of testing I once again spoke with 5 users over zoom. I had one main question to answer:
Were my changes effective?
Generally the answer was yes, my changes helped solve some of the problems within the app, but there’s still some work to be done.
Insights
Issue 1
The Change - Display individual progress in group goals, add a way to “like” friends progress
The Result - Overall this change was very successful, users really liked being able to see everyone’s progress on the group goals, and were still able to find how to create a new group goal easily.
Next steps - The added notification in the group goals needs to be rethought - users either missed it, or were confused about where their “like” would show up. While they liked being able to click just one thing to encourage their friends progress, the experience could be improved.
Issue 2
The Change - Add message confirmation and pending status with new goals
The Result - Users immediately understood the message after confirming their goal or workout, and liked being able to see that the invite was pending. They felt like they wouldn’t need to take any more steps within the app
Next Steps - Users wanted a way to share the messages outside the app and bring the conversation to their usual way of texting. They mentioned that maybe their friends wouldn’t have their notifications on so they’d be worried the invite would be missed.
Issue 3
The Change - Clarify group message screen
The Result - While generally there was less confusion about how the messages were connected to the group goals there was still a little confusion.
Next Steps - Having the stats on the message screen was well received but it led some to users to want even more information there. They felt the message screen would maybe be more interesting as a sort of news feed for the goal, with auto-generated updates when friends log progress.
New Issue
There was another design issue that came up in this round of testing that hadn’t been mentioned before. Users felt like the blue message icon felt more like a call to action rather than a menu item. They expected that when they clicked on it a “new message” screen would show up rather than being brought to the message page.
REFLECTIONS
Future Steps
Through 2 rounds of usability testing I learned a lot about how users view fitness and goal apps, and how they view in-app messaging. Moving forward there are a few insights I would focus on:
Users still want to bring their conversations out of the app and into their usual form of texting (Messages, Whatsapp, etc.)
When talking about fitness goals users are competitive, while they may not want to post updates they still would like to see group progress as a form of accountability and encouragement. Nobody likes being in last place.
Group Goal News Feed I like the idea creating a sort of news feed for group goals. Informational posts could be auto generated to show when friends log progress, and would give a clear space for everyone to like or comment easily. Making it feel less like a typical message screen may mean users don’t immediately just want to shift back to their usual form of texting.
Lessons Learned
The user testing phase of this project was especially interesting to me. In the past I have mainly interviewed with friends or acquaintances. For this project I was able to talk to complete strangers for most of my testing which felt like it aligned more closely to the real world.
There were some interviews that felt so insightful, and really energized my problem solving brain. While other interviews were... not so obviously helpful. Despite my screening, some testers came to me with no fitness experience and didn’t understand even the concept of the app. Another tester understood the app but became so focused on one thing they didn’t like that it was hard to coax any other feedback from them. A few testers had a really hard time thinking out loud as they moved through the different tasks and pages. I think all of these are pretty common in user testing; not every interview is going to be energizing, but you can always learn something from the person talking to you.