Project Overview

Problem

Wanting to get fit or stay healthy can be a constant struggle for most. I personally struggle to stay accountable while working out. Some days I just do not feel like getting up and exercising. There are many fitness apps that provide good workouts, apps that show you classes, and apps that allow you to log your runs. There are many workout apps on the market but users still have a problem staying motivated. Users have voiced that interacting with friends and family could help their engagement. The lack of success from current applications suggests that there is a problem in messaging friends and family while working out.

Solution

I created a fitness app that allows users to quickly start a run, find a local class to take, and or access a workout routine all in one place. Fit Buddy gives users the freedom to exercise how they want to. But beyond the all-in-one fitness app, Fit Buddy keeps users connected with friends, family, and followers. Creating a social aspect to your workout helps users stay motivated and accountable, and who doesn’t love a little friendly competition? With Fit Buddy getting and staying fit will never be easier!

 

Role

Product Designer

Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Information Architecture

March 2020 - March 2021

Tools

Figma, Miro

 
 

Discovery

Competitor Analysis

To learn more about the fitness app industry I studied the industry leaders. I looked into the ways that the industry experts have approached this similar problem.

My goal was to analyze my competitors to see what was positive and what was negative about my experience. For my competitor analysis I used MapMyRun, Apple’s Fitness app, and Nike Run Club.

MapMyRun analysis, made in Figma

Apple’s Fitness analysis, made in Figma

Nike Run Club analysis, made in Figma

Likes

  • The use of an explore page creates an easy way for users to scroll and see friends and followers activity.

  • The ability to share workouts.

  • Specifically, Apple’s option to create challenges with friends.

Dislikes

  • There is no way to message friends in-app. Apple uses a separate app to log messages.

  • The UI is confusing when creating and looking at leaderboards.

  • Apps are limited to one type of exercise.

Company Name & Visual Style

From my competitor analysis I wanted to create an app that put all your exercise needs in one app, while also creating an intuitive social feature. I wanted to create a name that was simple and fun. Focusing on my goal for the app I knew the app needed to be a combination of exercise and friends. Fit Buddy came right away.

Visual Design

My visual design was based around the color red. Red is energizing, powerful, and can boost self esteem. I searched for fitness imagery to find the rest of my palate. An image that stood out to me were the weights for powerlifters; colorful but also follow the tetradic color scheme. The color palate of red, blue, green, and yellow promote feelings of optimism. For images, I wanted to show team work but also self discipline. While using Fit Buddy, users should feel empowered working together but also working on yourself. I used a billboard with the quote “COMMUNITY IS STRENGTH.” This image inspired the bold, all caps font for Fit Buddy’s Wordmark (Fugaz One), as well as the heading font (League Gothic). I used Roboto for the paragraph text as it stands out next to the heavy weighted heading fonts.

Brand and style guide, made in Figma

 
 

Project Plan

I created a project plan to determine the timeline and deliver Ft Buddy on time. Having the plan helped me stay on track as I completed each phase of the project.

Project Plan created using Figma

Research Plan

Next, I put together a research plan in order to develop research questions, methodologies, and a way to recruit participants.

Overview

Find a better way for people to stay engaged using a workout app through communication with friends and family.

Research Questions

  1. What are people looking for in a workout app?

  2. How do users use workout apps while working out?

  3. How do people interact with their friends while working out?

  4. What apps are people using, and why are they using them over a different one?

  5. Does having a partner to hold you accountable help you workout more?

Methodologies

  • Competitive research to see what on the market is successful.

  • User interviews (5)  to understand pain points and behavior toward workout apps.

  • Usability testing (5) with low and high fidelity prototypes.

Recruitment

I wanted to recruit young individuals who were tech savvy, social, and use fitness apps in the app store. In college, I studied Health and Exercise Physiology and played for the soccer team. This gave me a perfect set of potential participants. I recruited 5 participants who used one or more fitness apps.

Interviews

After finding 5 participants, I wanted to learn more about their habits. I conducted interviews via Zoom, each interview was 1 on 1 and took about 30 minutes.

