Design Tool: Figma
PROJECT: Nutrition World
DURATION: 6 months
GOAL: Design an App and Responsive Websites that pique children's interest in nutrition and encourage them to monitor their dietary habits.
Overview
Many kids love to eat sweets, junk food, and snacks, which can be unhealthy. Instead of simply restricting their diets, we aim to educate children about nutrition through our product. Our product will focus on two goals: First, to make it easy for kids to determine whether the food they eat is good or bad for their health. Second, to provide an engaging learning program that will capture kids' attention and help them learn more about nutrition. We will develop both an app and a website to ensure that users can access our product from any device.
Challenges
Design a product that piques children's interest in learning about nutrition.
Ensure easy and secure account creation for children.
Present nutrition information in an easy-to-understand manner for children.
Develop a product that helps children easily manage their eating habits.
Allow children to easily track and review their learning progress.
RESEARCH
Key Questions:
Who are our users, and what are their demographic characteristics?
What are our users' primary nutrition education and management goals and needs?
When do users typically want to access this type of product, and are there any specific timeframes for their usage?
Where do users use this type of product, such as at home or school?
Why do users choose to use this type of product over other resources, and what features or benefits are most important to them?
How does our product specifically benefit users in comparison to other nutrition education and management solutions?
We conduct various research activities to identify the target users, analyze competitors, understand user needs, and uncover pain points. The insights gained from our research will guide us in improving the product and delivering the best user experience.
Target Users
Children between the ages of 8-16.
Children who are just beginning to learn about nutrition.
Children who need to make their own food choices.
Parents (sub-users) who want to help their children learn about nutrition.
Meet the Users
Persona 1
Name: Amanda Chen
Age: 33
Occupation: Housemother
Amanda is a 33-year-old stay-at-home mom residing in California who prioritizes the health and well-being of her daughter. She is well aware of the significance of healthy food in the growth and development of children. Amanda believes that it's crucial for her daughter to learn about nutrition and make informed decisions about her food choices, especially when Amanda is not around.
User Journey Map
Persona 2
Name: Jonathan Javier
Age: 13
Occupation: Middle School Student
Jonathan is a 13-year-old boy who attends middle school in New York. He is passionate about becoming an athlete and spends time every day exercising and training his body. Due to his busy schedule and his parents' limited availability, he often needs to make food decisions on his own. Jonathan is keen to learn which foods are beneficial for his training, as he aims to build muscle, increase his energy levels, and strengthen his bones.
User Journey Map
DESIGN
I followed a step-by-step approach to building the prototype, allowing us to perform usability research and determine user feedback.
Initial design concepts
Competitive audit
Paper / digital wireframe
Accessibility considerations
Low fidelity prototype
Usability research
Mockup
High fidelity prototype
Usability research
Initial design concepts
Parents want their children to maintain good health, but instead of imposing strict dietary restrictions, why not engage them in learning about nutrition? Rather than compelling them to read dry nutritional information, why not gamify the learning experience to make it enjoyable?
Competitive Audit
We analyzed several potential direct and indirect competitors, examining their strengths and weaknesses. Nutrition World has the opportunity to differentiate itself from the oversaturated market by providing the best-for-kids system to its users.
Engaging educational games vs Monotonous lectures.
Intuitive navigation vs Confusing navigation.
Visual learning aids vs Text-heavy learning materials.
Eye-catching design vs Lackluster design.
User-friendly search function vs No search function available.
Wireframes
Paper Wireframes
To visualize the initial concept of the app and homepage design, I created paper wireframes to quickly sketch out multiple versions and finalize the first iteration of each design.
Digital Wireframes
Mobile App
Turn the paper wireframe into a digital wireframe for the mobile app.
Screen Size
Mobile screen 390 x 844 px
Digital Wireframes
Responsive Web Design
Turn the paper wireframe into a digital wireframe for responsive web design.
Screen Size
Desktop screen 1920 x 1080 px
Tablet screen 834 x 1194 px
Accessibility Considerations
Incorporate a voice search feature to the search page to assist users who may have difficulty typing words into the search bar.
Ensure that the icons on the page change color and size when switching to accommodate users with color blindness and facilitate navigation.
Prioritize the use of icons over text to enhance user experience and prevent difficulties in reading the text, ultimately making it easier for users to complete tasks.
Wireflow
After creating the preliminary wireframes, we reviewed the research results to ensure that they met users' needs. Following this, I created a low-fidelity prototype based on the wireframes.
Usability Research
Introduction
Project Background: Our team has noticed that many parents want their children to be interested in learning about nutrition, rather than simply forcing them to eat healthy foods. To address this need, we aim to create a product that not only makes it easy to check nutrition facts but also makes learning about nutrition an enjoyable and engaging experience through the use of interactive games and activities.
Research Goals: Our primary goal is to gain a deeper understanding of how our target users will engage with and feel about our product. Specifically, we want to determine whether users are likely to lose interest in the product over time, how comfortable they feel completing various learning tasks, and whether they find it easy or difficult to understand the nutritional information provided for each food.
Research questions
What factors prevent children from completing the learning program?
Are there any aspects of the product that children find challenging or difficult to use?
How much time does it take for users to add foods to their favorite list?
Do children find it easy to create their accounts on the product?
Are there any features or functions of the product that confuse or frustrate users during their usage?
Key Performance Indicators (KPIs)
Time on task: What is the average time it takes for users to find a food item and add it to their favorite list?
Drop-off rates: What are the reasons that lead users to abandon the app/website before completing the task?
Conversion rates: What percentage of users successfully complete the tasks?
System Usability Scale: How satisfied are customers with the product, as evaluated by a questionnaire?
Usability Test Plan
Unmoderated usability test.
Location: United States - local parents and kids, as well as remote participants (who will undergo the usability test on their own devices).
Date: Sessions will take place on September 6-7 during normal business hours and September 8-9 after hours.
The goal of the test is for 7 participants to find and add food to their favorite list, complete the first nutrition learning program, and fill out a questionnaire about their experience.
Each session will last for 15-20 minutes.
Compensation: Participants will receive a $10 coupon from an online healthy food store.
Participants
Participants who are:
Must be living in the U.S.
Must be between 8 - 16 years old.
Should be able to make independent decisions about what to eat.
Parents who want to help their kids improve their eating habits.
Tasks
Add a food item to "Favorite Food List" successfully.
Complete the quiz from Nutrition Game LV.1 - Vol 01 successfully.
We will provide a series of user flow prompts to guide the participants through the tasks, along with a follow-up questionnaire.
Engage with Users
After creating the low-fidelity prototype, we will engage with selected potential users using our research plan. Our team has prepared a survey with 12 questions for 7 participants. Participants will be asked to answer the questions, run through different scenarios in the prototype by following the prompts, and answer the follow-up questions. The entire process will be conducted remotely, and we will gather all feedback to inform the next steps of our design.
Key Problems
a. Calendar
Users have expressed frustration with the sign-up process, as they are required to manually enter their birthday and age instead of using a calendar tool.
b. User interface
During the testing, users expressed dissatisfaction with the User Interface design, finding it dull or unengaging.
c. Search tools
Users were unsure whether to tap the search icon or the text label next to it to initiate the search.
d. Lecture materials
Children become frustrated when they have to read too much during the lecture and tend to lose focus quickly.
e. The quiz
Children find the quiz experience frustrating because the quiz page feels too much like taking quizzes in school.
Mockups 1
Mobile App
Turn all the low-fidelity wireframes into high-fidelity mockups. It's time to get close to the actual product!
Screen Size
Mobile screen 390 x 844 px
Improvements
a. Calendar
Add a calendar to help kids to put in their birthday and age, and then learn how to use the calendar.
b. User interface
Create a new interactive animation on the interface instead of letting kids read a mathematical bar graph and add an interesting background on the checking eating habits button.
Add a sliding bar feature to allow kids to rate their favorite foods, increasing interactivity with the product.
Create an expanded map and add more interesting images to the learning pages to make nutrition education more enjoyable for children.
c. Search tools
Revamp the layout of search tools by adding clear and easily recognizable icons to each tool.
d. Lecture materials
To enhance the learning experience for children, incorporate a video or animation for the main lecture rather than relying solely on text-based readings.
e. The quiz
Design a new user interface to make quizzes more engaging, resembling a game rather than a challenging exam.
High Fidelity Prototype
Mobile App
Sitemap
Our product is designed for children, so we have kept the site as simple as possible. We understand that fancy features meant for adults may not be easy for children to use. The main goal of this product is to spark children's interest in learning about nutrition and enable them to easily track their eating habits. It can be used independently or with parental guidance.
Mockup 2
Responsive Web Design
Turn all the low-fidelity wireframes into high-fidelity mockups. It's time to get close to the actual product!
Screen Size
Desktop screen 1920 x 1080 px
Tablet screen 834 x 1194 px
High Fidelity Prototype
Responsive Website
2nd Usability Research
Key Problems
Language
Kids complain that "Add to food preference list" is a more complicated sentence for them to understand this feature.
Improvements
Language
We have decided to change the wording to "Add to Favorite Foods List" to make it more understandable for children and help them better grasp the purpose of this feature.
Complete the Challenges
Challenge 1
Design a product that piques children's interest in learning about nutrition.
To make learning more engaging for children, we have created a game-like learning map where kids can play through different levels while learning about various nutrients and how they impact their bodies. In addition, we have included fun videos for children to watch. Our primary goal is to encourage children to become interested in learning about nutrition through interactive and entertaining experiences.
Challenge 2
Ensure easy and secure account creation for children.
To protect children's privacy, our product does not require them to provide their real names or photos when creating profiles. Instead, they can use a nickname and leave the profile picture blank. The system only asks for their height, weight, and birthday to provide personalized nutrition recommendations based on their age.
Challenge 3
Present nutrition information in an easy-to-understand manner for children.
Our program evaluates the nutritional value of different foods and assigns each food a rating based on its nutritional content. Children don't need to go through the complicated nutrition facts for each food. Instead, they can easily determine the quality of a food by its rating. However, if they are interested, they can still access the detailed nutrient information for each food.
Challenge 4
Develop a product that helps children easily manage their eating habits.
The program calculates a nutrition score for each child based on the rating of their favorite foods and the nutritional content of those foods. This makes it easy for kids to understand how their eating habits are affecting their bodies. Additionally, emoji icons are used to show the child's body condition. We believe this fun and interactive approach will help children better understand the importance of good nutrition.
Challenge 5
Allow children to easily track and review their learning progress.
We have added a new feature that allows kids to review correct answers after completing a quiz. This feature gives them the option to either retake the quiz or move on to the next lesson. Additionally, we have added a section where kids can view their quiz results for each lesson, as well as their overall scores for the entire course. Parents and children can easily access their previous quiz results for review.
Style Guide
We have carefully chosen a green color combination to represent the nutritional and healthy aspects of our design. To showcase the variety of nutrients, we have added additional colors. Our team has fine-tuned all colors using various tools to ensure that the visual designs are comfortable for our users.
After careful consideration, we have decided to use the following green color combination: #3D550C, #81B622, #ECF87F, and #59981A. In addition, we will use #FF5C4D (carrots), #FF9636 (orange), and #FCE40C (banana) for other color elements in our design.
