Fitwell

Overview

Fitwell is a family and friends health tracking app that was launched by a well-established company three years ago on both iOS and Android. The main functionality of the app is to allow a group of users to see how other group members are doing in terms of health and fitness. Currently Fitwell doesn't have a messaging feature and the company would like to introduce one.

My process for designing a new messaging feature that creates sustained engagement was as follows:

Conduct competitive research
Design user flows
Create and test wireframes
Create, test, and iterate on high fidelity designs

Competitive Research

For my competitive research I chose to analyse three different applications: Challenges Fitbit, and Facebook Messenger. Fitbit and Facebook Messenger were two apps that I was already familiar with, but Challenges was a new discovery for me.

Challenges

Homepage

Chat Page

Share Challenge

The overall purpose of Challenges is for users to create workout/exercise challenges to send to their friends and family, or join public challenges created by other users. The application was easy to navigate overall, but some of the UI could have been cleaner and there were a few important features that I felt were missing. For one, users cannot add other users as friends or communicate with one another via direct messaging. The only way to communicate within the app is to add (or reply to) comments left on challenges. There also isn’t any way for users to share challenges within the app; they have to share a code via text or social media.

That being said, I do think that allowing users to join public challenges and sharing links to challenges via external sources are valuable features to consider in my own designs. By allowing users to join public challenges, it could drive people who don’t know anyone on the app to participate as well. As for sharing links to challenges externally, I think this could be a valuable way of spreading awareness of the app and encouraging new users to sign up.

Fitbit

Homepage

Challenges Page

Challenges Chat Page

The second app I analysed was Fitbit. I chose to include it in my research because it’s an app that does a pretty good job of combining personal fitness tracking with a social aspect where users can start challenges with friends and message them privately as well. I liked that users can easily access their daily goals when they open the app and see a historical view of how they’ve been doing by clicking on each goal. Users are also able to add friends, message their friends directly within the app, and create group challenges with their friends.

A few things I disliked were the fact that all the challenges are preset, users are required to go to another user’s profile to send a message (there’s no way to compose a message to someone in your inbox unless you’ve messaged them before), and users can’t create group chats unless they create a group challenge. I also found it difficult to locate the challenges section of the app.

Facebook Messenger

Homepage

Chat Page

The final app that I analysed was Facebook Messenger and there wasn’t really anything I disliked about it. It’s a standard messaging app, but I still wanted to include it in my research for inspiration when it comes to building a clean messaging interface. I liked that users are able to access their individual and group messages in the same place and users can easily compose a new message by clicking the compose icon in the top right corner of the app. Users can also see bubbles of their friends that are currently (or were recently) active.

User Flows

The first step in designing an engaging and intuitive messaging system for Fitwell was to create my user flows. The app already provided users with the ability to create and share goals with friends and family, so I wanted to make sure I incorporated this key functionality in my messaging feature as well.

The four flows I designed were as follows:

Compose a message
- This flow would allow users to navigate to an inbox page where they would be able to reply to existing conversations or create new ones (both individual and group)
Share a goal
- This flow would allow users to select a goal from the already existing goals page and share it in a message
Share an achievement
- When goals are completed they become achievements so I designed this flow to alert the user when a goal has been achieved and prompt them to share it in a message with their friends and family
Message a group
- Another feature that already exists in Fitwell is the ability for users to join fitness groups or clubs. I designed this flow in order to integrate group messaging directly into fitness groups

Wireframes

When designing my wireframes I chose to draw inspiration from the classic messaging experience of Facebook Messenger, and some general layout choices from the two fitness apps I included in my competitive analysis. I wanted to ensure that the messaging component of the application was seamless and familiar, and I wanted to give the user an overall fun and playful experience using the product.

Inbox Page

Achievement Modal

Chat Page

Group Page

Goal Modal

Group Chat Page

User Testing

To make sure that my wireframes were clear and accomplished the task that I had been assigned, I did five remote user interviews. From these interviews I learned the following:

Users wanted their inbox to be accessible from anywhere in the app (my wireframes only had the inbox icon in the header on the user’s profile page)
Users wanted group chats (from Fitwell groups) to be added to their inbox
Users wanted to be able to share a goal or achievement to some kind of news feed

Overall the five people I interviewed seemed to really like the direction I had taken this project and had a very easy time navigating through each flow.

High Fidelity Designs

Once my wireframes had been completed and tested, I moved onto creating my high fidelity designs in Figma. I kept most of the layout I had already put together in my wireframes, but with some improvements to reflect what I learned during user testing.

First Iteration

Inbox Page

Chat Page

Group Chat Page

Like I mentioned before, I wanted to follow familiar patterns and flows when it came to designing a messaging feature for Fitwell. I chose to use vibrant colours for the majority of the application so that users would feel excited and motivated by the experience, but chose to keep the colours for the messaging part of the app fairly simple. I used a dark blue for the user’s message bubbles so it would feel familiar like using Facebook Messenger or iMessage, and rather than using grey for the other chat bubbles and “Compose Message” bar I chose to use a very light, somewhat dulled periwinkle to keep a little colour and vibrance throughout the design.

User Testing

Once the first iteration of my high fidelity designs was complete, I conducted five more user interviews. These interviews revealed the following:

Users found the purple header and footer to be a little too bright
There were too many different styles of buttons (3) being used throughout the app making it feel inconsistent
The fitness group page felt a little messy and there wasn’t enough information being displayed

My takeaways from these interviews were:

Change the background and icon colours for the header and footer
Decide on only two button styles to keep the app feeling clean and consistent
Redesign the details section of the fitness group page

Second Iteration

The main elements I changed for the second iteration of my hight fidelity designs were the app header and footer and the fitness group page:

Group Page v1

Group Page v2

These improvements made a world of difference, leaving a final product that is so much more elevated and refined. I wanted to create an application that felt exciting and playful, but realize now that having such a bold colour for the header and footer made it feel a little overwhelming. The new crisp white background with pops of purple makes for a design that is still playful, but doesn’t draw away from the content of the app.

After the second iteration my designs came out looking like this:

Inbox Page

Chat Page

Group Chat Page

Future Considerations

Had I been given the opportunity to iterate more on these designs, I would have considered the doing following:

Designing a group chat page for fitness groups that behaves more like Slack
Giving users the ability to share goals and achievements to a newsfeed
Designing a flow for users to post updates to a newsfeed

Conclusion

Overall I’m very happy with what I was able to create for this project. I believe that I built a messaging feature that is intuitive and engaging, with a design that feels refined yet playful.