top of page
file cover - 1.png

Iterate Design Challenge

FITFOX
AI-Enhanced Fitness Journey:
Personalizing Health Paths with Smart Tracking

Timeline: 6 Weeks Design Challenge (2024.3-2024.4)

My Contributions: UX/UI Design, Research, Graphic Design for branding

Team: Three UX Designers 

Design Prompt

Create a smart mobile app powered by AI and wearable tech to monitor and boost your well-being. Receive instant feedback on both physical AND mental health, making holistic wellness easily accessible.

How We Tackle the Problem

Despite the Hackathon tight timeline, we conducted in-depth market research and applied a comprehensive iterative design process to create FitFoxa user-centered fitness app that harnesses the power of AI to significantly enhance user engagement

This case study outlines our journey through the full spectrum of UX methodologies to deliver a unique experience poised for further development and distinction in the market.

rEseARCH

Scientific Foundation

Competitive Analysis

User Survey

define

Problem Identification

Personas

User Journey Map

DESIGN

Sketch

Design System

Task Flows

testing

User Testing

Design Revision

Prototyping

Research

Exploring the Landscape:
Secondary Research on Wearables, Well-being, AI, and Eating Disorders

Our team synthesized rich quantitative and qualitative data through two affinity mapping sessions: we proposed field related questions and came up with possible solution directions based on our review of scientific and business literature.  

affinity quesitons.png
affinity.png

Fig 1. & 2. An overview of two rounds of affinity mapping 

What We Discovered: Key Research Insights

⌚️ The Increasing Demand of Wearable Devices

“The global wearable technology market was valued at USD 61.30 billion in 2022 and is expected to expand at a compound annual growth rate from 2023 to 2030. ”

Wearables are especially beneficial to monitoring chronic illnesses, providing timely data, assessing mental health data, and tracking sleep

👽 AI Potential and Ethical Concerns

The application of AI can provide substantial improvements in all areas of healthcare; however, patients should always be aware of the treatment, the risks of screening, data capture anomalies, and the privacy of data and access control. Also, patient-oriented self-management is suggested to improve the outcome. 

🍎 Holistic Wellbeing, Fitness Tracking, and Eating Disorder

Wellbeing refers to a comprehensive evaluation of an individual's physical, phycological, emotional and social aspect. Self-monitoring or professional routine checks (e.g., weight, BMI, and blood pressure) can be an effective intervention to prevent health issues. 

However, notably, fitness tracking is also a unique predictor of eating disorder symptomatology.

Filling the Void:
What is missing in the market? 

To gain a deeper understanding of the wellbeing landscape, we conducted a competitive analysis. We critically examine the leading apps to identify market trends, user preferences, and areas ripe for innovation.

Our competitive analysis has identified key issues within the market, including unhealthy weight loss plans, poorly designed food logging features, overly complex app interfaces, and paywall .

CA Analysis_Updated.png

Fig 3. An overview of Competitive Analysis 

Findings.png

Fig 4. Main Takeaways of Competitive Analysis 

User's Voice:
Survey Insights that Shape FitFox

We conducted a comprehensive survey that provided critical insights into user preferences and pain points. This survey is aimed to collect valuable perspectives on the following:

  1. General Fitness Knowledge: It gauges users' overall eating habits and their level of knowledge about healthy eating.

  2. Tracking Behaviors: It explores how people track their health (including diet) and what data they find valuable.

  3. Openness to Technology: It checks if people are interested in participating in further usability testing sessions.

What We Heard from the Users

Progress Bars.png
54%

Over half of the users are not satisfied with the current fitness apps in the market.

Progress Bars 1.png
75%

A significant 75% of users experience feel a lack of motivation when using existing fitness apps.

Define

Who is FitFox built for?

Explore what our users need

Persona

Emily the college student.png
Micheal the body builder.png

Fig 5. & 6. User Personas

User Journey Map

Michael User Story.png

Fig 7. User Journey Mapping

The Opportunity

HMW encourage users to develop a healthy long-time habit to track their exercise and nutrition intake without being overwhelming

Our Approaches:
1. Personalization
Empowering users with data ownership and personalized experiences
2. Seamless Tracking
Connect with wearables for automatic fitness data syncing & easy meal tracking
3. Buddy System
No competitive nature, just supportive and encouraging positive reinforcement

Design

User Flows

We began the design phrase from deciding on the user flows for four main features: Main Dashboard, Exercise Tracking, Meal Login, and Discover (gamification feature). 

User Flows.png

Fig 8. User Flows (First Version)

Sketches

We sketched separately to collect as many and varied ideas as possible; then we collected all our sketches together to vote for the best ones to work on. 

Sketches.png

Fig 9. Sketches from team members

FITFOX: Logo, Colors, and Components

In the stage of conceptualizing FitFox, we sought a mascot that would embody the qualities of agility, cleverness, and approachability—traits essential to motivating and guiding users on their fitness journeys. The Fox, known for its sharp intelligence and adaptive nature, quickly stood out as the perfect symbol for our brand.

