Project overview
Sheffy is an app to help kids learn how to cook healthy food.
Project duration: April 2021 to May 2021
The Problem
Parents want their kids to eat healthy and make good food choices at home and at school. You can cook healthy meals for your family but translating your knowledge about nutrition to children is challenging for even the most creative parent.
The Goal
Creating an app and a complimentary website to encourage kids to explore the world of food and nutrition in a fun new way.
Responsibilities
My role was designing the Voice of Art app from conception to delivery. My responsibilities were conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Target User
Children of all genders and backgrounds who want to learn cooking and nutritional value of foods.
User Research
I conducted user research and received feedback from users that I incorporated into user personas.
Currently, there isn’t any filter for searching recipes with options like the time of the day and also we should be careful about the level of the cooking. We should add easy filteration methods that help the kids while searching for the receipts.
Persona Creation
Yusuf, is a 9-year old student who is looking for an easy recipe for his mother.
Currently, there isn’t any filter for searching for recipes with options like the time of the day. And we should be careful about the level of the cooking. We should add filters that help the kids while searching for the receipts.
Affinity Diagram
From user research, I learned that there were some pain points for users. The first problem was the food selection process . Another problem was the profile button on the last page which was under the search bar and was similar to other filters. The users commented that they want to see a clear home page and easier selection options. I solved this by changing the selection to main category buttons. I also added a clear text after “made it ” that shows users their action is successful.
Design Process
Paper Wireframes
Creating paper wireframes shortened the turnaround time and saved my energy. It helped me to uncover the changes needed to make a better user flow with a very low effort.
Digital Wireframes
In this first version, I used a search bar and the listings in the same page. This caused a clutter and created a problem in the user experience so I decided to divide the screen and make the search option very clear in the home page.
Mock Ups & High Fidelity Prototype
I’ve changed search elements to filters also changed the primary color to create a final design that has better in accessibility and suitable for WebAIM standards.
Now the design really begins to take shape: actual text is used, colors are applied, and images are added. This mockup shows a visual that gives a better idea of the final design. I used high visible colors and added text to buttons for better accessibility.
I’ve also added high fidelity mock up for the web page and created a complimentary web site.
Final Design
You can check the final design prototype and please feel free to leave me a feedback in the comments section.