Self Chef
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
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 steps of research and website design for the purchase task.
Project Overview
Discover
We checked 11sites similar to the Self Chef site. In all these sites, we noticed how each site has displayed its services to create the best user experience.
In the analysis, it was found that in most sites, two methods are used to identify customer preferences:
Asking questions in the form of small quizzes.
Supplementary filter.
Competitive Analysis
Online Survey
A questionnaire containing 10 questions was designed, which 45 people answered, you can see the results obtained from this questionnaire below.
Factors that cause trust in the site:
Having enough information with details about the ingredients.
Secure payment method.
Seeing the review.
Having quality photos and videos.
User preferences for categorize and filter products:
Based on the cuisine of nations.
Based on the type of diet.
Based on the preparing time for dish.
Interview
Among the respondents, 8 people were interviewed. In these interviews:
The importance of having a detailed recipe with photos and videos was mentioned many times.
Specificity of site services on the first page.
Referring to the preparation time and also the delivery time.
See the ingredients needed to prepare food quickly.
Specificity of food calories, nutritional value and reference to allergenic substances.
You can see an example of what was discussed in the opposite.
It is better to have recipes with step-by-step photos and short videos.
The recipe must be complete and accurate with step-by-step photos.
I can quickly see the ingredients of food so that I can choose more easily.
I want to know how long it takes for the food to be ready so I can plan.
Its nutritional and allergenic have been specified for me.
The delivery time is important to me, as well as the preparation time.
Affinity Diagram
By reviewing the interviews, we managed to draw an Affinity diagram, the most important of which are given here:
Complete and accurate recipe with photo and video
Specifying calories and allergens
Preparation time and delivery
Clear information
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.
Site Map
As a result of all the research and interviews, a site map was designed, which after asking the users again and making changes, the site map was finally approved as follows.
User Flow
In the user flow design, Hana should order two meals and use the possibility of site filters
DEVELOP
Sketch , Mid-Fid Wireframe
Problem: The inappropriate place to specify the number of people meant that this part was not selected by the user, even though it was one of the important parts of the site.
Solution: Before entering the page, seeing a pop-up, the user would understand the importance of selecting this section
Problem: The diet selection filter and the way it was presented were insufficient and impractical according to users. At the same time, they felt obligated to choose him.
Solution: A CTA button was considered so that the user can go to another page and make more complete choices.
Problem: Most of the users shared that they would like to have the option to filter the preparation time. so this filter was added to this page.
Solution: This filter was added to this page.
Usability Test (Phase1)
Mood Board
We tried to use green and yellow colors , which include a sense of freshness and health.
UI-Kit
We designed UI-Kit to maintain efficiency and consistency.
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)
Problem: Users did not quickly understand The food category.
Solution: Insert category information into the box (1).
Problem: The desire of the user to see the ingredients.
Solution: By hovering, the ingredients can viewed quickly (2).
Problem: Users did not understand the limitation of delivery days.
Solution: Add this information to the top of all product pages (3).
Problem: According to users, the recipe page had a lot of confusing information.
Solution: Transfer nutrition information to the Pop-up (4). Delete unnecessary information (5).
Problem: According to the users, answering the first and second questions was a bit confusing.
Solution: Adding icons to help users chose the right option (6).
A/B Test
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?
Completion of the mobile version.
Design improvement with more iterations.
Keeping the design up to date and making appropriate changes over time.