My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Designing a subscription-based option for Zomato.

UI/UX case study for subscription-based feature integration.

Saptarshi Samaddar's photo
Saptarshi Samaddar
·Mar 19, 2021·

12 min read

Designing a subscription-based option for Zomato.

In this case study, I have described the story and the process behind the creation of the UI.

About

Zomato is one of the largest food aggregators in the world. They are present in 24 countries and 10000+ cities globally, enabling the vision of better food for more people.

Project Type

Product Design

Platform

Mobile (IOS)

Timeline

18 - 20 Hours(yes I took that much because I didn't want to leave anything behind)

Problem Statement

A lot of people depend on food delivery services for their meals. During open-ended research, it was revealed that a lot of regular users feel that while there are a lot of options for them to order from, they don't tend to have time on their hands when they actually want to order food. The product team wants to solve this disconnect by building a feature to schedule orders and extend it to create weekly and monthly subscriptions.

Targeted Audience

  1. People who find it hectic to order every day and have to wait for their order for a limited period and often miss their chance to eat

  2. Students who live in pg and don't have the time to cook or don't know how to cook.

  3. Anyone working in the industry who stays busy and doesn't have the time to prepare for lunch.

  4. People who are new to a city and doesn't have any resource to cook.

User Persona

persona (1).png

So why did I choose Zomato?

I was given the choice between Zomato and Swiggy and follow their design structure so why Zomato?

There were a few reasons behind this choice

  1. They already have a pro version i.e subscription base option and I had that idea in my mind where I could use it.

  2. Their design system(Sushi) is very well explained so it was easier to follow.

  3. They already have a dynamic nav so the implementation of the feature in their architecture is better.

Pain Points

I talked to few people around me(who lived in a PG and are potential users of this app) and asked them how do they manage their lunch? (implies to me as well) The main problem that we faced were

1. Users didn't get the food of their choice.

2. The food they have ordered would often get delayed.

3. The food was quite repetitive.

4. In some cases, the user might want the food to get delivered to a different location but it would not be possible.

Solution

  • Creating an option from where the user can select the date and time of the delivery.

  • Providing a separate tab where the user could see the scheduled order.

  • Reschedule the order as per needs in such a way that it should be in favor of buyers and sellers.

  • Customize the order as per users' needs with just one click.

User Flow

dfd.png

Dive In For First Time User

The UI for the users is kept really simple and the process is designed in such a way that it would take not more than 3 clicks to complete a process

How does this gonna help?

While doing some user research I found that this feature will allow many small-scale businesses to come on this platform and provide their services. How? There are already tons of home delivery services from where people can order but their reach is very less so giving them a platform would help them get a much bigger user base, and in the case of users it would be less hassle to book from this platform as everything is customizable.

One of the main benefits the vendors are gonna get is they won't receive the order notification until 2 hours are remaining for the delivery so they would have enough time to prepare for it and enough time for the delivery so that it could be delivered just on time.

Feature Integration

In the given task I was told to integrate the feature in the current ecosystem and follow their guidelines. As you can see in the video I have changed the position of their Go Out from bottom nav to top tab. And placed the Subscribe option in place of Go Out.

So why did I do it?

The look and feel of Go Out is almost identical to that of the home screen only difference is it shows the list of the hotels where you can dine in so it would be a waste of space to just include it on the bottom nav.

comparison.png

Subscribe Screen

21398646.png

My approach while creating this UI

Personally, I love minimal UI so I started writing down what details a user would need to make a decision so I wrote down about 10 of them and reduced them down to only 4

subscribe.png

A few of the challenges were how do we know how many deliveries we have in a day?

It was quite simple using dots would solve that problem this is something that WhatsApp and Messenger(Uses ticks) follows up

In the future, the color of the dots could also be changed to show different state of the orders

e.g. "light grey could be used to show the order has been received", "Yellow could show there is some issue with our current delivery"

For the names of the cards, the system would automatically generate the name according to the time of delivery such as: if the order is between 9:00 Am to 12:00 Pm it would be given the title of breakfast and if the order is between 12:00 Pm to 4:00 Pm it would be called Lunch.

Frame 46.png

Scenario 1

The user is leaving the city how and needs to pause his subscription.

I understand the situation when the user could leave the city for few days or if someone arrives( e.g. parents) in such cases the user would like to pause his subscription for few days and if the user wants can even resume it, the order logs will remain till the delivery dates do not get over so the user could again resume the same order and does not need to order again

Scenario 2

The user gets bored of the regular meal and wants something else to be delivered

There could be cases where the user would like something else or wants to increase the quantity of the order so it was necessary to keep the order scheduled completely customizable

But while creating the flow I came across some important aspects like

"When do we let the user customize their orders"

In this case, the order could be changed or customize 2 hours prior to the delivery time. That way the vendor could also be notified before processing the order.

Ordercustomize.png

"When & How the user should know if they want to change or customize their order"

The user would get a series of notifications 1 would be in the morning about 8:00 Am and another one would be around 3 hours before the selected delivery time.

Notification.png

Scenario 3

"Isn't it going to be monotonous to get the same thing every day?"

In the case of scheduled orders, the user gets a wide range of customization options whether it's the address or the food or the time everything is customizable if done before 2 hours from the selected delivery time.

On top of that, I have included a feature of randomizing if the user selects that option the system would select something for the user randomly. Or the user can also select the meal option where the user would get a complete meal with randomizing sabzi or daal

randomize.png

Scenario 4

"If someone's close by the selected restaurant and wants to pick up their own order on the way what would they do?"

There is an option where the user could select the delivery address and can also select if they want to pick the order themselves.

delivery.png

Scenario 5

"What would happen if there is some issue with the order e.g. In case it is not available on the scheduled date or there are issues with the delivery(affected by weather or disaster)"

The user would get a scheduled notification so they can customize the order accordingly

issues.png

Takeaways

This project was quite fun to make as I talked to a lot of people who face different situations while ordering their food. As I have also experienced the same thing so it was quite easy to understand these situations and putting users first while solving their problems.

Here is a surprise click here