top of page

 FitPal Health

                                                                   

FitPal Health is a smartphone app that helps users track their diet and for a healthier lifestyle,

This app uses gamification elements to motivate users. To track nutrients, users can either scan various food items or manually find them in the app’s large pre-existing database.

In this article, I will be sharing with you my thoughts and process in designing the app. This project lasted 15 weeks in total and there were 4 main sprints: Research Sprint, Concept Sprint, Usability Sprint, and Design Sprint and now it's under launching phase.

Role: Senior Designer (UX/UI design)-iOS app

Tools: Figma - Adobe - Google analytic. fluent experience in design and prototyping. 

 

Screen Shot 2022-10-20 at 11.42.58 AM.png

​​​​​

​​

Understanding the user

To begin the project, I chose fitness enthusiasts as my target audience and developed a Problem Statement and User Persona to gain an initial understanding of their needs and behaviors. This step helped lay the foundation before creating questions for my user interviews.

I then conducted qualitative user interviews with university students and working professionals, ages 22–49, via online video calls. The primary objective of these interviews was to explore how the target audience approaches their fitness journeys and what factors influence their decisions when using fitness-related applications like FitPal Health. 

​Google Forms: User Interview Questions

​​The User pain point’s

After conducting the interviews, I gained a clearer understanding of the challenges my users face. Many are juggling university assignments or work responsibilities, which impacts their ability to stay consistent with their fitness routines.

​​

Refining the Problem Statement and User Persona​

With the data collected from the interviews, I was able to draft a more refined Problem Statement and User Persona, with detailed goals and specific pain points.

​​​​

​​User Journey Map​

I also created a User Journey Map to visualize what users experience as they learn about and track their nutrition. Alongside this, I identified opportunities at each stage of their process to help them overcome their struggles.

​​​​​Competitor Analysis​

Based on user feedback, I analyzed apps that users found helpful, such as MyNetDiary, Lifesum, and FatSecret, with Lose It! being mentioned briefly. This analysis allowed me to compare these apps and gather insights for designing new features.

​​​

 

 

 

 

 

 

 

 

 

 

 

​​

 

 

 

 

 

 

​​​​​​​​​

 

 

 

 

 

 

 

 

 

​​​​

 

 

 

​​​

Screenshot 2024-08-21 at 2.47_edited.jpg
Screenshot 2024-08-21 at 2.50.12 PM.png
Screenshot 2024-08-21 at 2.53.51 PM.png
Screenshot 2024-08-21 at 2.58.50 PM.png
Screenshot 2024-08-21 at 11.43.53 PM.png
Screenshot 2024-08-22 at 11.21.35 AM.png
Screenshot 2024-08-22 at 1.16.47 PM.png
Screen Shot 2021-01-25 at 4.26.33 PM.png
Screen Shot 2021-01-25 at 4.26.48 PM.png

​​​​​​​​​Final screens:

After analyzing the feedback from the previous user test, I made some adjustments and finalized the design with high quality mockups and design systems. 

Usability Test:

Finally we’re now user testing with the Hi-Fidelity Prototype. The purpose of this test is to find out what users think of the overall design of the app. Here are the drop off rates of the current feature.

Overall, user feedback indicates that the course quiz has significantly improved and feels more complete.

Screenshot 2024-08-26 at 2.17.16 PM.png

Prioritize features

1. Exercise and personal trainer 

1.Nutritionist

2. Cam-calorie

3.Avatar

4. leisure time ( New Health Articles) 

5.Achievement

Features Proposal:

By organizing all the new features in a matrix diagram, I was able to determine which features to prioritize based on their impact and cost.​

UX Audit

Before diving into the design process, I performed a UX audit of existing fitness apps to identify common usability issues and opportunities for innovation. This audit provided critical insights that informed my approach to designing the features for the FitPal Health app.

Sitemap

A simplified and design the app's sitemap with the features and pages that I will be Designing.

0_uitmrx2dDG1YIiGd.webp

Wireframes

With prioritized pages and features, I created wireframes for the first user test to gauge the target audience’s reaction to the newly proposed features and app layout.

1_IkWGVZTi1qzCpCDWLOudIA.webp

Concept Test

Finally, I conducted a concept test using a low-fidelity prototype with the same interviewees. The feedback provided valuable insights based on the tasks I assigned to the users, helping refine the design further.

In conclusion, the overall feedback from users is that the FitPal Health app convenient and helpful to them. However, there were still quite a few things that needs to be fixed especially the user flow of the course quiz 

Below here are the top 3 favorites from users and their direct quotes:

Screen Shot 2021-01-25 at 4.27.02 PM.png
Screen Shot 2021-01-25 at 4.27.17 PM.png
1_0qmuYzKJs3Q4VXSYEYfWmg.webp
Screenshot 2024-08-26 at 3.27.50 PM.png
Screen Shot 2021-01-25 at 4.27.25 PM.png

Design System:

Screen Shot 2021-01-25 at 4.27.48 PM.png
Screenshot 2024-08-28 at 12.09.14 PM.png

On the left screen, you can see the onboarding with the animated illustration. It explains to users how to use the app, what features it has, and other information. On top of the right screen, you can see the user’s mental health statistics. It’s based on the results of tests that therapists send to users and on their own feelings after therapy.
Lower there’s a handy calendar where users can look through their notes and available appointment dates.

Screen Shot 2022-10-25 at 8.47.34 AM.png
bottom of page