Fitness App - Mobile

UX Design
Dumbbells on rack
Client
FLUX
Project Type
UX Design
Project Year
2022
User profile screen
Onboarding screen "Track your goals"
in app messaging screen
No items found.

I. Overview

The Problem:

Users feel that they cannot always connect with other users in a meaningful way while reaching their fitness goals and often disengage as a result.

The Solution:

Create a messaging system and/or other social elements to help users feel connected while also increasing engagement and repeat use of the product.

My Role:  

Lead UX Designer ( Research, Interaction, Visual Design)

II. Map

Before diving into the design process for FLUX’s new features, I took the time to map out the project to prioritize my workflow better and manage time constraints. Due to the limited timetable for this project, a modified design sprint model was the best approach to accomplish the goal of creating a new feature and moving to a high fidelity prototype quickly. 

Secondary and Market Research:

I began my research by looking at leaders in the fitness tracking app space. I reviewed competitors such as Map My Run, Fitlist, and Productive Habit Tracker. I wanted to learn more about what social engagement elements were utilized within these products and if they served the users well.

This market research combined with secondary research allowed me to create a shortlist of key features that would increase FLUX’s success:

  • Social engagement is critical in the form of:
  1. A social feed
  2. An internal/direct messaging system
  3. The opportunity to share various accomplishments and app features with external social media platforms.

III. Design

User Flows:

Using takeaways from my research combined with crucial information provided in FLUX’s project brief, I mapped out end-to-end user experiences.

Low Fidelity Sketches:

Using the user flow created, combined with my market and secondary research as a guide, I began creating low-fidelity sketches of what the product would look like. I then captured these sketches as images and, using Marvel, created a simple clickable prototype for my first round of usability testing. 

Sketches of User onboarding screens

Sketches of Goal setting screen, Social sharing screen, and user profile screen.

IV. Validate

Usability Testing:

Before beginning my first round of usability testing, I created a test script, which included a list of tasks that would be essential to test the usability of my design.  I then conducted the interview and testing process with five participants. These participants met the qualifications of a user that stakeholders had set. 

  • Between 18-34 years old
  • Uses their phone for several hours per day
  • Very budget-conscious
  • Messaging and communicating with friends and family is an essential part of their daily lives. 

My research questions were focused on:

  • Ensuring that users could easily invite friends to use the app during the onboarding process.
  • Share various activity RSVPs, goals set, challenges joined, etc., with other users via direct message and sharing to the internal social feed. 
  • Ensure that users can locate the messaging feature and easily understand its functions. 

I took notes during each session and summarized all areas that indicated a need for improvement after completing the testing process. These items were categorized in order of priority to be easily incorporated into the next iteration of the design.

V. Design

Brand Identity Development:

After considering what existed in the fitness app space and what had been successful, I began creating what would become FLUX.

I chose the name FLUX because it means to be in transition, a state of transformation, or fluid. FLUX is designed to be a constant resource no matter the transition or transformation.  With the addition of our new social features, it is now easier than ever to have a support system in place for whatever physical transformation you’re after. 

Next, I created a color pallet, fonts, and a UI kit that aligned with FLUX. The color pallet chosen is meant to capture the brand’s Contemporary, Trustworthy, Humorous, and Motivational personality.  The font “Poppins” was selected for its simple and contemporary look. This font was utilized throughout the app’s design. 

High Fidelity Screens:

With my first usability test complete, it was time to create high-fidelity versions of the sketches made a few days prior. These sketches would ultimately become the prototype used to test and validate the solution. 

Due to time and budget constraints, I selected a basic UI kit to serve as a jumping-off point. I then modified and created additional screens, utilizing my color pallet and layouts in Figma to meet the project's needs. Each design decision made was carefully made with the influence of my market research, user feedback, and stakeholder goals in mind. 

VI. Iterate

Usability Testing:

Once my high-fidelity mockups had been made into a prototype, it was time to complete another round of usability testing. A new set of five participants were asked to achieve the same tasks with some modification for changes made to the design after receiving feedback from the initial usability tests. My goal for this testing session was to discover if this iteration of my designs met the user's needs and solved any problems during the initial testing process. 

From this process, I gathered valuable feedback for a second time. Some main takeaways were:

  • The message screen felt a bit crowded.
  • A link that was meant to allow users to set fitness goals was mistakenly made too small.
  • Users preferred the message screen to remain open after they sent a message. They wanted this feature to act more like a text messaging system rather than email.

These were great points that I could take back and make a second iteration of my High fidelity screens and remedy these issues fairly quickly. This process ensured the creation of an intuitive and engaging user experience.  

VII. Conclusion and Next Steps

Overall, I am delighted with the outcome of this project. Creating a social element within a fitness product is a proven way to engage users and build a community culture.  

I dove headfirst into this project with the intent to create something engaging and beneficial for the users of FLUX. I wanted to accomplish this while ensuring that these features complement the fitness app. My goal was never to redefine FLUX but to enhance its offerings, and I believe I have accomplished just that. 

FLUX Prototype

Other Projects

Let's work together!

I am open to collaboration and creation in all industries. If you have a desire to see how a user-centered design can improve your business, please reach out.

I look forward to chatting with you!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.