Self Chef (Mobile Version)
Customized Fresh and Semi Prepared Meals
Self Chef is a website that:
Sells Package of semi-prepared fresh ingredients with cooking recipes.
Offering a variety of foods based on costumer interests and preferences.
Offers meals recipes to users based on the ingredients available in the their refrigerator.
This website is also designed adaptively for mobile.
Role
UX/UI designer
Team
Group of 4
Duration
2 Months- Part time
Tools
Figma, Fig Jam, Canva, google Forms
Project Overview
Goals
Designing a simple and attractive site, so that the customer is interested to buy from the site.
Providing an easy navigation for the user to choose the foods of the nations as well as a simple way to recognize the user’s diet and preferences.
Increasing customer motivation by showing the benefits of shopping on the site, such as significantly reducing food waste.
Providing a simple method to the user to prepare a variety of food using the ingredients in his refrigerator according to his diet.
Two Task
Regarding the business services, we have defined two tasks for the user:
order from the site .
use the refrigerator offer, which is followed in the mobile design.
Here I explain the task of using the refrigerator suggestion.
Discover
We reviewed a similar site that suggested food preparation based on ingredients, some of which you can see in the table below.
The Sites approaches were different:
choosing only one item or choosing a variety of ingredients.
Providing recipes on the site or referring to other sites.
Competitive Analysis
Interview
Among the respondents, 8 people were interviewed. Specifically, regarding the refrigerator offer, the common opinions were as follows:
Preferring to see more common ingredients first.
See recipe details on site.
Referring to the preparation time.
Specificity of food calories, nutritional value and reference to allergenic substances.
You can see an example of what was discussed in the opposite.
Ingredient list not be confusing
The recipe is available on the site.
Quickly find the desired item.
Its nutritional, calorie specified for me.
Preparation time. is important to me.
Define
Persona
Based on the results of the survey and interviews, the persona was designed in order to better understand the user's needs and design the site well.
User Flow
In the user flow design, Hana use the refrigerator offer.
DEVELOP
Sketch , Mid-Fid Wireframe
Change made:
The preferences page was designed as a pop-up to shorten and speed up the user's navigate.
Related icons added to the preferences page for better understanding and quick selection.
Usability Test (Phase1)
Here you can see the sketch of a number of pages that are not on the site in Mid-Fidelity.
Change made:
A search bar added to the ingredient page to make selection faster and easier.
We designed UI-Kit to maintain efficiency and consistency.
UI-Kit
Accessibility Test
The contrast between the foreground and background colors of CTA was tested.
DELIVER
High-Fed Prototype
Here are some pages with high fidelity.
Usability Test (Phase 2)
Change made:
Smaller design of recipes carts for easier and more accessible access, also to avoid excessive navigation
" Available" stickers on recipes carts that are available for buy on site to encourage customers to purchase
Change made:
Introducing food in a separate box so that the user can easily access basic information
Adding photos of ingredients for faster understanding
Adding a nutrition table to the recipe page to provide more complete information to the user
Reflection
What did I learn?
The Important role of research in providing practical and efficient products.
The importance of communication with team in solving challenging situations.
The importance of usability testing and iteration in product improvement.
The importance of knowing the business details and communicating with stakeholders for proper design.
What next step?
Design improvement with more iterations.
Keeping the design up to date and making appropriate changes over time.