Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Follow publication

Introducing Z-Shorts: Zomato’s Fresh Approach to Transform Food Discovery

I’ll show you how I designed Z-Shorts, a new short video feature for Zomato that helps users discover unexplored food options.

Disclaimer ️ℹ️

This is a personal project. I was in no way associated with Zomato at the time of working on this project.

About Zomato

Zomato is an online food delivery service that provides a platform for discovering & ordering food for delivery and offering marketing tools and support for restaurants to grow their business.

For users: Zomato helps users easily find restaurants, read reviews, and conveniently order food for delivery, all in one app.

For restaurants: Zomato helps restaurants attract customers, manage orders, and grow their business through its online platform and delivery services.

  • Zomato has approximately 80 million monthly active users, which translates to about 2.67 million users visiting the app daily.
  • Zomato has over 1.4 million restaurants listed globally, and it operates in more than 1,000 cities across India.

Understanding the problem space

First, we need to understand the user base that we are about to target. There are typically three types of users on Zomato:

  • Users who know which dish they want to order
  • Users who know which restaurant they want to order from
  • Users who are unsure about both the dish and the restaurant.

Food discoverability poses a significant challenge for any food delivery app, which cannot be completely overcome.

I will be tackling the problem for a small group of users who are uncertain about what they want to order and from where. It helps those looking to explore new dishes and restaurants.

I have identified a few problems that this set of users face while discovering food —

It started with me noticing this problem:

“I often feel confused and anxious when trying to decide what to order on Zomato.”

Goal: To design a feature that improves the discovery of new dishes and restaurants by creating a social space for users to get suggestions from friends and influencers.

Introducing: Z-Shorts

What is Z-Shorts?

Z-Shorts presents a feed of short food-focused videos. It includes content from food influencers, and users’ friends, as well as trending videos from across the platform.

Why is this useful?

  • For User: Z-Shorts solves the food discovery problem by offering a personalized feed of short videos. Users can explore new food and restaurants nearby through content tailored to their location and order history. The feed includes posts from food influencers and friends, providing trusted recommendations for hidden culinary gems.
  • For Company: It allows Zomato to increase revenue through in-feed ads and paid promotions while improving user retention with engaging food content.

Do you want to check how I researched and chose this solution to solve the problem? Here is the Link → Click Here

Understanding the app

To understand Zomato’s design system and user flows, I studied many app screens. I also looked at popular short video apps like TikTok, Instagram, Snapchat, and YouTube Shorts for inspiration.

Zomato App screenshots
Other app screenshots for inspiration

Ordering Food via Z-Shorts

Unlike other short video apps that focus on keeping users watching endless videos, my goal is to use short videos to help users discover new food.

I aim to attract users with brief, appealing videos and then encourage them to order the featured dishes directly from the videos.

I tried to integrate this flow into the original food ordering flow. So I kept the later screens the same as of original while adding new ones at starting.

1. Tapping on Z-Shorts FAB

Tapping the Z-Shorts button opens the video feed. Users can swipe to see more videos and interact by sharing or bookmarking.

2. Tapping on the Restaurant’s card

The video features a dish from the restaurant, with the name, rating, and delivery time displayed on a card at the bottom of the screen. The user taps on it and is taken to the restaurant detail page.

3. Adding food to the cart and ordering it

A special section is dedicated to the dish/dishes featured in the Z-Shorts video. Users can add that to their cart and then proceed to check the final order detail on the bill and complete the order. This follows Zomato’s standard food ordering flow.

Can check information architecture iterations I went through before settling up with this flow → Click Here

Video of user flow —

Here is how user flow works —

Ordering Food via Z-Shorts: Design Process

In order to design the above screens, I had to design multiple iterations to solve the problem. Each component was iterated multiple times, taking into account :

  • Placing the Z-Shorts CTA button within the Zomato home screen.
  • Iterating based on feedback, focusing on what to show to solve discoverability issues.
  • Deciding whether to use dishes or the restaurant name on the video screen.
  • Making it easier for users to add a dish to the cart from the video.
  • Incorporating Z-Shorts into Zomato’s current design system with minimal changes to the existing interface.

Displaying the dish names, camera icon, and interaction icons like “like” and “comment” is not aligned with the problem I wanted to solve: improving food discoverability through curated short videos of nearby eateries.

After multiple feedback sessions, I decided to discard all these options and provide a card for the restaurant.

Recommendations from Friends and Influencers

Word-of-mouth referrals about good places to eat matter a lot in real life. We feel confident in our judgment about trying the new/unknown restaurant if our friend or influencer had already tried it.

This design aims to reduce anxiety and build trust when trying new restaurants. It is within Z-Shorts user flow.

After tapping on the restaurant card, user will be taken to the restaurant details. Then —

1. Tapping on profile pictures

Tapping the stacked profile pictures of followed friends or influencers opens a bottom sheet with their list.

2. Check who ordered

Users can see how many friends and influencers ordered from a restaurant and what dishes they chose.

3. Order what they ordered

Users can view ordered dishes, ratings given, and prices. They can also add dishes to their cart directly from this list.

Video of the flow —

Here is how user flow works —

Friends and Influencers Recommendations: Design Process

In order to design the above screens, I had to design iterations to solve the problem. Here are the things that I took into account :

  • Showcasing where to display who ordered from this restaurant.
  • Users can view ratings given by friends and add dishes to their cart from this section.

Wait! But how users follow friends and influencers?

The user follows friends and influencers within the flow of the app.

Zomato asks users to sync contacts during the setup or during the flow of the Z-short, so friends are people from your contact list.

Influencers are the famous food influencers around the user's current location and all across the platform.

Cards of friends and food influencers are shown within the Z-Short video flow.

Here is how it looks —

Edge Cases

I tried to cover two edge cases of the flow —

  • What if the dish of the restaurant in the video is far away and cannot be delivered to the user? This edge case might possibly happen when users watch videos in the ‘Trending’ section.
  • What if the restaurant is closed right now?

Here is how it looks —

You have reached the end!

Key takeaways

  • Understanding the popular features in other well-known short video apps to get ideas for my design.
  • Studying Zomato’s design system, how users navigate the app, and understanding their customer base.
  • Taking many screenshots throughout the project helped me learn and understand the design better.
  • I stayed focused on solving the main design problem throughout the process. I made design decisions through multiple iterations. Many times I got sidetracked, creating screens that didn’t really address the core issue.
  • Integrating a feature in already an established app was challenging.

Overall, this project was a major learning experience for me as a designer.

Working on this project was fun because I use Zomato a lot to order food. As a regular user, I spotted the app’s problem with helping people discover new food.

You can find me on Twitter(X) and Linkedin if you want to discuss further. :)

You can also mail me at singh.pushpinder1811@gmail.com

Thanks for your time🙏

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Pushpinder Singh
Pushpinder Singh

Written by Pushpinder Singh

I am a Designer. Creating beautiful and useful products. pushpinder.framer.website

Responses (4)

Write a response