Competition Project

Mobile Application

As Product Designer

Detasty

As Product Designer

DeTasty is a mobile-based application that provides cooking recipes by scanning ingredients. Its goal is to reduce inefficient food processing in the community. Additionally, DeTasty offers short recipe videos that users can watch to cultivate an interest in cooking.

Problem

Food loss and wastage in Indonesia continue to be serious issues year after year. Data from the Ministry of National Development Planning, Bappenas, and the World Resources Institute (WRI) Indonesia indicate that between 2000 and 2019, Indonesia lost approximately 48 million tons of food annually, equivalent to 184 kg per capita. Vegetables are the least efficient food in their processing, with a loss rate reaching 62.8% of all domestic vegetable supplies in Indonesia.
The most dominant source of waste comes from households, contributing 80% to the total national waste in 2020. The National Waste Management Information System (SIPSN) in 2021 recorded the amount of residual food waste at 46.35 million tons. The three provinces generating the most food waste are West Java (49.74%), Central Java (45.79%), and Bali (27.71%).
The primary causes of food loss and wastage, especially at the household level, include market quality standards, consumer preferences, lack of education, consumer behavior, market competition, purchasing power limitations, and technological constraints. A survey on Food Loss and Waste (FLW) in 2021 revealed that consumer behavior is the main cause, where 70% of respondents tend to discard food items due to a lack of knowledge on processing them. The Ministry of National Development Planning and BAPPENAS have formulated 45 national strategies across five policy directions to manage food loss and waste, reducing the figures from 112 million tons annually to 49 million tons annually by 2045. One of these policy directions is the alteration of societal behavior.
To achieve this reduction, changes in consumer behavior are considered crucial. Despite a significant interest among respondents in trying new recipes, the lack of necessary ingredients according to the recipes leads to the disposal of unused food items. Therefore, a solution is needed to transform consumer behavior and reduce food loss and waste rates in Indonesia.

Solution

Based on the previously explained problems, my team and I underwent an extensive design process and proposed several solutions, those are:
1.
Providing a recipe recommendation technology based on available kitchen ingredients using AI Detection technology.
2.
Providing short video content about cooking recipes to attract the public's interest in preparing food effectively and efficiently.

Process

My team and I unanimously agreed to employ the Design Thinking approach in designing this product. According to Interaction Design Foundation, the design thinking method is highly effective in addressing complex problems that have not been clearly defined. Design Thinking consists of four stages, each with several processes.
My team and I unanimously agreed to employ the Design Thinking approach in designing this product. According to Interaction Design Foundation, the design thinking method is highly effective in addressing complex problems that have not been clearly defined. Design Thinking consists of four stages, each with several processes.
Stage 1: Empathize
In this stage, my team and I conducted qualitative research on potential users through in-depth interviews. We targeted three user groups for the application: housewives, students who frequently cook in dorms, and working individuals who prepare meals at home. Following Nielsen's recommendation, we conducted in-depth interviews with 3 participants from each user group. The purpose of these interviews was to unearth the challenges users face in optimizing their food preparation. After transcribing the interviews, we found main problem causing food waste.
I usually throwing away leftover food ingredients because I didn't know how to use them in cooking. I feel current platforms still don't provide solutions for those who don't have all the ingredients for their desired recipes.
- Respondent
Stage 2: Define
After the Empathize stage, we proceeded to define the problems by creating UX artifacts such as Empathy Maps, User Personas, and User Journey Maps. All these UX artifacts were digitally created using Figma Jam.

Empathy Map

The Empathy Map was crafted to aid the team in understanding what potential users directly feel and experience regarding their issues in optimizing food processing. The empathy map is divided into four quadrants: says, thinks, does, and feels. Sticky notes were used to display each statement, with pink notes addressing students, blue and yellow notes for housewives and working individuals.

Empathy Map

Empathy Map

Empathy Map

User Persona

User Personas were created to develop fictional user characteristics for deTasty. These were based on the identified problems and user needs during the Empathize stage, and categorized into three user personas: housewives, working individuals, and students.

User Persona of housewife, student, and working individual

User Persona of housewife, student, and working individual

User Persona of housewife, student, and working individual

Based on the created Empathy Map and User Persona, we identified one significant problem for each user group. These problems were defined in the form of Point of View (POV), and we then formulated How Might We (HMW) sentences to address these issues.

Housewife

POV: A housewife who frequently cooks at home seeks varied recipe recommendations based on the ingredients available in her kitchen because she believes this approach might help save monthly shopping expenses by maximizing the use of existing kitchen ingredients.
How Might We: How might we provide a recipe recommendation application with multiple categories, utilizing only the ingredients available in the kitchen?

