UX Case Study: Helping Street Vendor getting any information order from Customer

The following case study is part of my own personal learning process. I am in no way affiliated to making the Real Apps. I’m doing my own Research Study to Explore the Pain Point of the User (in this case the Street Food Seller) as much as I can.


The objective of this case study is to helping Street Vendor near my Home to solve his problem due to Mistakes if he got order from his Customers (Misinformations) especially when the Number of Customers is increasing.

I have personal goals for this case study and they are:

  • Learn more about User Experience and turn them into Design Case Study
  • Practicing my User Research Include Analyze the Problem, identify User Needs, Pain Points, Ideation, User Flow, Low & High Fidelity Wireframe (From Seller side and the Customer Side), Prototyping, and Validate the Idea.

Analyze The Problem

When someone go to this street vendor to buy food, let’s say Fried Rice, usually they ask for ingredients they want to eat such as adding some cabbage, adding some spiciness level, adding some Fried Onions, and many more. After someone ordered the Food and then the street vendor start to remember what this people was ordered to Him. And after finish Cooking, the food was served to the people who ordered. And the Problem start, the Ingredients of the Food is Lack due to missinformation / the Street Vendor can’t remember the exact information because he just remember it, not by Taking Notes what customer ordered.

This Problem above sometimes does happens everytime. What happen if there are many customers ordered food to this street vendor? There must be missinformation / lack of information because the street vendor only remember what customer order, not by taking notes.

Identify User Needs

I started looking for some User / His Customers of this Street Vendor to look for Pain Points and what they think after the Customers receive a Food from the Street Vendors. I interviewed 5 of the Customer of this street Vendor. After I interviewing From Customer and Seller, i got perspective from each side of the view. and here’s the List of Questions I ask to them:

  • Do you always buy food from this Street Vendor?
  • If yes (Always Buy), then, How did you know about this Street Vendor?
  • How Long do you buy Food from this Street Vendor?
  • How many hours (Estimated Time) that usually you get the food?
  • What Kind of Foods that this Street Vendor sell? Only Fried Rice? Or anything Else?
  • What is the method of the Payment? Is that only Cash? Or accepted Online Payment by OVO Pay / Go Pay? Or also accepted Credit Card?
  • Are there any kinds of Obstacles that you facing when buy a food from this Street Vendor?
  • How about the taste of the Food from this Street Vendor? Is it Delicious?
  • What about the Price? Is it Cheap?

Also I Interview the Street Vendor and I ask him all of these questions:

  • How long have you been selling this Food?
  • When did you sell the food usually? At Night? Or Daylight?
  • How often you sell the food? Everyday?
  • What kind of Food do you usually sell? Only Fried Rice?
  • Do you also use Online Applications such as Grabfood or Go Food to sell your Food?
  • What Payment method do you use to your Customer? Cash Only?
  • Are there any Obstacles that you facing when you sell the Food?

Research Finding

From Customer / Buyer Perspective:

  • They usually Buy the food from this Street Vendor, because they lazy to cooking food
  • People usually know this Street Vendor from Mouth to mouth or they unintentionally pass through that area and buy the food
  • Mostly people know this street food vendor already know around 2–3 years ago since this seller sells the food for the first time at that location.
  • They usually having estimated time around 20 minutes from their first order until they receive the food.
  • This street food vendor sell any kind of foods not only Fried Rice, but also Fried Vermicelli, noodle soup, fried noodle, and Fried Vermicelli.
  • The Method of the Payment is Cash Only.
  • Taste of the food is so delicious according to people usually buy Food from this Street Vendor, that’s why many people come here to try to eat the food especially Fried Rice.
  • When people buy food from this street vendor the ingredients are sometimes not accordance with the ordering due to missinformations / the street vendor is forgot what customer was ordered to him, For examples: When the people buy Fried Rice with cabbage, less spicies, and with sunny side up egg. After that, when the food is received by customer, there is a mistakes such as: there is no cabbage, and less spicies, and so on. The Customer comes to frustating and ask why the Street Vendor don’t take a note what he said. And then there is a time consuming when the Street Vendor start to adding some ingredients again.
  • The Price is affordable

