SocialBites : Collaborative Food Ordering Experience

7 min readNov 13, 2023

An Exploratory Design Project.

This case-study is intended to give a walkthrough on an e-commerce product which I designed as part of self-paced Capstone Project to better understand the fundamentals and principles of UX Design. It is descriptive in nature taking you through my story and experiences of designing my own flagship app. So, fasten your seat-belts!

Landing on to the Problem Statement:

Current Landscape

Online food delivery platforms have their fair share of business and a critical contributor to today’s e-commerce landscape. There are various food delivery apps who have established their foothold in the Indian industry such as Swiggy, Zomato, etc. These apps provide a seamless service to users by availing their orders in the matter of mere minutes. However, this experience serves to the fullest for users only in domestic settings, wherein they order for themselves at home or plan for a quick bite at work for a change from that monotonous cafeteria lunch.

User pain-points

What if there is no one users but there is a group/groups of users in a social setting such as Team diner, or a House party? At such times there is no “just a single snack and having a bite at your own peace” scenario that we discussed earlier. Increase in head counts increases the choices of food, preferences (veg/non-veg/vegan), dietary restrictions and so on. The one who is brave enough to volunteer for this task has to take an effort organizing the food orders from their peers which can be challenging often involving multiple phone calls, messages and misunderstandings. It maybe overwhelming and confusing for them as well as those who are involved in the gathering which may lead to possible miscommunications. This ultimately degrades the dining experience.

Proposed Concept

In order to tackle these challenges, I decided to go back and have a look on existing platforms that we have in the market. After some competitor audit few pointers we observed:

We have an existing infrastructure to order online which most of the users are acquainted to.
We need a way to club these users ordering individually, on common grounds.
This would enable them to communicate among themselves, to share each other’s preferences, recommendations and choices.
As a result, miscommunications would be reduced, no one needs to make an extra effort for volunteering and the entire group can order their favorite foods mutually.

Taking above points into consideration, I decided to design an application on the same lines.

Primary Research

As per Design Thinking principles, empathizing with users is the foremost step in creating a solution. So I reached out to users who frequently order food online for their ways to combine an ordering experience for a group of people. They came up with so many approached which were as simple as:

Appoint a volunteer from the group and peers should send their food choices over WhatsApp.
Call the organizer/volunteer on a conference along with the peers to decide on a menu.
Create a WhatsApp group for the event to mutually discuss the food menu.

Ideating

Taking into account these inputs, I pin-pointed on to the most commonly used interfaces used by the users and combine them together:

Online platforms for Food Delivery
WhatsApp

To start with, inspirations are taken from group chat feature of WhatsApp. Our acquaintances, contacts can text and media messages in a common chat area called a ‘Group’. We all have such groups created on WhatsApp with different agendas such as Schools, Friends, Office, Trips, etc.

Also, we have a streamlined Food Ordering infrastructure in the markets which can avail to our cravings in no time, based on our filters, choices and preferences.

I started to design on similar lines, a platform that would comprise of existing e-commerce features for individual customers combined with a ‘Group Order’ feature that would enable users to place bulk orders in scenarios such as office parties and social gatherings.

Low Fidelity Wireframes:

My design was divided into two sections:

Home Page

This screen was similar to traditional food delivery platforms. It would serve as a landing page for the users once they open the application. Further each user can select their food category and restaurants as per their preferences.

Group Window

This screen is an addition to the product which will be the Unique Selling Point for my Design. Once users browse and finalize their Restaurants they can add those as recommendations to chat groups created for such Occasions.

Further, other peers/associate of the user can view each other’s recommendations. Thus such a window would provide a platform to discuss food menu as a community.

High Fidelity Design:

After finalizing on the wireframes, I started materializing the design in Figma. During this process, I finalized on the color pallete to be used for the design, Brand color, Primary Color, Secondary Color, Text Color, etc. Details can be referred in attached Figma link at the bottom.

Below are the snapshots for materialized views of Home Page, Group Window.

1.Home Page 2.Restaurant Recommendations 3.Dish Recommendations

Groups

This is a concept which is inspired from social media applications such as WhatsApp and Telegram. In order for other user’s associates to be able to view user recommendations, they should be a part of at least one closed community within SocialBites called “Groups” especially created for such social event or a meet. Peers can join these Groups only via invites of Group admin, which we can consider to be the said user in this case.

Prominent Features of the Design

Restaurant Recommendations: As discussed earlier, users can browse the Restaurants delivering in their Area, and post them on the Groups that they are a part of. Other group members are able to view these Restaurants and browse as well. (Refer High Fidelity snapshot above)
Dish Recommendations: Once the Restaurants are added, users can further check menu for recommended Restaurants, and post them separately in Dishes Tab. (Refer High Fidelity snapshot above)
Likes: To tackle the difference in the opinions among the group peers, I have introduced a “Like” button on the Restaurants as well as Dishes. Once a user posts their favorite place to eat/Menu dish, them as well as other group members can like on those posts, thus conveying their interests, likes/dislikes for the item on the forum. Thus, this button will act as voting mechanism for proposed dishes. Later, Group Admins can take a call to finalize the dishes based on the votes received.

Overall, above features are introduced to dissolve differences and confusions among those involved in the occasion, bringing in as transparency as possible for a smooth dining experience.

Prototype:

Assumptions

Kindly consider the following Assumptions for the prototype:

The user operating this prototype have Admin access, thus allowing them to add items to cart. In a real-time scenario non-admin users cannot add items for checkout.
This prototype flow only demonstrates placing an order for a Group/Bulk order scenario. Individual user ordering flow would be same as other competitors platforms.
Categories available for order are 1.Pizza 2.Chinese 3.Rolls 4.North Indian due to limited access to Figma free version.

Future Scope:

Admin rights and access can be added to the design. Features such as ‘Add to Cart’ and Add/Remove items members from the group can only be limited to an Admin user.
Checkout: The design can be further extended to checkout flow in the future. A collective decision can be made by members within a group to to perform checkout in two ways:

Consolidated checkout: In this case, payment would be done by a single member within a group and the bill can be split offline among other members.
Group checkout: In this case, bill split will be done within the app. The total amount will be divided among the group members. The checkout can only be done once group admin receives the individual share from each of the members involved.

Use of variables in Figma:

Figma recently introduced the variables and modes feature, while I was half-way through the project. So I decided to get acquainted with this update and adapt my design with it.
Knowing variables and applying them within my design considerably made it efficient, less redundant and scalable. Using variables I was able to considerably increase design re-usability for various categories and Dishes of Food.
Thus, it makes your design reusable and scalable to a large extent.