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 FitFox—a 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
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.
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 .
Fig 3. An overview of Competitive Analysis
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:
-
General Fitness Knowledge: It gauges users' overall eating habits and their level of knowledge about healthy eating.
-
Tracking Behaviors: It explores how people track their health (including diet) and what data they find valuable.
-
Openness to Technology: It checks if people are interested in participating in further usability testing sessions.
What We Heard from the Users
54%
Over half of the users are not satisfied with the current fitness apps in the market.
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
Fig 5. & 6. User Personas
User Journey Map
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).
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.
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.
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.
Fig 11. Fonts and Colors
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
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
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 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
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.
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
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
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
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.
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.
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.
