Top Meal
Role: UX/UI Designer of Top Meal
Duration: 2 monthes
Top Meal Vision
We are a team of food enthusiasts and childcare industry
professionals based in Calgary, and we believe Canadian children deserve to eat better, and our goal is to provide nutritious and delicious meals for kids in daycare. Our meals are hourly-fresh, healthy to the uttermost limits, nut-free to stay safe, and
tasty like a child’s dreams to please picky eaters.
Our menus are diverse and all-inclusive, and we only deliver to daycares.
Project Overview
Project:
web design
my role:
user researcher, interaction designer,UI/UX Designer
Duration:
two monthes
Software:
Userzoom
Figma
Adobe Photoshop
Design Goals:
-
Daycares know Top Meal.
-
Top Meal provides food service for daycares, so daycares can reserve
The Process
Discover
​
User Research
Business Research
Comparative Analysis
Define
​
User needs
Create Persona
Develop
​
Creat items list
Create Site map
Design
​
Ideation,
Sketches,
wireframes
test
itreations
Deliver
​
Wireframes
Prototypes
Discover, Interview
My discovery phase was limited to doing qualitative research; I interviewed three daycares and two schools to learn more about their needs and how they order food for their students. I also asked them to list their challenges in reserving and finding food for their daycares and school.
​
These finding show
-
The users care about healthy food.
-
The users are busy, and they need on-time sending.
-
The users are interested in saving money, so they pay attention to the range of prices.
-
The users need easy reservations.
-
The users need a variety of food.
-
The users pay attention to the galleries and kitchen photos.
-
Phone number and the address of the food provider company are essential for users, and they need to access
-
Users need to know the company's current customers and what they think about the services.
-
Users prefer to see all the menu food
Discover, literature review Comparative Analysis
literature review
​
Regarding George Balinov's article, 75% of users stated that they decide on a company's credibility based on its web design. B2B web design should be clean, simple, straightforward, and without unnecessary decorations. It should focus on content and CTAs and show that the website is functioning and kept up to date.
​
5 of essential traits that a well-done B2B web design should cover to do that:
​
​
​
​
​
​
Competitive Audit
​
I decided to do a competitive analysis to :
​
-
Know the strengths and weaknesses of your competition
-
How well have the competitors designed their service?
-
Find out how a competitor’s pages are structured visually and how they persuade users to sign up and purchase their offerings.
-
Does the competitor’s product pass basic usability, heuristic guidelines, and interaction design principles?
-
How is their user flow?
How do they optimize their user flows? Can they be improved? -
What are their features?
​
​
Define, create a Persona
Understanding the User
​
The persona is defined based on the data gathered during the discovery phase.
The website will be redesigned based on Kanga Daycare's needs and preferences.
Develop, create Items list
What is important on this website?
food provider websites should have fewer in-important pages so I decided to list the most important pages and most important questions that users looking for.
Getting in touch is one of the critical parts of this website. I should embed the ways of communicating with this company on different pages. I had to put the maximum amount of information about this issue and repeat it on the pages.The main challenge was replicating them so that they do not cause uniformity in the pages.I found that I must put other items correctly and in good design between the communication items to avoid repetitive annoyances.
I developed the site map. This is my final site map after a few iterations. For this assignment, I focused on the reserved items and try to make a trust
Develop, create site map
Design, Sketch and test
Sketch
Deliver, visual,wireframes & Prototype
After sketching and testing and iteration, in order to save time, I quickly got into the development of high fidelity digital wireframes, usually, when I have enough time I will design the low fidelity prototypes.
according to the brand identity, and the brand book I made a simple design system for Tpme meal
 menu |  Home page |  About us |
|---|---|---|
 Contact |
you can see the prototype here.