The Company
FitTogether is a family and friends fitness app that allows you to track and gauge your fitness goals while also being able to see what your family and friends are achieving.
The Problem
FitTogether is looking to add more robust features to their app in the form of messaging and alerts. These additions are for the end goal of improving user retention and usage throughout their app. They want to implement features in addition to messaging that will encourage users to keep using the app and to also encourage their family and friends to persist in using the app.
This comes from the product manager’s hypothesis that if members of the family or group can message individuals or the entire group throughout the experience, repeat usage metrics will increase.
The Solution
I ran through an entire month of design following the guidelines of design thinking methodology which includes the 5 stages: empathize, define, ideate, prototype, and test. With this I created several features into the app including a messaging system that would allow users to message and encourage their friends along the way in any sort of fitness journey they were parking in.
My Role
I was brought into the project to create a way for users to message their family and friends through the usage of the app. I used existing metrics as well as competitor research to create additions to the app that would enhance the overall user experience.
Design Process and Journey
Competitor Research and Secondary Research
Upon starting this project the first thing I began with was looking online and through the download of other apps to see what other fitness apps had done to solve this similar problem. I know I wanted to implement a chatting system, but the main design hurdle was to figure out a way to add this feature without it being either redundant or unnecessary.
To help me solve this particular conundrum I looked through three specific social fitness apps, which included Strava, Map My Run, and All trails.
As I looked through these apps I noticed several things that all three of them did in a similar fashion. The biggest one that influenced the trajectory of my design was having a more community focused design that allowed users to join groups and post their progress or their exercises for both their friends and family to comment on and react to.
Though I did notice that these apps were very limited in their chat functionality and that they had a very basic layout that simply allowed you to add friends from either your cell phone number or through linking your account through Facebook or Google. This would ease the hurdle of being able to quickly and easily add your friends and family to groups or to your friends list so you can quickly start interacting through your fitness goals.
Design
Based on the research I accrued I opted with a branching user flow that would start with the user logging into the platform with the choice of either signing in through email or a Facebook account to easily facilitate adding friends and family. They would then have the ability to visit these friend’s profiles to leave comments on their progress or to choose to chat with this friend directly.
Once on the home page the user would then start a workout or submit a goal which they would then be able to add to their homepage or send directly to a group or community they are a part of. From the home page as well the user would be able to click on the navigation buttons to send them directly to recent chat messages or group messages to engage with their friends or family.
Low Fidelity Wireframes
Once my user flow was decided I went about using the template the client gave me for this initial design and implementing the design decisions I had come up with. In this stage, my goal was to create something that allowed users to better interact with their friends and family in the app without disrupting the initial wireframes that were provided to me.
Link to Low Fidelity Wireframes: https://www.figma.com/design/nA7s3NkA6saVgoZPcT3Wbj/FitTogether-Wireframes?node-id=0-1&t=JoGvxqPadeybykPP-0
The first thing I did was to fulfill the initial desire of the client to create a way for users to chat with one another inside the app itself. Taking inspiration from several other fitness apps that included community chatting as well as apps that were solely focused around communication and chatting, I created an easy to use chat system for both friends/family as well as groups that the user might have joined.
As well as adding this chat screen, I also changed how the bottom navigation bar was laid out, as it was originally words only. To make navigation easier and more appealing I added icons as well as the chat button so that users could easily navigate to their chats from anywhere on the app.
After I created the baseline feature of chatting, I started to go back to the previous screens to start adding more implementation of these chatting features into the current design of the app.
Along with these additions I also redesigned the home page to also focus on what the user’s families and friends are doing so that it is easier to engage with them by putting their most recent activities or achievements right onto the front page for the user to see. With these on the front page, the user would be able to comment or give praise to their friends with a simple button press.
Usability Testing
With my low fidelity models done I went about finding users to test these designs so I maye later iterate upon them. To begin I set about finding five participants that both used exercise apps and also exercised or ran on a regular basis so I could have them go through my designs and give me their thoughts on the design and if they think that it would help them or would interest them in keeping up with their friend’s or family’s routines or accomplishments.
For the test I focused my questions on whether or not the design was coherent and that the user would get the sense that they would be able to chat with other users and keep up with their family’s or group’s progress in their fitness goals.
Theses were some of the questions that were asked during this interview period:
You’re now looking at your homepage, do the icons on screen give you any idea of what they mean and what they might be used for?
If you saw friends participating in a class, would you be more willing to also join? Especially if they messaged you about it?
Would receiving a thumbs-up on a post that you created after submitting a workout make you more willing to continue?
Would you feel more motivated if you saw your other friends doing well and progressing through their goals?
If a popup appeared over the app when a friend achieved a goal, how would you feel about it?
Usability Findings
After conducting these interviews and tests, I compiled several critiques on the design from users:
On the class screen, it could be possible to get confused between what sharing and message could mean.
Popups are too big and would get in the way if you were trying to click on something else and it shows up.
Filter suggestions can be confusing as it makes it look like those are some of the only options that you have.
It’s unclear who might have achieved anything from the popup as there’s no name attached to it, just an icon.
Friend activity seems a little too small to be able to show any sort of useful information for what the friend has done.
High Fidelity Wireframes
Link to High Fidelity Wireframes: https://www.figma.com/design/lNrhzRqmMukh1C10cyRCyp/FitTogether-High-Fidelity?node-id=0-1
Finally, after taking the feedback from user interviews into consideration, I jumped into creating the high fidelity version of the design where I made changes to the final product to better reflect user expectations and wants.
Firstly I went about updating the main user home page to better show activity from user friends and family as they would be submitting their progress or exercises. These cards would be able to be swiped to the side in a side scrolling manner and from this home page the user would be able to send a like to the other user to encourage them to keep going and leave a comment. If the user scrolled down on their homepage they would be able to see local clubs or activities that are going on in their area
In this homepage as well as any other screen on the app, if a friend achieves one of their goals, the notification bell in the top right corner of the app would flash with a red icon and the user would be able to click on it to see and also transit to the other user’s activity to comment or otherwise.
If a user clicked on one of the activities in their local area, they would be sent to the activity page where they would be able to RSVP for the event as well as share it to their friends. A user would also be able to see if any of their friends are also participating in the same activity so they would be able to make an informed decision if they were interested in doing the activity together. The user would also be able to share the activity to their homepage to let others know about it and to let others know they will be attending.
Once clicking on the chat icon at the bottom bar of the app, the user would be sent to the chat screens. Once there the user would be able to bring up any recent messages they received from their friends or family. The user would also be able to switch back and forth between messages sent by their friends or by messages sent by groups that the user is a part of.
Once the user has submitted their exercises and achieved one of their goals, they would be prompted by their notification bell. If the user clicks on the notification, it would ask if the user would be interested in posting their achievement onto their friend’s and family’s homepage so they could motivate others to do the same.
Conclusion
Outcomes
Focusing on competitor research, as well as secondary research helped me quickly hone in on what users expect and would want to see from the various fitness apps that they use. Using this information, I was able to create an app that allowed users to do exercises or activities, post them or announce them on their homepage, and allow their friends or families to engage with these posts or chat between them at their leisure.
Challenges
Taking an already existing design and fundamentally restructuring it was a huge challenge to my burgeoning skillset. Having to go in and parse the design choices both in Figma as well as the design in of itself was a difficult, but rewarding puzzle to put together. There were times that I felt like I was going in the wrong direction and that I had hit a brick wall, especially doing this as a solo designer with no one in my space to bounce ideas off of. I had to stick with my gut feeling and the research I had conducted, as well as my user interviews to make the best, informed decisions that I could.
What I learned
I definitely learned how to best tackle a project within a specific timeframe, keeping myself motivated and focused to be able to complete the designs to the client’s specifications without getting bogged down in the spiral of constantly second guessing my own decisions. I feel like I also learned how to not organize and create a low fidelity design that someone else will have to go into and edit if such a thing were to happen with any of my designs. Though with this project I can tell my abilities as a designer has improved significantly when compared to my beginning projects.