Healthy Me
Designing an end to end healthy lifestyle app.
My Role: UI/UX Designer
Project Type: End to End App
Toolbox: Figma, Google Forms
Timeline: January 2023 - February 2023
Overview
Background
For the past three years, I have worked in the health and wellness industry, whether it be for a company that makes smart, wearable fitness tech, or a company that manufactures herbal nutrition and wellness products. I myself am very passionate about my own health and wellness and make a conscious effort to exercise daily and eat a balanced diet. However, I sometimes struggle to stay consistent.
I decided to create a lifestyle app that is intended to help users reach their health and wellness goals through motivation and accountability. This app will allow users to keep track of the accomplishments and create a community of like minded individuals with the common goal ~ better health.
Problem
Consistency. It is difficult to stay consistent when working towards your health and wellness goals.
Solution
Accountability. Having an audience (friends, family, etc.) to keep you accountable can make a huge impact on the success rate of your goals.
Research
After conducting my initial research, I discovered a few outstanding problems that individuals face when trying to achieve their health and wellness goals —
Prioritizing
Lack of Support
Breaking unhealthy habits
Giving up
I identified some ways that competitor companies are currently trying to resolve these problems —
Social Sharing
Exercise Data
Goal Setting / Personalization
Food Tracker / Calorie Counter
With the help of 25 research participants ages 22-42, I conducted both quantitative and qualitative research.
Quantitative — Survey Questions
Google Forms
DesignLab Discord Community
Family & Friends
Qualitative — Interview Questions
In person
Family & Friends
“Sometimes I feel unmotivated or life gets busy and it's easier to just eat whatever is available and not make it to the gym.”
“My goal is to find sustainable ways to maintain a healthy lifestyle”
“Having a social component to the app helps me. Makes the app less boring and almost like opening up social media apps.”
“Tracking, reward/gamification, encouragement”
Personas
KEY TAKEAWAYS
Through my research, I identified several key challenges individuals encounter while striving to attain their health and wellness goals, including
staying motivated and consistent
lack of support systems and accountability
tendency to get bored and give up easily.
Furthermore, it was undeniable that users are greatly affected by their peers and find it motivating to see others making an effort towards their health and wellness goals.
In response to these challenges, I plan to create an app that implements innovative solutions such as
social sharing platforms
exercise data tracking
goal setting with personalization features
the ability to record progress
access to food trackers and calorie counters.
Encompassing all the gathered data from my research, I developed the following user/business/design goals and features ~
GOALS
FEATURES
Product Development
This sitemap displays the four main features and functionalities that I want to incorporate based on my research insights:
profile
food
fitness
friends
Quick low fidelity wireframe sketches allowed me to visualize how the features would exist together on this app. I drew inspiration from social media app layouts and placed the main menu bar at the bottom. I wanted to make sure the focal points are the progression stats, thus, I incorporated large numbers, checkboxes, graphs, and progress bars.
I chose a design system that I felt was representative of the brand values ~
Health & Wellness
Fitness
Consistency
Motivation
Community
Wireframes
I developed Mid Fidelity Wireframes to get an idea of how the product is going to look before the color and precise measurements. I wanted to allow myself to visualize and focus on the the major touch points first before deciding on other UI elements.
The final step was to apply the UI design system and clean up any imperfections in order to create the High Fidelity Wireframes. I used the bright yellow/orange color as the accent color since it highly contrasted with the green colors in the rest of the design. I wanted to have users associate this bright accent color with their progress, so I made the progress bars, check boxes, and charts with this color.
Prototype Usability Testing
The high-fidelity prototype provided test users with the most realistic experience of Healthy Me. I asked 8 participants to explore the app and give me their feedback. Through their evaluation, I was able to uncover several problems with the user experience:
PROBLEMS
“sign up” button is difficult to see and click
not ideal to have image pop up on mobile
yellow on bottom menu bar is hard to read
add a filter option when looking for friends
progress bar UI can be improved
SOLUTIONS
“log in” and “sign up” will both be buttons side by side, differentiating from one another with the stroke outline and fill
created a new page where users will be directed to view the progress image
darkened the color and bolded the text and icons
added filter option
took out the black stroke on the progress bar to create a cleaner look and feel
Final Product
Reflections
Conducting user experience research for an app focused on improving health and wellness was particularly rewarding due to its universal relevance. Through a series of interviews, I gained valuable insights into user preferences and priorities within the health app domain. Designing the Healthy Me app provided me an opportunity to challenge and build upon my UI design skills, and gathering user feedback on my designs was essential to identifying areas for improvement that I might have otherwise overlooked. This project has been immensely fulfilling, and I am pleased with the final outcome.
Thank you! :)