UI/UX Case Study: Antisibasi Merchant, Wasted Food App for Merchant

M. Fauzan Reza N.
4 min readJun 9, 2021

Designing an app for merchants who want to sell unsold leftovers in restaurants.

Overview

Antisibasi Merchant is an application that can sell unsold food leftovers in restaurants, cake shops, hotels, catering, and other eating places at prices that are always cheaper than normal prices and can distribute them to those who are interested.

Problem Statement

Based on the Economist Intelligence Unit (EIU) research in 2017, Indonesia is the second largest food waste producer globally, which is around 300 kg per individual. This situation is quite sad when compared to the level of hunger in Indonesia which is still in the serious category. In fact, this number can support 28 million or 11% of the population in Indonesia.

The purpose of this application is to be able to help owners of culinary business places such as restaurants, cafes, food stalls, hotels, catering, and so on to sell their food that has not been sold out at the end of the day so that it does not become waste.

User and Audience

Culinary business owner, restaurant, and hotel managers.

Roles and Responsibilities

My role here is as UX Researcher, UX Writer, and UI / UX Designer. My job is to research potential users, write microcopy, design systems and make prototypes of this application.

Scope and Constraints

The project timeline is 3 weeks. I designed the flow of adding menus and new orders received.

1. Understanding Users (Empathize)

The process that I do is the design thinking method. The first step I did was identify the culinary business owners using the interview method. I conducted interviews with 5 participants.

User Persona

I summarize the results of the interview in user personas, here are 1 user personas of the 5 people I interviewed.

User Persona Rosmelina

2. Determine User Needs (Define)

After creating a user persona, the second stage is to determine user needs based on the user persona by determining user goals and creating a user journey map.

User Journey Map

A user journey map is a visualization of the process that the user goes through in achieving his goal. This visualization is used to understand and determine the needs and pain points of the user. The user journey map combines visualization instruments with storytelling. Visualization and storytelling are two important things in journey mapping because this method is an effective mechanism to convey information that is easier to remember, concise, and understood together. The following is a modeled user journey map.

User Journey Map Rosmelina

3. Create A Design Solution (Ideation)

Then in this third stage, I create user flows, information architecture, wireframes, and mock-ups.

User Flow

User flow describes the path taken by users in registering to become a merchant and selling food in the Antisibasi Merchant app. This flow helps to understand and design the system to be experienced. The following is the user flow for the Antisibasi application system.

Registration User Flow :

Registration User Flow

Add a Menu User Flow :

Add a Menu User Flow

Wireframe

A wireframe is a rough draft of the design to be modeled. This design does not yet have details such as colors, icons, or other visual elements. Here are some wireframes that I designed at the start.

Mockup

This stage implements the wireframe into a high fidelity design that is equipped with complete visual elements.

Interface Design of Splash Screen and New Orders Received Flow
Interface Design of Add a Menu Flow

4. Prototype

In the fourth stage, I implemented a high fidelity design into a prototype to show the visuals and interactions of the Antisibasi Merchant application. This prototype is limited to adding menus for sale flow. The prototype can be accessed here.

Disclaimer

In this UI/UX case study, I have not done the fifth stage, that is usability testing to determine the quality of the design I designed, due to time constraints, but I will do it later.

--

--