Fitology Case Study | AM Designs

Fitology: Making a Fitness App Social

Fitology is a fitness mobile app that allows users to find fitness groups, track their fitness progress, and share it with friends. In this hypothetical prompt for a Springboard project, the “company” wanted to incorporate messaging and social features that will increase and sustain user engagement.

As UX Lead of this 4-week project, my goal was to develop an integrated messaging and social experience that aligns with the brand style and company goals. To achieve the company’s "vision," I employed the UX design process in 4 phases: discovery research, design, validate, iterate.

Click here to view the final prototype in Figma.

Mimicking a real-life work scenario

For this bootcamp project, the goal was to imitate a real-life work scenario where I'd have to design based on a pre-existing app, brand style, and design system.

To do this, we were instructed to find a UI kit online and design hi-fidelity mockups following the style of that kit, as though it were the company's "brand." Click here to see the UI kit I chose.

While adhering to the general brand style, color palette, and font choice of the UI kit, I still designed the entire hi-fidelity mockup myself, almost entirely from scratch.

With that, let's dive into the case study!

Research: Survey + Synthesize

To begin the project, I first had to get a better understanding of the target user. The "company" (read: the project prompt!) had provided me with the following context about their customers:

Average user is between 18 - 34 years old.
They are very tech-savvy — on their phones for several hours a day.
Users are very budget-conscious.
Messaging and communicating with friends and family is a very important part of their daily lives.

However, this alone was not enough background information, so I needed to survey users myself as well. Because I was short on time I had to collect as much information as I could as quickly as possible. To do this, I put out a “flash survey” post on social media (Instagram) asking people to answer just two simple questions:

Have you ever used a fitness app before, and if so which one(s)?
What did you like or dislike about the app(s)?

Example of user responses I received from my "flash survey" on Instagram.

People responded via direct messages with their initial answers, and I would ask follow up questions as needed. Altogether, I was able to have conversations with 15 people, all within the "company's" target user demographic.

This testing method was unique, and not something I had ever tried before in my experience as a UX designer - however, I found it was highly effective, as it gave me a quick snapshot of what fitness apps target users are familiar with, and allowed me to cast a wider net than if I had done 1-on-1 Zoom interviews.

Affinity mapping my findings. Sticky notes are color-coded: yellow for general likes about fitness apps, blue for dislikes, green for experiences with social features in fitness apps.

To synthesize my research quickly, I employed thematic analysis and affinity mapping.

First, I took detailed notes from all of my conversations and put them into a spreadsheet, organized by data point to highlight repeat observations. Click here to view the spreadsheet.

I then wrote all of my notes onto sticky notes, and arranged the sticky notes on my wall into groups to identify key themes.

The 6 themes I identified in my research were:

Users predominantly use fitness apps to track their own progress over time -- not necessarily for social purposes.

When they do look at other people’s progress, users both look at what their friends are up to and other users in the app in general.

Users like social fitness apps that support journey-based exercises (e.g. bike rides, jogs, hikes, etc)

Many users only use social features of fitness apps to share to their main social platforms like IG or FB.

Variety to choose from is key, whether it’s tracking exercises, logging food, or something else.

Ethics questions: how do fitness apps promote unhealthy relationships to food and/or body image?

Design: Sketch + Wireframe

Examples of my early sketches that I hung on my wall to keep me on track.

I first started sketching some ideas and flows, taking notes in written form and sketch form. I also wrote out the goals provided to me by “the company” and ideated some features that would meet those goals.

I ultimately established the following red routes for the minimum viable product:

Create a feed of posts where users can share content and fitness progress with their friends.
Create groups, similar to Facebook groups, for the different fitness clubs users can join through the app, where content and post can be shared with other members.
Create a messaging feature that allows users to send 1on1 messages and create group chats

To make sure I stayed on track and understood every facet of these red routes, I designed user flows on a Miro board.

User flows for the 3 main red routes. Click on the image to view the full artboard in Miro.

Validate: Test + Iterate

For the first round of usability testing, I interviewed 5 users via Zoom and asked them to complete a set of tasks on the lo-fidelity wireframes.

My goal was to test how successfully users can fulfill social "tasks" on Fitology. The tasks they were asked to complete were:

RSVP to the Beach Run Club’s event tomorrow, and share it to your feed.
Send a message to Dan, just saying Hi!
Start a group chat with Amy and Ben saying Hi!
Post your most recent picture from your camera roll. Then, leave a comment on Jamal’s post.
What are your thoughts using this application?

After each interview, I reviewed the test recordings and took notes of my observations and issues users faced. I conducted a thematic analysis of my findings and compiled my recommendations in a usability report. (Click the links to review the reports)

A benefit of doing usability testing at this stage was that I caught certain issues well before finalizing the design. I then iterated the wireframes in accordance with my findings so I could move on to hi-fidelity.

Design: Hi-Fidelity

Some key screens from my hi-fidelity prototype. Click the image to view in Figma.

With the usability test findings under my belt, it was time to design the hi-fidelity mockups.

Recall that for this project, we were instructed to find a UI kit online and design hi-fidelity mockups following the style of that UI kit (mimicking a real-life scenario where we would design based on a pre-existing company/brand). Click here to see the UI kit I chose.

While adhering to the general brand style, color palette, and font choice of the UI kit, I still designed the entire hi-fidelity mockup myself.

Validate: Test Again

To validate my hi-fidelity prototype, I set up an unmoderated usability test via Maze.co. In this usability test, I asked users to complete the same tasks as in the first round of testing. Users also had the option to provide feedback at the end of the testing session.

In total, 12 users completed my usability test. However, 17 people filled out the first question, meaning 5 users ended up bouncing from the test altogether after facing certain tasks they couldn’t complete.

The first two tasks had a 100% and 87% completion rate. However, the 3 later tasks, users encountered some issues. I decided the main fixes I needed to implement from this round of usability testing were:

Make certain icons larger and bolder to increase visibility.
Change the group chat icon to a pill button that says “group chat.”
Make the text in the lower navigation bar bolder and more visible. Several users were not able to find the “Feed” button in the lower nav bar, and bounced from the test.

Here is some of the feedback I received in the optional last question - a mix of positive and critical!

Conclusion + Next Steps

In this project, I developed social features for a Fitness app in a project that mimicked a real life work scenario. I rapid-fire surveyed users, sketched ideas & created wireframes, tested my wireframes & iterated to hi-fidelity, and conducted usability tests on my hi-fidelity designs.

If I were to continue this project, I would recommend the following next steps:

Develop the flow for adding friends and possibly viewing friends’ profiles. Can users add anyone? Can profiles be public or private? How do you find your friends - phone number? Email? In-app username? How do you block users? Where do users go to view and accept/reject friend requests?
Design the ways users can share their progress. Questions like: are there privacy settings users can set either in their profile settings or per post? Also, what can users share? How do we allow users to share their fitness progress with friends without encouraging this behavior? (i.e., forbid sharing weight)
Build out the interface for the fitness clubs. Who moderates the fitness clubs? How do you create a fitness club? How do you learn more about the fitness club? (i.e. needs an “About” page) How do users pay to attend events or be members to certain fitness clubs, and how is that money transferred to the appropriate club organizer?

If you've made it this far - thanks so much for reading! 🤓 Feel free to connect with me on LinkedIn or shoot me an email for feedback, opportunities, or just to say hi!

Screenshot of my wireframes for Fitology. Click the image to view the full file in Figma.

With the MVP decided on, early sketches completed, and user flows established, I moved on to creating lo-fidelity wireframes in Figma. I made this iteration clickable so that I could validate these flows in the first round of usability testing.