Jo Nutrition is a nutrition tracking and coaching product that serves international markets. It has been featured on major newspapers and websites as the go-to place for affordable and trusted nutrition coaching.
I worked on this project from 5 Oct 2023 to 16 Oct 2023.
My Contributions
I am the lead UI/UX designer for the project from conception to delivery.
I conducted interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
Adults who are new to technology doesn’t know how to utilize it for nutrition coaching and nutrition tracking.
The Goal
Design an app and a responsive website that allows customers to track their nutrients and book nutrition coaching.
Understanding the User
____
Interview
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was adults who want to cook nutritious food but don’t know how as they lack nutrient knowledge and are new to technology.
The feedback received through research made it very clear that users would be open and willing to work towards healthy diet if they had access to an easy-to-use tool to help guide them.
Users' Pain Points
1
Travel
Elderly, those who live at rural areas and those who are busy cannot travel for coaching sessions.
2
Lack of nutrition knowledge
Not everyone can learn nutrition themselves as it requires professional courses and certification.
3
Customization
Everyone’s body condition is different, hence required personalized nutrition plan.
User Persona
Problem statement: Annie is a retired cancer-survivor grandma who needs nutrition coaching, recipe suggestion and meal tracking because she wants to have better health that allows her to spend more time with her family.
Problem statement: Nguyen is a Vietnamese mum who owns and runs a stall in a rural town who needs affordable Vietnamese speaking nutrition coaching for her kids because she wants her kids to stop getting sick often and go outside to play with their friends.
User Journey
Annie is a retired cancer-survivor grandma who needs nutrition coaching, recipe suggestion and meal tracking because she wants to have better health that allows her to spend more time with her family.
Nguyen is a Vietnamese mum who owns and runs a stall in a rural town who needs affordable Vietnamese speaking nutrition coaching for her kids because she wants her kids to stop getting sick often and go outside to play with their friends.
Competitive Audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Jo Nutrition app. Click to view the full competitive audit
Starting the Design
____
Paper wireframe
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on coach booking and food entry features.
Digital wireframe
After ideating and drafting some paper wireframes, I created the initial designs for the Jo Nutrition app. These designs focused on delivering personalized guidance to users to track their nutrition and booking coach.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of searching for a caterer and making a tasting order, so the prototype could be used in a usability study with users.View Blissfulbites app low-fidelity prototype
Usability Study: Findings
These were the main findings uncovered by the usability study:
1
Add food
People had difficulty adding new food items to the app.
2
Homescreen
People had difficulty understanding the calories and nutrients stats and didn’t know how to add food from homescreen.
3
Reviews
People need to read reviews of coaches before booking the coach.
Refining the Design
____
Mockups
After usability studies, I changed the layout of nutrient insights so that it is easier for users to understand. I also changed the food entry log design to make it more intuitive.
Additional design changes included restructuring coach screen layout to make coaching mode more understandable and adding reviews of coach.
Provided access to users who are vision impaired through adding alt text to images for screen readers.
2
Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.
3
Provide images for all items on the menu to help all users better understand the food.
Responsive Design
____
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Jo Nutrition sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Going Forward
____
Impact
The users appreciate the ability to track the nutrients of their food and get personalized guidance by nutrition coach.
One quote from peer feedback:“I didn’t know that I could track my diet! It will help me with my weight management..”
What I learned
Usability studies and peer feedback are so important as reality check and contributed to each iteration of the app and website designs.
Always challenge yourself by doing a project you have not tried before. I have not used a nutrition app before this project, I made sure I took ample time to do research and understand the competitors.
The norm is not always the best, you can challenge it. My test users have not used a nutrition app before, they all questioned some specific UI/UX that competitor apps are using. Instead of sticking to the norm, I improved it with users' feedback.
Next steps
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
Conduct more user research to determine any new areas of need.
