P R O D U C T > U X / U I D E S I G N
Earthing: Designing an inclusive fitness and nutrition mentorship solution
Sometimes nature has the answers.
Context :
Today’s “always on” lifestyle causes a lot of people to suffer from burnout. Daily stressors in life make it very difficult for people to stay on top of their health needs. People are seeking tools to help them stay on top of their health and wellness, as well as for greater balance between the challenges of health, wellness, work and life in general. Often this involves activities such as yoga, mindfulness and therapy, but it can also include pragmatic methods for organizing commitments and needs.
There are a number of online tools available that help individuals record their health and medical information and that provide access to information about mindfulness and wellness.
These types of portals are typically employed by HR departments at organizations to encourage their staff to be healthier and happier. However, they’re rarely designed in a way that is inclusive to users with varying needs. What do users want from such a portal? How have some users been excluded from these portals in the past? How can a one-stop solution to health and wellness educate users and encourage them to live a balanced lifestyle?
Solution :
An end-to-end application to allow users to receive customized workout and meal plans, personalized guidance from personal trainers and nutritionists, and support from community members in an earthy interface.
Role :
UX/UI Designer
Team :
Self
Time :
12 weeks
Tools :
Figma, Adobe XD, Photoshop, Illustrator, Miro
Do people want to visit their doctors more?
I started by making assumptions that I would later prove by surveys and interviews.
-
some people are hypochondriacs, unnecessarily scheduling appointments to get everything checked out
-
other people might feel like they have health problems, but don't get them checked out, thinking they’re probably nothing
-
people want to share physical and mental health updates with a professional as they arise so they don’t forget to address them during appointments, thereby streamlining appointments
Nah.
People's main health goals involve exercising more and eating healthier, and they don't rely on doctors to achieve them.
I then conducted a survey to see if my user need assumptions held up. I ran the survey on Instagram and Slack channels in order to quickly reach a diverse audience without spending a dime.
-
top goals:
-
creating healthier habits
-
exercising more
-
eating healthier
-
creating a better mindset
-
being at peace with self
-
58% of users have lived or are currently living with a mental health condition
-
only 3 people wanted to see their healthcare provider more
-
MyFitnessPal was the most used app to help achieve health goals.
Doctors have no time to engage with patients outside of appointment times, nor do younger users go the extra mile to build relationships with them.
The main goal here was to prove or disprove my assumptions.
-
Doctors had less than 2 minutes to glance over patient files before appointments
-


