UX Design
Frontend Dev

Joyfit

Mobile fitness tracking

Timeline

3 weeks, Dec 2024 - Jan 2025

Role

UI/UX Designer

Process

User research and synthesis, ideation, prototyping, iteration, usability testing

Tools

Figma

The Problem

Many people want to make exercise a habit, but maintaining an active lifestyle can be hard.

Millions of people every year make going to the gym a New Year’s resolution, but few stick it out past a few months. (I, for one, have tried and failed!) For this personal project and UX case study, I wondered: how might we motivate people to stay active?

Problem visualization

Research

Desk Research

According to the CDC, in 2020, only about a quarter of US adults met the physical activity guidelines for aerobic and muscle-strengthening activities, with the percentage decreasing with age. This fraction is almost 10 percentage points lower for women, and this fitness gender gap represents a real and persistent health equity concern that arises from differences in access to athletic opportunities, the division of time and labor in households, and perception of safety and comfort in exercising spaces like gyms.

User Research

To learn more about specific user needs and pain points associated with starting and maintaining active lifestyles, I conducted two user interviews with young adults between 18-34. Questions focused on their current exercise habits and major challenges they’ve personally faced with staying active, and key questions included:

  • Why do you exercise? What does being active mean to you, and how has that changed (or not changed) over time?
  • Can you tell me more about your favorite experience exercising? Where was it, and what made it enjoyable for you?
  • Can you share any challenges you’ve faced in your fitness journey, if any–physical, emotional, mental? Tell me more about your experience working through them.
Joyfit - Affinity Map

Competitive Analysis

After conducting a competitive analysis on other major apps in the same market, including Strava, Garmin Connect, and Apple Health, common features emerged: an emphasis on recording performance metrics, highly visual information flows through data visualizations and maps, and opportunities to connect with friends by sharing progress.

Joyfit - Competitive Analysis

Synthesis

After primary and secondary research, I synthesized insights from my user interviews with an affinity map and identified several key user pain points:

  • People find it difficult to stay accountable and develop a consistent routine for exercising.
  • People seek recognition for the effort they put in beyond the numbers and metrics.
  • People desire meaningful ways to connect during activities with their friends and communities.

Other common themes that emerged were the difficulty of maintaining an active lifestyle as busy students and working adults; the challenges of creating routines and staying consistent; and the impact of social networks and media on people’s motivation to exercise.

Joyfit - Affinity Map

To help launch the next stage–Ideation–I brainstormed “How Might We” statements to spark ideas and begin translating identified user needs into potential solutions. Some of these included:

How might we make exercise part of an everyday routine, instead of something to do after work?

How might we make staying active feel like an adventure, not a chore?

How might we inspire people to stay active through intrinsic motivation?

Defining the Problem

After the research stage, I zeroed in on a guiding question to propel ideation, driving the next stage of the design process:

How might we use activity metrics as motivation to have fun rather than as pressure to perform?

Ideation

Rapid Brainstorming

With the identified user needs in mind, I started brainstorming to throw out lots of potential ideas using the Crazy-8s design exercise and mind mapping.

Joyfit - Mind Mapping
Joyfit - Rapid Brainstorming

Developing a Solution

My final solution is a mobile app for activity tracking that incorporates fun and lightweight metrics for cultivating community and centering the joy of exercise. Users earn playful, personalized badges for each activity they complete, while an interactive community map lets friends discover and comment on each other's routes. The mood-tracking feature uses expressive stickers to help users track how different activities make them feel, focusing on emotional wellbeing.

Design

Low-Fidelity

Here are a few of the initial screens sketched to begin imagining what the interface could look like and how features would look.

Joyfit - Low-Fidelity Screens

Mid-Fidelity

To start fully fleshing out the concept and define the layout of key task flows including logging activities, viewing past activities, adding friends, and tracking badges, I created a medium-fidelity prototype.

Joyfit - Medium-Fidelity Screens

Mood Board

I created a moodboard to refine the overall vision for the design style including fonts, colors, and general themes before prototyping. The final style guide draws inspiration from familiar symbols and colors associated with outdoor fields (e.g. baseball, tennis, track). Brighter colors were selected for a sense of playfulness and delight in line with meeting user needs for less pressure and more community while staying active, while being conscious to maintain high contrast throughout for accessibility, especially for people with red-green color vision deficiency.

Joyfit - Moodboard

Final Design

Key Features

The final design maintains a joyful, lightweight feel while also drawing UI inspiration from well-established, renowned social apps like Instagram and Twitter for social networking features to create an intuitive and delightful user experience. The final high-fidelity prototype incorporates Apple's iOS 18 UI Kit and the SF Symbols library for consistent and clean elements. Key features include


  • Activity feed with comments to allow people to see their friends posts, comment with encouragement, and view the fun badges they earn!
  • Recording activities with motivational messages generated as you go
  • Mood stickers to track how activities feel
  • Low-pressure badges earned after every activity for completing fun, random challenges that are detected as you go, like completing a climb on the first try or passing 10 maple trees on a run
Joyfit - Final Design 1Joyfit - Final Design 2Joyfit - Final Design 3Joyfit - Final Design 4
Joyfit - Figma WorkspaceJoyfit - Final Design 5
Joyfit - Demo

Reflections

Going through the entire design process for this personal project, I reflected on how centering user needs from the start sets a crucial foundation that is necessary to guide the rest of the entire process, with insights for who the product is for, what it's used for, and the problem it should solve. I also learned how to leverage common design patterns to make an app more intuitive to use, building on the interfaces that people know and love to innovate. Finally, I learned how important it is to create cohesion across a design, both for visual appeal and usability.

Next Project

IBM AI Assistants