How to evolve a food browsing experience: UI/UX case study

03 May, 2020

Exploring a generic food app has become just a commercial move. In other words, you, as a commoner, don’t really go to browse food on the app unless you want to order it. And as the GenZ have most of their essentials on their fingertips than their head, they wouldn’t spend more than 15 minutes looking at pictures of food. And as a GenZ individual, we aim to make even 5 minutes of their app usage super useful.

The idea is “Big returns on less time investments.”

And with this idea, let’s dig inside what wonders it can do.

Project J1

J1 is just another food app on your phone but with a consideration of lot of essentials. It also has a sub-venture called Dibba. Dibba was taken into consideration for those individuals who are staying away from their homes for career choices.

We will further dig into-
1. UI/UX research
2. User flow
3. Sketching
4. Wireframes
5. UI Design

UI/UX Research

The best way to conduct research during the quarantine period is online surveys. The users that were pitched were all between the age of 18–30 years, so there didn’t seem to be a communication gap unlike the elder millennia. The outcome achieve from the research was

  • 85% of our users order online food at least twice in a week.
  • 70% of them don’t spend more than 20 minutes on any food app.
  • Considering the Coronavirus outbreak, we asked the users if they are conscious about hygiene. More than 80% of them prefer to know the hygiene habits of the restaurants before ordering food.
  • We also asked the users if they want us to supply cooked food or raw materials (Eg. Rice, Dal, Vegetables, etc.). More than 60% of them prefer cooked food over raw materials.
  • And finally, over 90% of our users stay away from home because of their career choices.

Implementations on research

  • We have added a hygiene meter on every restaurant’s profile for the users to track their hygiene. The process will be carried by our team of verified food and hygiene experts who will be divided into teams as per the area to check on every restaurant in the area.
  • We have also added the previously mentioned Dibba for the users staying away from their homes. Users can book monthly, quarterly, half-yearly or yearly subscription for their daily meal. Where we will have our own kitchen for which we have delivery service available only at few areas. The users can even pause the subscription when they aren’t available.
  • Users suggested us to add favorite cuisine-wise food sorting, we added that too.

Competitive analysis

  • Considering other food apps we have added some more features besides online food like monthly meal subscription and the hygiene meter (yeah we thought it first.).

Problem Statements

  • We asked people if they are ready to buy a membership loyalty program for outside food and dine outs. Most of them were negative or not sure about the idea of investing long term for luxury food as they already have it, so we couldn’t add that.
  • We were also suggested to add the health and calories feature beside every dish in the app. That would require a lot of man work as the team has to reach out to every restaurant for the ingredients in a particular dish and we couldn’t afford that much effort at the moment. But we’ll see in future developments.
  • Considering user opinions, we have added very subtle colours in the app.

User persona

Here‘s an user persona from our research

User Persona

User Flow

We have tried to keep the user flow of the app as minimal as possible so that they don’t need to look at an architecture to understand the app. Since we had to merge two ventures, the structure of the IA looks a bit webby but when you read it, it’s as flowy as a river.

Basic userflow

One more user flow could be added which was the vendor-side of the app for the restaurants where they could add or remove dishes, update their offers, etc. In short, they could completely manage the app. But it would basically create chaos in the app, so we have decided to make another app for the vendors.


Here are some sketches where we had initially planned the skeleton of the app.



The wireframes of the app show the pictorial representation of the outcome of UX research and screen representation of the paper sketching. The creative work went behind the wireframes has drained our imagination. Here are few snaps of our work. Please find the link of complete set of wireframes here.

UI Design


The designing of the wireframes is done on the basis of our user research and the aesthetic feel of the app.

UI Design 1

The design is mostly adapted from material design. One best thing about material design is the more you look at it, the more it looks real.

UI design 2

But since material design is a relative term, the problem arises when the source of light comes into the picture. If you show material deign without being relative, the more you’ll look at it, the more it will irritate your imagination.

Material Shadowing

Dark mode is the new trend in the market. But if it does not show any use, it feels unnecessary on the screen. The below screens are in dark mode but they are a representation the switch when you want meal for the night. The plan was just to add the night icon but later the idea of making a night screen struck into our heads and here it is.

Dark Screens

Please find the link to complete set of UI Screens here.

Thank you for reaching here. Your patience is well appreciated.?