Student

POV: A student who cooks daily in their dorm needs nutritional information for each meal they prepare because she feels it might help her maintain an ideal body weight.
How Might We: How might we create a cooking recipe application that displays nutritional content for each recipe?

Worker Individual

POV: A working individual who prepares meals in their apartment every day needs an easy way to get groceries after work hours because she believes this would enable her to cook immediately upon reaching the apartment.
How Might We: How might we provide an application that makes it easy for users to shop for groceries anytime and anywhere?

User Journey Map

To comprehend user needs when using the product, my team and I created User Journey Maps for each user type. The components of the User Journey Map include Phases, User Actions, Goals & Experience, Feelings and Thoughts (represented by emojis), Pain Points, and Opportunities.

User Journey Map of housewife, student, and working individual

User Journey Map of housewife, student, and working individual

User Journey Map of housewife, student, and working individual

Stage 3: Ideate
In this stage, my team and I conducted brainstorming sessions and designed the UX according to user needs. The brainstorming and design processes were based on the analyzed needs from the Define stage.
Before proceeding with the design, my team and I generated several ideas to address the "How Might We" questions. These ideas have been stated in the “Solution” subsection.
After proposing several ideas related to the deTasty product, my team and I created user flows for each task that users might perform within deTasty. The user flow serves to provide an understanding of the basic user interactions with the product. It becomes a guide for the team to create other design elements such as Information Architecture, wireframes, and the product prototype. The user flow can be viewed more comprehensively through this link. Here are 2 user flows from solutions we’ve created:

The flow of receiving cooking recipe recommendations based on the scanned cooking ingredients' results.

The flow of receiving cooking recipe recommendations based on the scanned cooking ingredients' results.

The flow of receiving cooking recipe recommendations based on the scanned cooking ingredients' results.

The flow of saving recipe videos

The flow of saving recipe videos

The flow of saving recipe videos

To organize information within the product effectively, my team and I created an Information Architecture (IA) to determine the hierarchy of pages and information within the system. Information Architecture also serves as a artifact for the team to estimate the number of pages needed. We internally created the information architecture using card sorting techniques in the Figjam application.

Information Architecture

Information Architecture

What makes DeTasy special?

You might be wondering what sets deTasty apart from other apps already available in the market. To answer this question, my team and I conducted a competitor analysis of several products such as Cookpad, Yummy, and BahanBaku. Here are the results of our analysis:

Competitor Analysis

Competitor Analysis

Stage 4: Prototype
In this stage, my team and I created 2 prototype models: a low-fidelity prototype in the form of wireframes and a high-fidelity prototype. Wireframes were created using Balsamiq, as the tool provides necessary interface components like buttons and text inputs, making the wireframing process more efficient. The layout of elements and text was organized during the wireframing process, allowing my team to save time when creating the high-fidelity prototype.

Wireframes

Wireframes

After creating the wireframes, my team and I proceeded to make a high-fidelity prototype using Figma. Following Ben Shneiderman's Eight Golden Rules, consistency in UX and UI Design is crucial for creating a good design. Therefore, to maintain consistency, we implemented a design system and style. The design system and style consist of button components, text inputs, labels, navigation bars, top bars, color usage, icons, text, and more.

Play Prototype Now!

Play Prototype Now!

High-Fidelity Prototype (Mockup)

High-Fidelity Prototype (Mockup)

Did you implement UX Laws in your mockups?

Yes, of course. I always consider all the components I put in place. By applying UX Laws in the prototype I created, I can ensure the creation of a product that is comfortable for users. Below are 2 examples of implementing UX Laws in this prototype.
Hick's Law
This principle prompted me to think about the number of options presented in the deTasty app. For example, on this help page, instead of lumping all the help options into one, I decided to group them into two categories. This aims to make it easier for users to find help options that suit their needs.
This principle prompted me to think about the number of options presented in the deTasty app. For example, on this help page, instead of lumping all the help options into one, I decided to group them into two categories. This aims to make it easier for users to find help options that suit their needs.
Fitt's Law
This law shows that the size and distance of a part affect how quickly a user can use a feature. I applied this law to a cooking ingredient scanning page. Once the scan is complete, I place the "Tampilkan Rekomendasi Resep" button closest to the user's finger position and widen the button to make it easy for the user to reach.
This law shows that the size and distance of a part affect how quickly a user can use a feature. I applied this law to a cooking ingredient scanning page. Once the scan is complete, I place the "Tampilkan Rekomendasi Resep" button closest to the user's finger position and widen the button to make it easy for the user to reach.
Stage 5: Testing
In this stage, my team and I evaluated the designed solutions. Before conducting the evaluation, we defined matrices to measure usability using usability elements as metrics. We chose usability metrics because it is essential in a system/application, as Frank Guo emphasizes. According to ISO 9241-210:2019 titled "Ergonomics of Human-System Interaction," usability consists of three aspects: effectiveness, efficiency, and satisfaction.

