Sayurbox: Recipe and Ingredient Meal Kit Service

Aditio Alif Junio
7 min readNov 10, 2020

Sayurbox is an application which can help user to shop the ingredients online and delivered directly into the user’s address. This application is very helpful for people with tight schedule and do not have much time to go to market or supermarket for buying the ingredients.


During this pandemic, many people have new hobbies, one of them is cooking. For beginners, they usually learn to cook from family, friends and video tutorials on the internet. Beside that, for beginners, buying ingredients sometimes can be a problem, because they don’t know how many ingredients are needed to cook a meal so they often wasting the ingredients or face lack of ingredients.

According to a study from Porch, the “X” gen and baby boomer, judge that millennial is a the bad chef. It is because of just five percent from 20–30 percent who consider themselves to have ability in cooking at their house.

From that background, I try to make a design concept which can help user to start cooking with tutorials and user can also buy the groceries online from the app. These features can help users to learn some new recipes from the tutorials and buy the groceries based on the dose needed so there are no ingredients wasted or lacked. I hope with this design concept can help the user to save the time and money.


How Might’s We

1. How might we make a cooking tutorial feature that is clear and easy to follow?

2. How might we provide the groceries purchase features based on the package in the tutorial, so users can buy the ingredients efficiently?

Design Thinking

Using the design thinking method, I want to define who are the target users, what are their needs, and the insights that will be processed into creating a solution.

My Role:


I did the research to employee and college students in Jabodetabek area which love to cook or ever do cooking. I chose these target users to find out the pain point and their behavior in cooking, watching the tutorial, and buying the ingredients.

In this case study, I did research in quantitative and qualitative method by spreading the survey to 24 people with the age range of 20–35 years old. The survey questions are divided into three criteria; they are the habit in cooking, habit in watching tutorial, and habit in buying the ingredients.

Based on the survey results, 50% of respondents cook 1–3 times a month and only 4.2% which cook more than 9 times or almost every day. Then, more than half respondents 58.3% often watch the food tutorial and apply it when they cook and just 4.2% which never apply tutorial to their food.

In buying the ingredients, many of the respondents buy them in the traditional market (42.3%), while the 7.7% buy them online. For the purchased ingredients, most the respondents often excess the ingredients they bought for 33.3% and lack of ingredients only 8.3%.


Find the problem based on research, observes and define the problem to get the insight. From some insights that I get, I make the Affinity Map that help me to categorize the insights so it can be easy to understand.

Affinity Map

From some insights that I get, I make the affinity map that help me to categorize the insights so it can be easy to understand.


After get insight, let’s define the solution for the problem.

User Persona

We make a user persona to give an illustration about our users. In this project, I use one user persona which is Andrea that have the same characteristics with the target users for this solution.


User Journey

In this section, we display the user journey map, a visual representation of the customer experience and a tool for designers to look at your application from the user’s point of view.


The next is the prototype phase, before enter the HiFi prototype, I do brainstorming by making some sketches to the prototype I make.

High Fidelity

After doing the brainstorming and find the solution in sketch, the next step is making the HiFi Prototype. In this project, I used Figma application to make the prototype.

Below is the display of the design solution that I made:

Tutorial Resep Page

After the user chooses the food recipe tutorial, they will go to the tutorial page. This page consists of four sections.

1. Video from the food recipe tutorial.

I make the tutorial in video, based on the research that 95.8% of respondents like to see the tutorial in form of video.

2. Overview of the food recipe.

Contains brief information about the food recipe such as the cooking time, size of portion, amount of calories, level of difficulties in cooking the recipe, and the price of ingredients if the users want to buy the package of ingredients.

3. Ingredients Detail.

Contains the information about ingredients that needed by users to cook the recipe.

4. Step by step tutorial.

In the below section, I also add the step by step tutorials in form of text which can help user to follow the recipe easily.

Pengiriman Page

I redesign the delivery time page so user can choose the date of delivery when entering the payment page. And I add time options in an hour, so that it becomes easier for users to determine delivery times.

Usability Testing

I did the user testing to validate the solution whether it can solve the problem or not. I did the testing by giving the task using the prototype that I have made. For the test, I asked 5 (five) people to do 3 tasks consist of to select the recipe, select delivery time and order the groceries until finish.

After did the testing, there are two areas which mentioned widely by the users, they are:

1. Food Recipe Package Selection.

Users feel confused when they want order 1 portion for 2 pcs, they cannot add and should choose 2 portions, even though they want order 2 kind of ingredients for 1 portion each.

2. Detail of Food Ingredients Package

Users want the detail of package such as the amount of ingredients for each portion. Just like the family portion, users want to see the detail of ingredients and the amount of ingredients that they want to order.


  • Added a button to help users add the number of packages that they want to order.
  • Users want to see the detail and the amount of ingredients per portion. So I added a feature where users can view details by clicking on portion card.

Final Prototype

Below is the final prototype after iteration.

Full Prototype

You can see full prototyping here.


Sayurbox is an application to order the groceries that most used in Indonesia. In this pandemic era, Sayurbox is very helpful for the people who do isolation in their house and #stayathome.

In this project, I make a design concept for Sayurbox which can help users specially millennial to start cooking but need tutorial and can buy the ingredients from home. I hope this design concept can inspire and become a consideration so it can help user to shop and learning about cooking easily.