May / 2022
WHOLESOME
UX/UI Case study
OVERVIEW
01 About Project
Wholesome is an app concept that helps parents plan nutritious meals and build balanced grocery lists in colaboration with their children, making sure they like the served food.
04 Role
User research, competitor analysis, user persona and journey, storyboard, defining stage, information architecture, style guide, design system, low-, mid-, and high fidelity prototype of mobile app incl. testing
05 Deliverable
02 Topic
Wellnes & Healthy eating
03 Learning goal
Conduct full user research, organize the information architecture, create wireframes and produce high-fidelity prototypes including smart animations
04 Device
High-fi prototype of a mobile app and presentation deck
06 Timeline
2 weeks
07 Tools
Figma & Useberry Test
Native iOS App
PROBLEM
The main problem is that parents are not sure either their children are getting all the nutrients they need for healthy growth and development. They don't have enough inspiration and time to prepare healthy and balanced meals and if they do - children refuse to finish them (waste of food, extra cost, unmotivation).
SOLUTION
App that allows the users to track their children nutrition levels and provide insights based on the previous health data. Users would be able to control dieting goals and eating progress of they children. The feature "shopping list" would allow them effortlessly to outline their weekly grocery shopping list and send the list to children device so they can actively participate in making decision about healthy food choices. The app would be very is simple, intuitive and would allow people to take the control of their children health and meal.
PLAN
Help parents in matters of their kids nutrition and meals planning.
LEARN
Provide nutritional information to improve children eating behaviour.
ENJOY
Create an enjoyable learning experience for the adults while using the app.
USER RESEARCH
To find out the insights, pain points faced by parents and caretaker while planning meals for the chidren..
Getting to know the User
We started with doing initial research about children eating habits.
To be able understand better the market we looked for data about children's nutrition needs and behaviours. We searched the information about daily eating guidelines and diet recomendation.
After getting a basic understanding of the subject we continued with our quantitative research.
Children have different nutritional needs at different age groups
Proper nutrition is essential for a young child’s health and growth
Parents have problem with planning nutrient-rich meals for their children
ORGANIZE
The lean canvas
After defining our main goal of the reserach we went through the brainstorming and created a short lean canvas map that helped us stayed focus on what´s important and brought us idea about how to prepare the survey. We tried to focus as much as possible on empathizing with users to be able understand their problems and emotions.
To know what people think and feel.
THE USER
The Survey
We started this part of research research by sending out Google Forms questionary to friends, family members, trying to reach as many parents and caretakers as possible. We formulated 9 different questions, (most of them open so we could more deeply understands users pain points and needs). The survey was focused on people's experience of preparing and planning meals for their children.
We surveyed 15 people and here is what we found out.
71% of participants say that finding out the right nutrition for a healthy meal is time consuming
When planning a meal, parents face difficulties of making sure child's meals provide all the nutrition they need
All parents are actively finding ways to get your children to eat more fruits and vegetables
The main source of inspiration for meal planning are: parenting books, pediatrician advise, other, internet + articles
85 % of parents have problem with meal planning, especially on weekdays
Kids involvment in making food choices during the meal planning is especially complicated in young age
Empathy Map
Another tool that helped us understand our user’s needs was Empathy Map. Using design thinking methodology we broke down our notes into four main character categories: think, say, feel & feel, see, hear, see and do. As we worked through the questions to understand the problem, we brainstormed possible pains and gains.
"I want to be sure my children gets all the nutrition they need"
​
"I would like to find an effective way to plan healthy meals for them"
​
"It's not easy to make sure your kid is eating healthy food"
User Persona
Synthesising the information and patterns gathered from the survey our user persona Olivia who is likely to enjoy our app and find it useful. Creating the user persona gave us a better understanding of the user’s motives and ways in which they would interact with the product that we are designing.
My kids are very picky and usually they are not interested in fruits and vegetables that I am giving them.
There is a lot of food waste when my kids refuse to finish the healthy portions of their meals.
I don’t have enough of time to look into different foods that are nutritious.
I feel like I can’t give my kids food that both would make them happy and would be nutritious.
Job Statements
How might we
When I plan the meals for my children
I want to make sure a variety of nutrients are included
So I can be sure my children will get all the nutrients they need for healthy growth and development.
How might we allow children to be involved in their parents’ meal planning so that they are open to trying and consuming healthy foods, and make this process a fun experience at the same time?
User Journey
After setting up the Olivia— our User Persona and Jobs to be done we developed a User Journey in order to identified the happy path we wanted to focus on.
To get to know the competition
THE MARKET
The very first step was to conduct a competitive analysis to identify opportunities and pain points in the current marketplace. A competitive analysis helped us to think creatively about where we might be able to innovate in our UX design.
The feature comparison
In order to better understand the market and our direct competitors, we decided to focus on 4 different applications with similar content: Foodvisor, Nutricoach, Kidsmeals and Foodexplorer and realize a feature comparison to see what features do they use, what are they doing good and bad.
The analysis brought us interesting results and we could see that they were competitors doing an especially good job but also the opposite. By observing a poor user experience, mostly based on confusing navigation, difficult to understand user interactions and excess of the represented information, we learned about what we shouldnt do in our project. In the other hand — we also found some valuable unique features that helped us to understand where and how could we innovate and and with what features.
User Flow
When we had a clear picture of our users’ needs and their behavior, we started to brainstorm ideas about the user flow and possible flow we wanted to focus on. We kept in mind our personas and their potential needs & pain points. To showcase how Olivia would interact with the product, we constructed 3 different flows showing the following scenarios:
UX Strategy Blueprint
After having defined our user persona and the user flow we realized a UX Strategy Blueprint. We defined what challanges we were facing and what were our guiding principles. We also defined our aspirations, activities, measurements and focus areas. It helped us to see all the moving parts in a single overview. In doing so, it simplified our strategy, making an abstract concept much more tangible for.
Moscow Method
After having defined our user persona and the user flow we realized a UX Strategy Blueprint. We defined what challanges we were facing and what were our guiding principles. We also defined our aspirations, activities, measurements and focus areas. It helped us to see all the moving parts in a single overview. In doing so, it simplified our strategy, making an abstract concept much more tangible for.
Mood board
To get inspiration in our design direction, we formed a mood board to determine the layout we wanted to use.
STYLE TILE
In the final phase of the UI Design, we began by creating our styling guide where we defined the colours and typography
Colors
Buttons
Iconography
Typography
Typeface
Body text
Headings
Ilustrations
Landing page
IDEATE
Iterating for a market:
Design, prototype, test, repeat
Low fidelity
With the structure mapped out it was time to create low-fi’s to get some ideas on paper. We each made our own and communicated on how we wanted the app to work and navigate.
Usability Test
Usability Test
To test our design we created interactive mid — fidelity wireframes and made sure to realize a test to get a feedback about funcionality of our app. We made two different version of a flow represented on a mid-fi prototype and using Useberry asked them to do simple tasks, such as ”answer if your children finished the meal and check the reward points“and use the ‘Search Feature’ to get to the Article page. Thanks to this step we were able to identify a few drawbacks in the initial layout version.
Mid Fidelity
High-Fidelity
We used our mid-fi results to include changes in our high-fi and styled our prototype with the help of our Style Guide.
THE FINAL PRODUCT
Create a profile for your child(s) and learn about personalized dietary guidelines.
Preparation is a key. Plan before you shop and make sure you know what food you alreday have in your fridge.
Let your kids help you. Send to their device food options and let them chose what they wanna eat this week.
The dashboard provides you information about your child calorie consumption and gives your ideas to complete the missing proteins, fruits and vegetables.
Make sure you track your kids diet by answering "Did your child finish the meal?"
Design System
Thanks for watching!