From Seller Perspective:

  • He has been selling food around 2–3 years
  • The Street Vendor always sell food at night because there is high demand for buy food rather than daylight.
  • He sells the Food from Monday to Friday (sometimes Saturday). Usually when Sunday night he decided not selling food because he wants to take a rest.
  • The Food that this Street Vendor selling are: Fried Rice, Fried Noodles, Fried Vermicelli, Soup Noodles, Soup Vermicelli.
  • He just sell Offline only and the method of the Payment is only cash.
  • The Obstacles that this Street Vendor facing is misinformation from the Customer especially when there are so many people order food to him, because he also lazy to take a notes, he just remember what customer order.

Customer Persona

Here’s the Customer Persona of the Seller

Pain Points and Ideation

After gathering information between Customer and the Seller, I can Draw the conclusion of the pain points of the User:

  • “Misinformations / Lack of Information from the Customers and the Buyer after the Customer has ordered the Food. This is happened because The Seller not taking notes from what Customer has saying.”

What if there is a Service that helps the Seller (Especially Lazy Seller) where the Seller can add the Product (in this case the Food) that he sell without too much effort to Typing what the Customer says. And in this service also tells the Buyer / Customer to get a Notification Via Email and SMS for what they ordered, the Ingredients, and the Amount Price (Total Price) that the Buyer Ordered.

User Flow

From the Information that I got above, I have the Idea about the Flow:


After Design the User Flow, the next step is Creeating the Wireframes . But before Creating the Wireframes, I started to Sketch it with Pencil first, then set up information that need to see between the Customer and the Seller.

Here is the Sketch of the Wireframe that I made. When I start to Sketch the Wireframe, the Main Point is to Make it easy for Seller (and also buyer) to use the Product, I did my own Research and searching some inspirations about what colours should i use, what is the best layout for the User if they use the product. And Finally I got the overview of the Design:

After I make the sketch, I continue to Start the Design via Design Tools. In this case I use Figma because it’s really simple, free, there’s a CSS Code if we handover it to the Developer, get feedback from many stakeholders, have Plugins such as Icons, Photos so we are no need to open on another Browser, and many more. I start Design with Low Fidelity Wireframe and lack of Colors.

Low Fidelity Wireframe

These are the Low Fidelity Wireframe on the Seller Side.

And then These are the Low Fidelity Wireframe on the Customer / Buyer Side.

High Fidelity Wireframe

After that, We build the High Fidelity Wireframe from the Seller Side & Buyer Side. The Drawing Illustration I made by myself by Using Figma.

These are the High Fidelity Wireframe from Seller Side:

And these are the High Fidelity Wireframe from Buyer Side:

High Fidelity Wireframe Explanations


When Buyer first time open the apps, there is an Illustration art which draw a Street Vendor who sells the Food. After loading a few moments later, there are many elements in next page in Page 2, here are the explanatons:

  • Search Bar: The Seller can search the Product by typing the food / beverage.
  • See All: without taking so much effort to type the Product, the seller can view all the Food that other seller sell just by click
  • Information of the Product: the seller can see the information Food / Beverages that usually other seller sell and has the top selling product, and the seller can also add the product directly by tap the Product.
  • Menu Bar: to show Main Menu of the applications. It contains Homepage (to show the Selling Product), Product (to show what Food and / or Beverages that this Seller sell), Order (If Buyer want to buy the Food / Beverages from this seller or If there’s an order from the Customer, then the seller can add the Product, determine how many quantity of the Product, and also Add / Deduct the Ingredients of the Product), Account (it contains the Profile of the Seller).

Product Detail

