Fitted

Creating a welcoming learning environment for newcomers to gain confidence in their fitness journey
Duration:
Role:
Tools:
2 weeks (February-March 2023)
UX/UI Designer ⎯ User research, rapid prototyping, usability testing, brand guidelines, interface design for different devices
Figma, Adobe Color, Human Interface Guidelines
Duration:
2 weeks (February-March 2023)
Role:
UX/UI Designer ⎯ User research, rapid prototyping, usability testing, brand guidelines, interface design for different devices
Tools:
Figma, Adobe Color, Human Interface Guidelines

Overview

About Fitted

Fitted is a digital tool dedicated to supporting individuals in their fitness journey by offering educational resources that cover the fundamentals of fitness. This concept was developed as my capstone and passion project during my time at Flatiron School. My goal was to create a product that not only welcomes but also embraces newcomers to the world of fitness, creating a supportive and secure space for their journey.

My Source of Inspiration

Being an athlete, I frequently go to the gym with the goal of building an exercise routine that fits my personal goals and maintaining an active lifestyle. However, I often felt lost, asking myself:
“How do I use these machines?”
“Am I doing these exercises correctly?”
“Where am I supposed to feel this exercise?”
I watched videos or asked my friends for help, but found that we all had a similar problem. We relied on trial and error and felt unconfident trying new exercises. Then, I asked myself: “How can I help people like us feel more comfortable with learning exercises and getting started?” This inspired me to find a solution.

Breaking Down My Design Process

My main challenge was to design and complete two, well-informed high-fidelity prototypes within a tight, two-week time frame. To tackle this, I broke down the project into three consecutive design sprints, each building upon the insights gained from the previous step.
1

Research and Define

First, I needed to research the problem space, particularly with people’s learning curves, how they may affect exercise habits, and their existing resources.

Secondary Research Insights

In my research, one statistic from a report by the Global Health and Fitness Association stood out to me ⎯ gyms typically lose about 50% of all new members within the first 6 months. [1] This led me to dive deeper into potential hindrances experienced by people throughout their fitness journey.

According to a study conducted by the Singapore Management University, people typically struggled with:

  • Proper equipment-use and posture
  • Time commitment
  • Building a workout routine that effectively targets their specific goals [2]

Exploring Real-World Insights from User Interviews

Subsequently, I valued obtaining first-hand experiences from potential users to validate whether these obstacles were a common pattern. I conducted three interviews with people of various exercise skill levels to learn more about their fitness journey. After synthesizing the interviews through affinity mapping, I found the following trends:
  • Common learning process: All users learned about exercises through a combination of trial-and-error, written instructions, videos, and/or asking friends for help.
  • Feelings of doubt: They were often hesitant and feared judgement when trying new exercises at the gym, specifically with unfamiliar machines and proper form.
  • Trouble with routine-building: Users struggled with building effective workout programs due to a lack of knowledge about the exercises
  • Desire for a straightforward and simple resource: They prefer an app that strictly focuses on education, their workout progress, and is easy to navigate.
Affinity Mapping Groups Synthesized from User Interviews

Evaluating our Competitors

With the user pain points in mind, I conducted a SWOT analysis on 5 direct competitors (Nike, Gymshark, FitBod, MyFitnessPal, and FitOn) to assess their existing features and UI. I identified the following areas of opportunity:
  • Develop a strong brand identity: Nike’s and Gymshark’s training app maintains their solid brand identity by keeping their style clean and consistent through all of their digital experiences, including their shopping website and app.
  • Declutter and prioritize: Fitbod’s, MyFitnessPal’s and FitOn’s UI was cluttered with many additional features, including dieting, recipes, and intrusive ads. A universal feature was the ability to log workouts.
  • Fill in the knowledge gap: Currently, there is little to no guidance on machine-use and posture. Most of the apps are focused on non-equipment and free-weight exercises.

Defining the Solutions and Key Features

Combining what I learned from the user interviews and market research, I knew that the app’s primary focus was to provide the necessary education users needed to succeed in their fitness journey. I narrowed down the scope to the following problem statement and key design decisions to move forward with.
Problem Statement:
Key features:
People that have trouble with learning exercises need a tool that breaks down workouts into easy-to-follow steps in order to build confidence in their fitness journey.
  • Dashboard and Log activity ⎯ Addresses user need to track their workouts and progress
  • Onboarding ⎯ Personalizes and recommends workouts based on the users' goals
  • Exercise Information pages ⎯ Each exercise page should be a one-stop-shop for exercise information, instructions, proper form, and alternative options
  • Search ⎯ Organized curation of resources with straightforward navigation
  • UI Style Kit ⎯ Create a brand identity and UI that is recognizable, consistent, and reflects Fitted’s values
