Fuel

Maintaining a healthy lifestyle can be challenging due to various obstacles. This project focuses on motivating users to stay active, achieve their fitness goals, and learn about proper techniques. By addressing individual needs, I aim to create a user-friendly solution that keeps users engaged and informed on their fitness journey.

Design Process

Research


UX/UI Design


Branding


Prototyping


Usability Testing

Timeline

March 2024 - July 2024
(4 Months)

20hr/week schedule

Overview

As somebody who has had their fair share of challenges when starting a fitness journey, I took notice to other people’s struggles with the subject. Getting started is never easy, and there are many factors that could contribute to one’s difficulties. Reflecting on my own experiences, I've committed to identifying potential challenges individuals might encounter when starting their health and fitness journeys.

Problem

People struggle to start their fitness journey for many reasons, including lifestyle, motivation, health barriers, limited knowledge, and lack of confidence. Society's influence, social pressures from peers and family, and unrealistic expectations from social media also play a significant role.

Goal

We want to know the various challenges an individual may face when trying to start their fitness journey, both short term and long term, so that we can develop a greater understanding of what can make the process of a healthier lifestyle educational, enjoyable, achievable, and realistic.

Research

The Objectives

  1. Identify specific lifestyle factors that can act as barriers to one’s start of their fitness journey.

  2. Identify their time constraints, work commitments, and family responsibilities.

  3. Explore motivations that can influence the start of their fitness journey.

  4. Investigate any medical concerns or physical limitations that individuals may have.

  5. Assess their knowledge of fitness and health, regarding exercise techniques, nutritional health, and workout routines

Click each toggle to view the analysis!

  • Positives:

    • Provides extensive information across various categories

    • Includes diverse coaches, trainers, and instructors

    • Generates revenue through athlete collaborations and clothing brand

    Negative:

    • App can be buggy and unresponsive
      Frustrating login section

    • Platform is unresponsive on devices (e.g., transitioning to iPad)

  • Positives:

    • Offers a personalized approach

    • Features research-backed interactive videos

    • Ideal for at-home workout routines

    Negatives:

    • Faulty subscription services

    • Competitive rates deter some users

  • Positives:

    • Provides guided exercise tutorials for trainers and athletes

    • Compatible for both iOS and Android users

    • Generates revenue through athlete collaborations and a clothing brand

    Negatives:

    • Users commented on unnecessary features (e.g., timer) in the app.

    • Unresponsive login section causes user loss.

  • Positives:

    • Offers a variety of exercises and meditation content

    • Provides small achievements and rewards to keep users motivated

    • Includes trainers and classes

    Negatives:

    • Exclusive to Apple users

    • Subscription required for classes and additional content

    • Stats may be delayed, leading to potential data inaccuracies

Click on image to view affinity map!

The Research Methods

  1. Competitive Analysis
    Evaluating various digital fitness and nutrition platforms helps understand their strategies and perks.

  2. Secondary Research
    Analyzing user reviews to identify pain points and frustrations.

  3. User Interviews
    Conducting interviews to gather authentic data on fitness and nutrition experiences.

Competitive Analysis & Secondary Research

To kick off my research, I started by looking at competing fitness and health platforms in the app store. What do their services offer? What are their strengths and weaknesses?

Other factors to consider:

General Takeaways

  • Implement Tracking System
    Building a tracking system will serve as a tool that will allow efficient progress monitoring, provide valuable insights, and encourage user engagement. This would be applied for both nutrition and fitness needs.

  • Personalization
    Incorporating a personalization system will present an opportunity to tailor user experiences, by providing customized recommendations and content based on individual preferences, goals, and progress.

Interviews

Conducted 6 in-depth interviews with a diverse group of participants with various occupations, and activity levels. And taking note of their current gym membership status. These interviews provided valuable insights into their current fitness routines, challenges, and what they seek in a successful routine.

Duration of each interview: 30 - 45 minutes

Affinity Map