Findings

  • Participants use fitness apps before, during, and after workouts.

  • Most participants use Apple’s Fitness app. When I asked why, they each said because it is easy to use on my Apple Watch.

  • Participants use fitness apps for different reasons, for running, workouts classes, and finding and logging gym exercises.

  • Participants want an all-in-one app. Where they can choose to run, go to a work out class, or go to the gym; without have to use more than one app.

 
 

Design

Personas

After interviewing my participants I created Committed Carrie. This would be the persona for Fit Buddy as I created the app.

Committed Carrie persona, made using Figma

 
 

User Flow

Creating user flows based on my personas needs, would give me a good base for wireframes moving forward. 3 user flows were created, messages, programs, and community.

Messaging user flow made in Miro

Programs user flow made in Miro

Community user flow made in Miro

 
 

Wireframes

From my user flows I designed wireframes that would then be made into a prototype for usability testing. I wanted my wireframes to be simple and minimalistic.

Wireframes created in Figma

 
 

Prototype

Based on my wireframes I created a prototype that would be used for usability testing. Wireframe Prototype Link

Programs prototype made in Figma

Messaging prototype made in Figma

Community prototype made in Figma

 
 
 

Usability Test

Before I created the high fidelity screens, I wanted to determine what problems users might encounter while navigating through each page. The participants were recruited from the initial interviews, usability tests were conducted via Zoom.

Feedback

  • The “explore” and “feed” can be combined

  • In “messages” there should be more of a change when switching club chats

  • Add a legend to the map

  • Add search option for workouts

  • Possibly reword “map” to “run”

I took this feedback and applied changes to my high fidelity screens.

 
 

High Fidelity Screens

I took the feedback from my usability tests and designed high fidelity screens. While creating these screens, I focused on making designs that felt unanimous throughout the app. Each exercise page has “stories” at the top to quickly view friends exercises. In a few click you can Save and ad your friends workouts. Users can see their personal exercise history and track their goals on the Profile page.

 
 

Programs pages made in Figma

Profile and Clubs pages made in Figma

Stories made in Figma

Explore and Messages pages made in Figma

 
 

High Fidelity Prototype

After receiving feedback from my usability test on my wireframes I created my high fidelity prototype. For my prototype, I wanted the app to be minimalistic but still have pops of color. Fit Buddy has animations to help keep the user visually engaged. Each page was designed so the user always has access to their messages and friend’s “stories.” and page. For the running aspect of Fit Buddy I created a smartwatch prototype as well. After each mile, users are prompted to rate how they felt their last mile went. The results are then logged and seen in the saved routes in the app.

View High Fidelity Link

 
 

Mobile device prototype created in Figma

 

Smartwatch prototype made in Figma

 
 

Evaluation

Final Round of Usability Testing 

The design and animations impressed participants. The navigation was easy to follow, but some participants voiced they “wanted to click on more options.” With more time, I could develop the less important pages that participants were looking to navigate to. Participants commented that the “stories” fiction would keep them engaged, and that they liked how they could quickly see their friends’ exercises. When I asked if seeing these “stories” would motivate them to get active, they each said they would feel motivated. Participants found the addition of a smartwatch to be a key feature, as each of them uses a smartwatch daily.

Conclusion

Fit Buddy keeps users engaged and motivated to stay fit. Users can choose their style of fitness, as well as combine desired exercises. The minimal design combined with the pops of color and animation keeps the users’ attention. The effortless navigation throughout the app keeps users coming back. Whether it is for staying in touch and in shape with your friends or focusing on bettering yourself, Fit Buddy is here for you.

What I learned

Understand Your User

Coming from a health and fitness background, I have a good feel for different workout apps. With that being said, everyone uses workout apps differently. Creating Fit Buddy required me to drop all biases and listen to interviewees and potential users. Hearing each person’s point of view made me realize how diverse fitness apps can be. Some people wanted apps just for running, or just lifting, or just classes. Gathering feedback helped me structure a design plan and create a fitness app that I would use every day.

Next Steps

In the future, I plan to create a more intuitive start function for exercise pages. With more time I would be able to dive deeper into the fitness needs of users, doing this would lead to more engagement and a better experience overall.