Zero patients pulled up any journal or nutrient/exercise tracker of any kind.
This proved that my assumptions were wrong. In order to really understand user needs and problems in the health space, I conducted interviews. This allowed me to create a problem statement and continue forward.
So what do users want, really?​
​
​Since the majority of survey participants chose exercise, healthy eating and healthy habits as their main health goals, my interview questions primarily revolved around physical fitness and nutrition. I also asked users questions about their experiences seeing healthcare professionals.​
Users want to tone their bodies and spend more time outdoors.
Cultural norms of a person's 20s and toxic weekend plans also distract users from making healthier use of their time.
​
Ethnic users want gym trainers and healthy food to be inclusive of different body types and cuisines.
​
-
Asian participants appreciated MyFitnessPal’s inclusion of ethnic foods, and also stressed the importance of having a coach of the same culture guide them.
-
None of the interviewees see their physical healthcare providers more than once a year, and they have no desire to share their physical, emotional and mental health journeys with them.
It was now time to fix my assumptions and create an initial problem statement. Not only did users not want to share their journeys with their doctors, but doctors themselves had no time to keep up.
Sumanth wants to get a coach of his culture to guide him and Chloe wants to spend more time in the sun. Both want to cope with their anxiety and depression.
Now that I knew I was designing for a generation-z and millennial user base - and had more clarity on the problem - I created user personas to guide me for the rest of the design process.
I evaluated experiences and usability in competitor products.
​
I would be returning to my users in a bit to identify their optimal task paths, but first I needed to see what my competitors were doing. Since I would be solving for a way for users to achieve their health goals across nutrition, exercise and mental wellbeing, I analyzed four competitors spread out across all of these markets.
Opportunities Presented​
​
-
allow users to upload their own recipes or partner with nutritionists and chefs around the world to help users of different ethnicities find familiar dishes
-
“lose weight” is a broad term - copy should be emphasizing fat and muscle
-
include app-generated meal and workout plans after a self-assessment
-
use an intuitive search feature, allowing the user to search recipes by ingredient or cuisine
-
be able to follow trainers outside of workouts to get inspired from their lifestyles and families
-
use a calming and bright interface with plenty of motivational copy
I ideated 9 app experiences that would benefit Sumanth and Chloe.​
Including guided workouts and meditations, mentorship calls with a coach, app-generated meal and workout plans and progress indicators.
By estimating how much time it would take me to design each experience and identifying commonalities in my personas’ needs, I selected
as the experiences I would tackle in my first design.
Time to understand the interaction points in three user flows.
Adding a workout to a planner, sending a progress chart to a coach and listening to a guided meditation.
I returned to my personas and thought through the flows that they would be most likely to benefit from. They were:
-
Sharing a weekly nutrition progress chart with a coach
-
Scheduling a workout to a planner
-
Listening to a guided meditation
I then sketched low-fidelities.
The mid-fidelity prototype usability tests uncovered some interesting truths.​
Users' mental health is strongly tied to their eating and exercise habits. There's no need to overstuff the app with mental health functionalities. Bye bye, meditations.
Key Takeaways:
-
Users' mental health is directly tied to their physical bodies. Instead of trying to do it all, I should focus on exercise and nutritional functionalities.
-
overstuffed and unintuitive
-
users want customizations
Bye meditations, hello app-generated meal and workout plans.
Including workout plans perfect for outdoors.
​
Now that I knew meditations, journaling and wisdom podcasts was not the solution for my users, I decided to axe the mental health functionalities.
Now that I was crystal clear on what I was trying to solve, I revised the problem statement.
The design had to be more usable.
I addressed the failures and made it easier for users to send their progress charts to their coaches and add a workout to their plan.
[error rating 4]: all users failed to successfully send their nutrition progress chart to the coach
​
My Solution
I dedicated the entire home page to monitoring progress and chatting directly with the coach. I also incorporated visuals to engage users and left space between text in order to not overwhelm users. Instead of cryptic copy such as “body” and “soul,” I used simpler words like “exercise,” “food,” and “vitamins & minerals" to help users navigate to the desired progress area. I also combined the paper plane and export icons into a singular icon, allowing users to share within and outside the app.
[error rating 4]: users went to their planner to add a workout, and scheduling screens were crowded
​
My Solution
I designed experience 3 from my MVP and included it in a “My Plan” navigation menu page, allowing users to already have a plan in place for them. I also maintained a way for users to add their own choice of workouts in their plans. I decreased the amount of workout cards per screen to two, and increased the information each card contained, to give users a better preview. I combined the search and hamburger menu icons into one icon, and incorporated chips for easy filtering. I also cleaned the scheduling screen so that it was more intuitive and less arbitrary.
I implemented the abilities to turn on meal prep mode and swap a meal from the app-generated plan with a meal from the coach's plan. This way, Sumanth and Chloe could be confident in their health goals and devote more time to other things in their lives.
turn on meal-prep mode
swap meal from app-generated plan to meal from coach's plan
Third iteration's the charm.
I tested my new designs with five different users, in order to check for new usability issues and address them. The test was a success by all measures. On average users completed the task ‘send nutrition chart to coach’ 204.2 seconds faster than on the initial design. Likewise, the task ‘add a workout to planner and invite a friend’ was finished 127.2 seconds faster than originally.
There were just a few things that needed to be fixed before moving on to the UI.
Issue: "Home" doesn't make sense for an experience dedicated to viewing progress
Issue: icons in "Home" page are cluttered
​
My Solution
I changed the “Home” navigation menu icon to read “My Profile,” in which users can view their workout and meal plans, modify their plans, view their grocery lists, access settings, and chat directly with their coach.
Issue: no date selectors in the progress areas
​
My Solution
I included a way to click on the current date shown, and change it to the desired date. I also included arrows for easy day swiping.
Issue: weekly food intake line graph is hard to read
​
My Solution
I changed the graph style to a pill chart, giving the user a more readable visual of how many macronutrients they have consumed in a given day.
How might the visual design meet user needs?
Chloe wanted to spend more time in nature - an earthy aesthetic is the way to go.
I remembered my personas’ goals included spending more time outside in nature. I decided to try to encapsulate the feeling of being outside, one that could comfort users, even if trapped behind home office desks.
I used Earth’s natural resources to inform my app’s identity. Trees, pebbles, dirt, and grass informed my primary color palette, while fruits and vegetables informed my secondary.
Crystal buttons or wooden buttons?
I narrowed down on two styles for buttons and conducted preference tests to see what users want.
While users in favor of Option 1 deemed it “more fun” and “eye-catching,” voters of Option 2 called it “cleaner,” “simpler” and “easier on the eye.” As long as users felt good clicking it, I was satisfied.
It was tricky balancing multiple colors in a cohesive design system, but I got it done.
Lastly, I polished the design for Engineering handoff.
Test it out!
What I learned:
​
-
Designs are ever-changing because requirements could change and user insights can be uncovered at any point. It's important to be adaptable and not be too dedicated to a single design. Note: design is a continuous process!
​
What I could've done differently:
​
-
I could’ve done away with contextual inquiries entirely after learning from survey respondents that only 3 of them had goals to see their healthcare providers more.
-
Although it was clear users primarily had exercise and nutrition goals, I was swayed by the popularity of mindfulness apps to create a one-stop solution. Note to self: focus on users!
Next steps if I were to develop this project further:
​
-
Design the “City Walks” experience. How might we design an experience so that users can accomplish personal tasks while exercising outdoors in urban areas?
-
Design the product for a coach’s experience. How can we design for a coach who has many user clients and needs a way to manage his clients’ plans and provide them with the proper, individualized coaching?
-
Design the booking functionality for users to book trainers/coaches/nutritionists.
Thank you for reading!