Creating an affinity map with all the user’s responses was very helpful as it allowed me to easily digest all the data I have collected. Ultimately, it gave me insight on what should be prioritized to help user needs and develop solutions that lead to a more effective design.

Key Findings

  • Many of the participants feel that fitness and health both contributes to how one person deals with their overall health inside and outside.

  • A majority of my participants have trouble fitting a designated time to exercise due to a job with long hours, inconsistent schedule, and heavy responsibilities.

  • Maintaining consistency is a common factor when keeping up with one's goals, and staying accountable.

  • Tracking progress and taking mental notes of one’s physical appearance is a common way of seeing progress rather than quantifying results (ex. Weight )

  • Participants find that watching a tv show while working out, or working out with a partner makes the process more enjoyable for them.

  • Despite the varying degree of experience in fitness, a majority have little to no knowledge of fitness and nutritional topics.

Define

By thoroughly evaluating all the data I have collected from my research, I decided to compile my findings into 3 different kinds of POVs and HMWs:

POV #2

I’d like to explore ways to help individuals who struggle with motivation, consistency, and scheduling conflicts in starting a fitness journey and adopting a healthier lifestyle to reach their short- and long-term goals.

HMW #2

How can we develop tools to help individuals stay motivated and consistent in their fitness journey despite challenges?

POV #3

I’d like to explore ways to help avid note-takers track their gym progress digitally for easy documentation and to minimize the hassle of carrying extra material.

HMW #3

How might we ensure that the transition to a digital tracking method is seamless and intuitive for avid note-taking individuals?

User Personas

With an idea of what I wanted to focus on regarding possible solutions to the problem, I have developed 3 personas: The Motivated Beginner, Busy Professional, and Habitual Notetaker. These individuals seek to seamlessly integrate regular physical activity into their current situations in order to maintain a healthier lifestyle.

POV #1

I'd like to explore how tailored exercise routines and meal plans can effectively help them achieve their fitness goals.

HMW #1

How might we personalize exercise routines and meal plans based on individual body types to better meet the diverse needs of users?

The Motivated Beginner
The Busy Professional
The Habitual Notetaker

Project Goals

Before I begin to ideate my design, I created a Venn diagram to showcase specific goals and other considerations that will help me prioritize what I need for the design.

Ideate

With a deeper understanding of what goals and decisions a user might need to fulfill their goals on a fitness platform, I have created potential Task Flows and User Flows that can aid me in the design process.

Design

Wireframes

After mapping out the site and determining what to prioritize by going through my flows I began to build low-fi and mid-fi wireframes to start fleshing out the design. While doing so, I referenced all my research findings, and my flows in order to determine the first stage of the site.

Low Fidelity Wireframes

My goal was to create a straightforward design with no fuss. I was inspired the site to have graphic elements that are not only aesthetically pleasing to the eye, but functional. I also took inspiration from notepads and file folders for parts of the design like the Summary and Tracking Tab; as well as the Workout Log.

Mid Fidelity Wireframes

When refining my Low-fi Wireframes, I began to flesh out the contents of each of the frames. I also did some minor readjustments I found that were appropriate after re-evaluating my research and my flows in hand.

Branding

To help combat fitness and health stereotypical designs that are a bit cold looking and modern, I wanted to give off a more playful and vibrant feel that is a little more appealing to both young and mature audiences. By doing so, I made sure to use a vibrant color palette of purples with a hint of yellow, since those colors usually represent empowerment and happiness. Along side bold typefaces that are eye-catching and easy to read.

For the brand name, I wanted something short, memorable, and true to fitness and health. I thought about what helps people stay active and what influences movement. My research revealed that carbohydrates provide energy, so I named the brand ‘Fuel.’ I was also inspired by the molecular structure of carbohydrates when designing the logo and patterns.

High Fidelity Wireframes

showinghighfid1.png
Slide 4_3 - 2.png
Slide 4_3 - 2.png
Slide 4_3 - 4.png