Problem Statement:
People that have trouble with learning exercises need a tool that breaks down workouts into easy-to-follow steps in order to build confidence in their fitness journey.
Key features
  • Dashboard and Log activity ⎯ Addresses user need to track their workouts and progress
  • Onboarding ⎯ Personalizes and recommends workouts based on the users' goals
  • Exercise Information pages ⎯ Each exercise page should be a one-stop-shop for exercise information, instructions, proper form, and alternative options
  • Search ⎯ Organized curation of resources with straightforward navigation
  • UI Style Kit ⎯ Create a brand identity and UI that is recognizable, consistent, and reflects Fitted’s values
This is where I came up with the name “Fitted.” This word physically represents a combination of the words “fitness” and “education,” as well as metaphorically reflects the brand’s goal, which is to create an experience that is fitted to the user.
2

Ideation and Testing

Brainstorming Intuitive Layouts: Dashboard and Exercise Screen Designs

With the key elements decided, I began rapid-sketching. At this stage, I focused on the two screens that would need the most work with organizing content and creating a strong layout: the dashboard and exercise information page. This meant deciding what should be primarily accessible to the user when they open the app and how to categorize the exercise information in an easy-to-navigate way.

Early Usability Test Results ⎯ Smooth Onboarding, Label Challenges

To facilitate remote usability testing, I transformed the low-fidelity wireframes to a mid-fidelity prototype using Figma. I also incorporated onboarding as a third user task, aiming to assess its length and the necessary personalization information.

Conducting two moderated usability tests, I evaluated three user flows for navigation efficiency ⎯ completing the onboarding, navigating to the exercise information page, and logging a workout. While onboarding proved smooth, users encountered confusion with certain labels and information layout. I integrated their feedback into my final designs, documented below.
3

Iteration and Final Designs

Before diving into the high-fidelity prototype, it was vital to establish a strong brand identity that would differentiate Fitted from its competitors.

Building a User-Centered Brand Identity

With the UI being a focal point, it was integral to create a consistent visual style that reflects both the user’s and brand’s values. I reflected back on my research, where users expressed feelings of judgement and doubt during their learning process. So, it was important to create a no-judgement space that would make them feel welcomed and encouraged to try new things. This became the foundation for the style decisions I made for Fitted.
Style Decision
Reasoning
Color Palette ⎯ Inspired by nature; warm tones of cool colors and a subtle pop of color, avoid bright colors like red and yellow
  • Colors should create a relaxing atmosphere while also emphasizing an active lifestyle
  • Users expressed a dislike for harsh and highly contrasted colors
Visuals ⎯ Use warmer-toned visuals and pictures that represent a diverse range of body types
  • Promote a healthy learning environment
  • Brand promotes and values inclusivity
Style decision ⎯ Color Palette
Inspired by nature; warm tones of cool colors and a subtle pop of color, avoid bright colors like red and yellow

  • Colors should create a relaxing atmosphere while also emphasizing an active lifestyle.
  • Users expressed a dislike for harsh and highly contrasted colors
Style decision ⎯ Visuals
Use warmer-toned visuals and pictures that represent a diverse range of body types

  • Promote a healthy learning environment
  • Brand promotes and values inclusivity
Fitted's UI Style Guideline Summary
Summarized UI Kit for Fitted

Bringing the Brand to Life in the Final Designs

Combining the brand and what I learned from usability testing, I iterated and designed 2 interactive, high-fidelity prototypes (mobile and tablet) with the following primary features to target the users’ concerns. [3] [4]

Why choose mobile and tablet?

For this project, I was tasked with developing a high-fidelity prototype tailored for two distinct screen sizes. Recognizing that users exercise both at home and in gym settings, I aimed to find a balance between mobility and accessibility for those who prefer larger screens. As a result, I opted to design both an iOS mobile and tablet version of Fitted.

Ensuring that both versions offered identical capabilities was a key priority. I concentrated on crafting a consistent layout to guarantee users a seamless experience on either device, free from unpredictable changes or inconveniences.
Side-by-side comparison of Fitted's UI on an iPhone and iPad
Side-by-side comparison of iPhone and iPad layout

Key Takeaways

Project management!

Taking ownership of this passion project was a rewarding experience that taught me how to effectively balance my time without sacrificing the quality of my work. Staying proactive helped me meet my milestones early and gave me the opportunity to exceed my goals.

Communication throughout the design process is key.

From user interviews to usability testing, learning about the users’ experiences at different stages was essential in creating a product that is for them and developing brand loyalty.
next project
Back to top Button (Up Arrow)
Back to top
Featured typeface is degular from @ohnotypeco