Aspects

Aspects

Definition

Definition

Measurement Instrument

Measurement Instrument

Goals

Goals

Effectiveness

Effectiveness

Observing how users can smoothly execute tasks without significant obstacles.
Observing how users can smoothly execute tasks without significant obstacles.

Completion Rate

Completion Rate

Obtain a minimum completion rate score of 76%.
Obtain a minimum completion rate score of 76%.

Efficiency

Efficiency

Efficiency

Time required by the user to complete the task.
Time required by the user to complete the task.

Time-Based Efficiency

Time-Based Efficiency

Obtain a minimum time-based efficiency value of 30 seconds per goal.
Obtain a minimum time-based efficiency value of 30 seconds per goal.

Satisfaction

Satisfaction

User satisfaction and comfort when using the application
User satisfaction and comfort when using the application

Single Ease Questionnaire

Single Ease Questionnaire

Obtain a minimum SEQ Score average of 5 from 7
Obtain a minimum SEQ Score average of 5 from 7

Testing Metrics

Testing Metrics

The next step is to create a task scenario. This scenario comprises three parts: the task, the scenario, and the task expectation. Test respondents use these task scenarios as a guide to conduct usability testing.

Task Scenario for Usability Testing

Task Scenario for Usability Testing

The design solution evaluation was conducted remotely and moderated using the usability testing method through the Maze website. The evaluation involved 5 respondents, a number in line with Nielsen's recommended minimum for achieving an ideal number of participants in usability testing. The following are the calculation results and analysis of the testing's effectiveness, efficiency, and satisfaction aspect.

Effectiveness, Efficiency, and Satisfaction Analysis

Effectiveness, Efficiency, and Satisfaction Analysis

In addition to collecting quantitative testing results, we also conducted direct interviews with respondents regarding specific tasks performed during the usability testing. This method is known as “Thinking Aloud”. With this method, we can easily understand respondents' perceptions while using the prototype. Here are the results.

Result of Respondent's Thinking Aloud

Result of Respondent's Thinking Aloud

Design Improvements

After finding parts that were still less than optimal in the design, my team and I made improvements based on the results of suggestions given by users when carrying out usability testing. Following are the results of the improvements.

Design Improvement Based on User Suggestions

Design Improvement Based on User Suggestions

Conclusion

The issue of food loss and food waste in Indonesia has been a serious concern since 2000, with a total of 48 million tons of food waste per year, particularly from vegetables. Consumer behavior is considered one of the main causes. According to our survey, 70% of respondents dispose of food ingredients due to a lack of knowledge in handling them. Bappenas has formulated 5 strategic policy directions to manage food loss and waste in Indonesia, and one of these policy directions is the change in public behavior towards food management. To help address this issue, we propose a prototype of a recipe application based on Artificial Intelligence. We hope that this application can assist in changing consumer behavior to prevent food wastage. The prototype's usability was tested to ensure user-friendliness for potential users. The results of the prototype testing yielded a completion rate of 100%, a time-based efficiency of 10,4 seconds/goal, and a SEQ score of 6.2 out of 7.

Future Improvement

My team and I are aware that the product still has many shortcomings and requires significant improvement, especially since we only conducted one iteration to develop this product. Therefore, I provide some suggestions for the product:
1.
Conduct in-depth research on various filters and categories of recipes needed by users.
2.
Develop features that are user-friendly for people with disabilities (hearing & vision impaired).
3.
Deepen the utilization of Artificial Intelligence technology, such as smart kitchen features, recipe detection from cooked food, and others.

About Me

01

Projects

02

Contact

03

About Me

01

Projects

02

Contact

03

Let's talk

~ I'm your next game-changer! ~

Contact Me

Made ❤️ by Miftahul ihsan

© 2024

Let's talk

~ I'm your next game-changer! ~

Contact Me

Made ❤️ by Miftahul ihsan

© 2024

Let's talk

~ I'm your next game-changer! ~

Contact Me

Made ❤️ by Miftahul ihsan

© 2024