Usability Testing

I gathered a total of 5 participants that were interested in testing out the flow of my site. From there, I established 4 different tasks to seek out any error or pain points in my current design. Testing was a mixture of in-person and remote via FaceTime.

Navigation Feature

As mentioned before, many of my users have stressed the need of a menu section when navigating through site they have never used before. And even though the results were majority easy for the user, it’s important to be considerate of those who found the task a little difficult.

Refining Search/Explore Feature

Although my users had no issues going through the explore/search section of the site, many have stated that they wished that the search results were more rated to the subject being searched. As a result, I have cleaned up the section by simplifying it, removing the additional categories, and redesigning the selected card. As well as, adding additional buttons for easy access to other parts of the site.

Adding to Progress Log

With the final task being adding an exercise to the Progress Log, users have found it quite difficult to access after watching the tutorial. To make this easier, I have completely changed the layout in order to fit the additional button, ‘go to log’. This way, users are able to quickly access the progress log without clicking around too much. in addition, Ive refined the section by adding a title, a queue feature, and clear ‘back’ and ‘next’ buttons.

Additional Iterations

  • Landing Page
    I rearranged the sub-category hierarchy, moving the Premium Section up based on user feedback wanting to know details before subscribing. I also expanded the categories by making it its own section to remind users of the site's purpose and divide the content. To enhance the design, I introduced a pattern of the logo and added a pop of yellow to break up the monochromatic scheme.

  • Sign-up/Login
    I switched out the image in the sign-up and login section because I thought it was too loud. So, I simplified the design by just adding the same pattern I’ve used for the Landing Page. As well as, adding labels to the inputs and the heading into something more inviting.

  • Summary Tab
    Lastly, for the summary tab I specified the data more by adding numbers to measure the data.

Final Design

After refining my design and adjusting the prototype, I successfully developed a new, functional version. Click here to view it!

Conclusion

Even though this is my first start to end UX/UI project. There is so much more I would like to do to expand upon the app to make it believable. Such as, providing a social media aspect to build community. Expanding upon some features like a full results page, flesh out the premium section, or expanding upon the nutrition aspect of the site with recipes and video tutorials. The possibilities are truly endless!

At the end I’m very happy with what I have accomplished and I hope to explore opportunities with more projects!

Click each toggle to view each task!

  • Let’s say that you are new to this site and you want to know what the product is about and what they have to offer. Can you show me where the perk section would be and the Premium section?

  • Imagine that you have gone through the entire site and now you are interested in signing up and finding out what your routine would look like. Show me how you would go about that.

  • Now that you have an account, you feel curious about searching up a video tutorial. Imagine, in this situation you improve your squat form, how would you go about finding the right video for that?

  • Now that you have finished the tutorial, you would like to play around with the progress log of the product and enter your data. Where or how would you find the section in order to perform this?

General Takeaways

  • Navigation Section
    Although the pass rate of navigating through the landing page was passable, all of my users have stressed the need of a menu section. Some wanted to search through certain sections of the site right away, while some didn’t mind scrolling around. Seeing this error in my design choices, and see that this was a potential pain point for other users, it was important for me to fix the design.

  • Refining the search engine
    Again, my users had no issue navigating with Task #3 of my testing, but some would agree that they wish that the search results matched better with their needs. For example users it was nice to see other categories show up after looking up ‘squat’, but they thought it was a little confusing that those options would show up rather than just seeing related results to ‘squat’.

  • Adding data to Progress section
    Lastly, users found it confusing when given the final task of adding their data to their Progress Tab after finishing task #3. They have noted that they didn’t like how many times they had to click again in order to find the right tab. When asked how to make this task easier, many have suggested that there should be an additional button made so that going from point A to point B will be quick and efficient.

Iterations

Although the pass rate of navigating through the site was passable, seeing the errors in my design choices, and seeing the potential pain points other users may encounter— it was important for me to fix the design.