As a UXer with graphic design background, I created multiple versions of brand logos, and we finally decided on the Fox with a modern and simple look. 

FITFOX ICON.png

Fig 10. Evolvement of FITFOX

Orange, a color intrinsically linked with our fox mascot, was selected as the primary color due to its vibrant, warm, and energetic qualities. For our typography, we opted for Avenir because of its clarity and modern, active feel. 

FONT.png
colors.png

Fig 11. Fonts and Colors

components.png

Fig 12. Example Components

Mock-ups and Main Task Flows

With our design system and fundamental UI kits, we began crafting the initial version of our high-fidelity mockups, incorporating the task flows we had previously identified.

Main dashboard.png
Main Dashboard

We prioritize user control by allowing for a customizable dashboard. This ensures users see only the information most relevant to their goals, optimizing their chances for successful tracking.

Exercise Dashboard
Exercise.png

For exercise tracking, we implement wearable data such as Apple Watch, Fitbit, or Garmin to seamlessly integrate with fitfox, which then leverages AI to simultaneously track across all users fitness activities.

Meal.png
Meal Login

To ensure users also improve their diet health, we made meal tracking easier by, offering users to upload their meals: barcode scanning, snapping a photo, or manual search.

Discover.png
Discover

We created a gamification Discover feature with a FOX as a buddy support system. Users can complete daily challenges to earn points to earn fitness classes or meal plans.

Testing and Redesign

User Testing

During the user testing phase, we conducted several key activities to evaluate the usability and effectiveness of FitFox:

  • Scenario-Based Testing: Participants were given scenarios that mimicked real-life uses, such as logging a meal or tracking a workout.

  • Feedback Collection: After completing tasks, we gathered detailed feedback through follow-up and rating questions.

  • Motivational and Engagement Assessment: We specifically looked at how motivating and engaging the app was, particularly through features like the virtual fox companion and personalized fitness classes and meal plans.

Testing Feedbacks.png

Fig 13. Overview of Testing Feedback Collections

Design Revamping

After gathering and analyzing responses from our user testing sessions, we embarked on a targeted redesign process.

Iteration 1: Simplifying Sleep Widget 

The Before

Screenshot 2024-04-28 at 9.34.26 PM.png
Screenshot 2024-04-28 at 9.34.26 PM.png

Our participants reported that 

the information is overloaded on the sleep widget. They didn't understand some data displayed (e.g. REM) and there was no way to access deeper info within the app. 

The After

Screenshot 2024-04-28 at 9.35.21 PM.png
Screenshot 2024-04-28 at 9.49.58 PM.png

We simplify the widget card and add separate sleep screens accessible by clicking on the widget card.

We also introduce several 'Info' buttons which provide users with quick explanations of the sleep metrics and how they get their sleep score.

The Updated Flow
Updated Flow.png
Iteration 2: Enhancing Meal Login Screens

Our users reported that the original chart used for tracking meal progress was not intuitive, making it difficult for them to understand their nutritional intake. Also, the "Add Meal" button, which should be a critical feature on the page, was not prominently displayed. 

We first enhance our Data Visualization by replacing complex charts with clear, easy-to-understand progress bars.We also redesign the "Add Meal" button to make it more prominent and user-friendly.

Finally, we added fun, appealing icons to the meal login screen to motivate our users.

Screenshot 2024-04-28 at 9.35.32 PM.png
Screenshot 2024-04-28 at 9.35.41 PM.png
Iteration 3: Introducing the Discover Feature

During our user testing, we find out more than 75% of our participants were skipping over the text on the landing page, which in the end lead to confusion or misunderstanding about the purpose and functionality of the Discover feature.

  • Streamlined Page Layout: We remove the initial landing page and redesigned the Discover page layout to be clearer. We introduce the points and rewards system upfront to ensure users understand how to engage with the feature right from the start.

  • Enhanced Mascot Interaction: We updated the FitFox mascot to have a consistent and more dynamic appearance. We made the fox interactive, enabling it to offer suggestions and guidance to users. 

Screenshot 2024-04-28 at 9.35.51 PM.png
Screenshot 2024-04-28 at 9.35.51 PM.png

Final Design and Prototyping

Home Page

Welcome to the main screen of the FitFox app, where you have your fitness and health data at hand.

Here, you can quickly view your personalized dashboards that provide an overview of your daily progress in fitness and nutrition.

You can always add customizable widgets to your homepage and check their impact on your daily fitness journey. 

Exercise Tracking

Through our exercise tracking  feature, you can easily enter and track your daily activities.

Whether you're hitting the gym, taking a yoga class, or going for a run, this tool helps you keep a detailed record of your workouts.

Meal Login

Our meal log feature is designed to simplify nutritional tracking. As you log your meals, you'll not only be able to monitor your calorie intake but also understand the nutritional breakdown of each meal. 

Discover

Discover is where you can engage with new challenges and earn rewards. Each challenge is designed to encourage healthier lifestyle choices, ranging from hydration goals to step contests.

This feature is all about discovering your potential and pushing the boundaries of what you can achieve with FitFox.

bottom of page