After Seller has added the Product, then the Seller can add or even edit some informations like:

  • Product Name: Showing the Name that Seller want to sell either the Food or Beverages.
  • The Price info: it show the Price per piece of the Product.
  • The Ingredients: it shows that the Ingredients of the Food / Beverages. The seller can also edit and delete the ingredient
  • Plus Button: it use for Seller if they want to add many more the Ingredients of the Product.
  • Next & Cancel CTA: If the seller confirm next, then it direct to another page to successful adding product. If the seller tap the Cancel, then it will be back to previeous page in Homepage.

Registration Page

After The Seller has added the Product but haven’t registered yet, then it will be directed to the Registration Page just to have a database of the Seller, including: Full Name, Phone Number, Email and Password. After the Seller has completed the Sign Up / Registration Process, then it will directed to another page and it has a Illustration that tells the seller that the Registration Process is Done.

Customer Order Page

When Customer want to Order the Food from this Seller, then there’s a Page that the Seller can add some Informations about the Food that the Customer want to Buy. What is this Customer Informations use for? It use for Notifications if the Food was served to the Customer, the system automatically send the Receipt to the Customer that Contains Informations of the Food, Quantity, Payment Method, Ingredients.

On the First step of Customer Order Cart, here are some Informations:

  • Customer Name: When the Customer order the Food, then the Seller can Input the Name of the Customer.
  • Customer Phone Number: after that the Seller can Input the Customer Phone Number
  • Customer Email: the Seller also required to Input the Email of the Customer

On the Second Step of Customer Order Cart, here are some informations:

  • The Product Informations: When Seller Tap the Information of the Product, let says the Seller tapping “Fried Rice”, then it will be directed to another page that Contains informations about Product Name, Price, and Ingredients and also quantity of each Ingredients (The Seller can also edit and delete the Ingredients depends on Customer Demand).
  • The Quantity of the Products: The Seller can add / deduct the quantity of Food based on Customers demand

After Confirm about the Food, Quantity of Food and also Ingredients of the Food, then when the Seller tap the Confirm Status, then it will be directed to another page and shows the Summary of the Product and also include the Price that should Customer pay for this Food. After the Seller Click Confirm, then the Success Page will be apprear with an Icon and the System autonmatically send Notification to the Customer via SMS and Email that contains the detail of the Food and the Amount of Price that the Customer should pay.

Order History Page

After the Notification successfully sent to Customer, then the Seller can see the Order History, it shows the Customer Profile, the Food that the Customer has ordered, and the Time that Customer has Ordered.

Let say in this Case People with name “Bryan” has ordered the Fried Rice, then the Profile is full of Black Color, while the Others are Blurred, that means the Customer “Bryan” has just ordered and the Seller haven’t seen the Detail ordered yet. When the Seller tap the Customer “Bryan” , it will directed to another page and there are some Informations include Customer Name “Bryan”, Phone Number, Email, Total Order Amount, List of Order, and also Ingredients & Quantity of each Ingredients.

After the Seller Tap back, then the Customer “Bryan” will be blurred like Others and it means that the Seller already see the detail order of this Customer.

And Now we’re going to Explanation about High Fidelity Wireframe from the Customer / Buyer Side:

Homepage Notification (Customer Side)

When the Seller already confirm the Order , then the Submission is Successful and the Notifications start to send to the Customer Phone Not Only SMS but also Email.


Here’s the Link of the Prototype Process, Click Here

Validate the Idea

I’m doing a validation at the End of Process just to make sure the Result. I showed my Design from my Laptop to the Street Vendor Seller near my House, and here’s the Feedback:

“This Service helps me a lot when there’s a Customer Order. It helps me just adding Product, Ingredients, and even Edit or Delete it, so when Customer order to me the Ingredients they didn’t want to eat, I just Delete the Ingredients.”

OK Just that.

Reference Portfolio

Thank You for Visiting, I’d love to hear any feedback. You can also contact me via LinkedIn or my email in sutanto.dennyui@gmail.com

A man who exciting to learn about User Experience Design