Case Study - FITTR App
Written by Dawn Mulloy
Making An Addition To An Existing App
The FITTR app is an established fitness app that has already gained users and a following. In this Capstone project scenario, I was approached by the creators of a fitness app to help them integrate a messaging system into their app. They wanted more than just a messaging option, they wanted something that would help raise their engagement and repeated usage metrics. I was also instructed to come up with a name and branding style for the app.
My Role
For this project, I started from the problem space - “How might I create a messaging platform that is both engaging and makes the user want to use it often?” - and performed all the steps of an ideal UX/UI process up to the final design and testing with real users. Overall, I was the UX researcher, the design strategist, the developer of the brand’s logo and style, the usability tester, and the prototype designer for FITTR.
Before starting the project, I came up with a project plan to keep myself on track and organized. My plan consisted of; competitor research and user surveys, user interviews, the development of lo-fi visuals made into hi-fi screens, and user testing through a hi-fi screen prototype. With a tight deadline, I spent many hours in a little over a week to complete the challenge. You can see the full project plan here.
The Research
Since this company was looking for a messaging platform that really works, I started by researching different competitors, and other fitness apps.
My main focus was on the top contenders:
-
Productive Habit Tracker
-
Fitlist - Gym Workout Log
-
Map My Run
-
Nike Run Club
For a full view of this chart click here.
With this research, I learned that messaging features are not common in fitness apps. Keeping this in mind, I now needed to find people in the company’s target audience to talk to and get to understand what they want from a fitness app that they would use with their friends and family.
To do this, I sent out some user surveys and recruited some fitness-loving people to help me find the best solution to the challenge I had ahead of me. These surveys helped me weed out the target audience I was looking for. Once the surveys were in, I reached out to those who matched the criteria to find out who would be willing to participate in some usability testing on my new functions for the FITTR app.
Insights and Key Findings
After completing the research and conducting the initial user interviews, I went ahead and did some affinity mapping. This method helped the insights come to light through the similarities found in each user interview.
The insights I discovered were as follows:
Active individuals…
-
Talk “fitness” with their loved ones - the want to discuss their routine exists.
-
Have active friends and family - they have people to exercise with.
-
Enjoy friendly competition - they are willing to participate in fun challenges to stay motivated.
-
Set & meet their own fitness goals - they have personal goals that they want to achieve.
The Solution
Now that I knew what the app should focus on, I was able to decide on the key components of the messaging features I was adding to the FITTR app.
To help get my thoughts in check, I created a user flow (←- click the link to see it larger!) This user flow showed how the user would be introduced to the new messaging features, like challenges and stickers as well as group and individual chats.
From there, I designed low-fidelity versions of my screens. This was the best way to visualize what the screens would look like and how they would flow together seamlessly.
Using these low-fidelity screens as a template, I was able to design high-fidelity screens that incorporated the design style I created for FITTR. For the design style, I was sure to use colors that represented trust and excitement mixed with high contrast and gradients for ease of use and a sense of tranquility. Then, I developed a working prototype.
Testing
Once I finished designing the high-fidelity screens, it was time to animate and create a working prototype to showcase for user testing. The first round of user testing resulted in many edits being made, which was expected.
​
The main issues were:
​
-
Users wanted to see new features in action
-
The “Get Started” button was getting overlooked
-
The “Share Achievements” icon didn’t relate to the word “share”
-
Some UI elements needed to be touched up
So, for the next round of testing, I made sure to create a screen for each “chat feature” that showed how the feature would be used in an actual chat; found an icon that closely related to the word “share” in order to clear up any confusion; and touched up the UI which included making the “Get Started” button stand out more. Upon re-testing, there was positive feedback and 100% task completion by each user. The testing process showed me how necessary it is to get many eyes on one product because other people will always catch something the designer either overlooked or didn’t think of in the first place.
Challenges
Overall, the biggest challenge I faced during this project was the challenge of a strict deadline. This was towards the end of my UX/UI Bootcamp so I needed to be sure I would make all the time restraints in order to finish by my end date. That being said, a lot of this project was put on high-speed and I had to sacrifice many late-night hours in order to get it finished properly. Because of the crunch time I needed to put into this project, it was difficult to get participants outside of my circle of friends and acquaintances. This is a challenge in itself because it is hard to convince people close to you to give you real, constructive criticism. I also had a hard time coming up with the best way to implement a messaging feature that wasn’t just a messaging feature. My solutions took a lot of brainstorming, but I think they worked out in the end.
What I Learned
The main thing I learned from this project was how complex UX/UI assignments are. This project was different from anything I had done before because it challenged me to add something to an existing product. This taught me how to think a little differently in the research and design process. Since this project had a tight deadline, I learned how to use all the time I had in an effective way in order to meet the criteria promptly and correctly. I feel like I have leveled up in the time management field after completing this Capstone! All of these lessons are experiences I will always remember and look back on when faced with many other UX/UI challenges.