Swiggy Genie— A UX case study

Vysak A S
Swiggy Design
Published in
11 min readJun 15, 2020

--

The thought of writing design blogs has been on my mind for a while, and I am glad to kickstart it finally with a blog on one of the most impactful product design projects at Swiggy!

As any designer (or a product owner) can attest, one feels sheer happiness when he/she comes across instances of users acknowledging how their product adds value to their life in a meaningful way. It’s vital to understand the thought process behind such products; that not just designers but other stakeholders — product owners, business counterparts, engineering folks, marketing, etc. — play a crucial role in the success of any project.

I joined Swiggy at a time when it was widening its offerings to verticals outside of food. Leveraging existing expertise in the hyperlocal delivery ecosystem, Swiggy can scale its platform at a rapid pace. Genie is one such product that we had envisioned; a literal “Genie” to help people with any of their delivery needs.

How did it all start?

Let’s travel a little bit back in time to a decade or two.

  • What did our mothers do when they ran out of salt while cooking?
  • What did we do to get the assignment printouts from our friends during the holidays?
  • How did we use to get that stitched dress picked up from the tailor’s?

Back then, we would send someone who was relatively free at home, to run these errands. Usually, it’s the kids who knew the neighbourhood really well. Each one of us has been that kid, playing the role of “Chottu” sometime in our childhood.

But now, things have changed. With a busy urban lifestyle, people prefer convenience over money. Time has become the most valuable commodity — no one wants to waste their time in traffic to pick up their tailored dresses; no one will send their kid to buy salt for them, and we definitely are not going to our friend’s place just to collect a piece of paper.

To address this exact problem space, Swiggy released its own “Chottu” — Swiggy Go. In simple terms, a Swiggy customer would be able to book a delivery partner to pick something from location A and drop to location B.

Swiggy Go — Buy a pack of salt from M K Supermarket

A customer can book a delivery partner through Swiggy Go for buying salt, collecting your assignment prints, or picking up your clothes from the tailor’s. The live tracking feature helps to put the user’s mind at ease. (By the way, Swiggy pioneered the concept of live tracking in food delivery in India)

This one size fit all solution works like this. Users need to enter the pickup and drop location, select a task from the task list, write a task description if needed, and place the delivery request.

Breaking this down for the 3 use-cases that we have considered.

Use case 1: Buying Salt

Pickup location — M K Supermarket
Drop Location — Home
Task Details — Buy/Send Essentials
Add More Details (Optional)— Please buy Salt

Use case 2: Collect printout from a friends place

Pickup location —Friends House
Drop Location — Home
Task Details — Others
Enter Task Type (Required)— Collect printouts
Add More Details (Optional) — Nil

Use case 3: Pickup tailored clothes

Pickup location — Varnam Tailoring
Drop Location — Home
Task Details — Pickup Clothes
Add More Details (Optional) — Added the photo of a receipt here.

Sounds simple enough?
For us, yes! but now let’s see how these requests are communicated to our delivery partners.

  • How will they process this request?
  • What if the store has 5 brands for salt?
  • What if a payment is required for this printing task?
  • What if the user forgets to upload the receipt for the stitched clothes?

The worst part is that all these pieces of information are a part of an optional text box, which users tend to easily ignore. But these details are crucial to the delivery partner’s ability to fulfil the task correctly

Delivery Partner App Screens: Swiggy Go

So the one size fits all solution that makes placing an order convenient for customers is, in reality, making the life of delivery partners difficult. It doesn’t help that the onus is on customers to put the task details as clearly as possible, in an optional text field — the field was usually left empty in most of the orders that we have received.

That leads us to the next part…

The transformation of Swiggy Go → Swiggy Genie

While the potential of Swiggy Go is immense, its success still hinged on the customer’s efforts to provide details for the task. Some of them were creative about using Swiggy Go, but the majority of customers were new to the concept of booking a runner at a tap of a button. To cater to the second kind of users, it was necessary to seed use-cases in these customers’ mind, to make this product a success.

The challenge was to create a design framework to seed those use-cases, and to collect task-specific information that can be passed to delivery partners.

We started by combing through the major tasks users have run using Swiggy Go, and broadly categorised them in 2 specific categories.

1. Buy items from the stores near them/store they know
Major items bought were groceries, fruits & vegetables, medicines, cigarettes, etc.

2. Pick up or Drop things from once place to another
These tasks were forgetting forgotten keys, sending lunch boxes, clothes and documents etc.

This analysis kick-started the need to optimise task flows for specific use-cases. Moreover, these use cases gave us an impetus to rebrand our offering to a broader theme; the term “Swiggy Go” was not striking enough for a user to associate with these use cases.

Thus, Swiggy Genie is born. The idea is to project Genie as a saviour that unlocks the endless possibilities of “Anything Delivered” in the hyperlocal delivery space (much akin to the “Genie” from the fairy tales).

Now, let’s walk through the thought process and decisions that we took while designing the flows for the two broad themes.

Designing the Genie journey

There are multiple ways to solve a problem, and there’s no perfect solution. As a designer, you are not only solving for end customers but essentially finding a solution that best suits the business goals, tech capabilities, product placement, etc. along with your product design goals.

For us, it was crucial to understand the product-market-fit of Genie in all major cities. Therefore, we launched Genie with a focus on the two major product propositions identified— “Buy Anything” from any store & “Pick up or Drop” anything.

Crafting the “Buy Anything” experience

Let’s consider a user who is shopping at a nearby store. They generally keep a list of items handy or make a mental list before leaving the house. Users prefer to get all items together in a single go, to reduce the effort of stepping out often. The main advantage of physically going for shopping is the ability to pick up all items in your list from multiple stores along the way.

The case is different if you are doing it online since someone else is taking the physical effort of shopping on your behalf. You don’t need to prepare the long weekly list to shop everything together, since it’s now easy to place orders for items at different times whenever necessary, given you are willing to pay the delivery charges. Also, Swiggy does not support shopping from multiple stores in a single order (we have our reasons but won’t get into this).

Due to these obvious reasons, we visualized a workflow where the store selection becomes the primary action. Here is a quick view of the workflow.

“Buy Anything” major workflow

There are 5 major parts to this flow — Store selection, item listing, delivery address, checkout and item confirmation. Let’s visit each of these in detail.

Selecting a Store: We might think that it’s a simple task to perform, but in reality, it depends on how much information is available on the store location. Google Maps gives us fairly reliable search results for well-known stores. But what about that roadside tender coconut seller, or the momo seller at the corner of the street? Yes, we wanted to take the hawkers into account as well.

Therefore, we thought about a manual location selector on the map, where users can explicitly fill in relevant information about the store, for the delivery partner to find the location.

‘Select a Store’ (left). ‘Set location of the store on map’ (right)

Listing Items: Unlike the experience in a catalogued menu, here users need to describe the specifics of a particular item. The more specific the information for each item, the easier it is for the delivery partner to pick the right item. Hence we have provided a placeholder messaging in the input field to show the customers how to frame item details better. Also for the users to easily add items as a list, we auto-populate an additional text field for the next item while the user is busy adding details for the current item.

Adding items (Left) & User added item image for reference (Right)

Select Delivery Address: We retained the “Select delivery address” flow as in Swiggy Go. Users will see their saved address first, or proceed to add a new address.

I have also worked on refining the address flow as a parallel project, and I’ll use this an excuse for another interesting design story ;-)

No Cart Checkout: Yes, you heard it right! There is no separate cart page for “Buy Anything”. Everything happens in a single page, where the user selects a store, adds items and sets his/her delivery location. The checkout shows up as a bottom sheet with delivery fee details. This was a conscious call we took after multiple discussions; the idea was to convey to users that they are not in a regular e-commerce flow. This is because the actual confirmation of the items happens way after the user places an order!

Order Tracking & Item Confirmation: I leveraged the existing Swiggy Go order tracking flows with minor optimisations for “Buy Anything”. This is the place where the delivery executives interact with the customers for item confirmation and verifications.

Bottom Sheet Checkout (Left) & Confirm Item On Tracking (Right)

Crafting the “Pickup or Drop” experience & the MVP decision

On the same lines as “Buy Anything”, we brainstormed a lot about “Pickup or drop”. Our aim was to collect specific details for the major task flows that we have identified, and I have explored multiple iterations for the same.

It’s not easy to design and develop all the experiences together. As a rapidly growing start-up, Swiggy always took an approach of experimenting, failing and learning rapidly. Which is where the importance of an MVP comes into the picture (Yes, here I am talking about the MVP!)

We decided to craft the “Buy anything” experience first, and then optimise the “pickup or drop” task flows as a part of the following release.

It’s sometimes hard to realise that some of your hard work is not going to see the light of the day soon. But trust me, that’s the reality. But you should always question what defines the MVP and get clarity on how “soon” are we planning to release the complete design experience.

Usability Testing — Learnings

One of the crucial parts of any design project is; research and usability testing. This is when we realise how well we know the users? or how well we understand the problem statement? Task completion rate and usability testing help us rectify the proposed solution.
Luckily we had a really passionate team of design researchers in the team, as well as a gorgeous new usability testing lab for research purposes. Our research sessions focused more on the value proposition, communication, usability and perception of the product. All insights from these sessions have been incorporated into the product before launch.

Kudos to Meenakshi Kamat, Cydelle Zuzarte & Omkar Jambovane for all the research help. Also, we were lucky to have a passionate and proactive product counterpart who values design and user empathy in a great manner. Without Raunak Singh this wouldn’t have been so easy.

Building a new framework for Genie

Genie has 2 major product propositions — Buy Anything & Pickup or Drop. The question is how do users relate to the new offering? How will it affect navigation? How do we communicate the difference in each offering?

Remember we mentioned seeding use-cases and shaping user behaviour at the beginning of this blog? Now it’s time to talk a little more about this.

It’s crucial for the users to understand what feature to use and when. We have to find a framework which fits best for this. Moreover, this framework should be scalable to introduce task-specific flows in the future. I have explored a number of design frameworks and iterated a lot on this. Here are some of them.

A glance at the iterations

Behind every iteration, there is a lot of thought process. To arrive at a final design, we evaluated the iterations based on our major design goals — Navigation, Intuition and Scalability.

A winner came out of this exercise, highlighting use-case based navigations seeded for both “Buy Anything” & “Pickup or Drop”.

This is when the magic touch of Snehal Patil helped us beautify the experience with illustrations, onboarding and icons.

The Winner :)

Final rollout & COVID-19

The rollout of Swiggy Genie happened in the middle of the global pandemic. On March 23, the whole country went to a complete lockdown for 21 days, and only essential services were permitted by the government. This was a tough time for most of us, but Swiggy happened to have the ultimate product offering to become a lifeline for most of the users!

In a matter of days, Genie became rapidly available in multiple cities, given the inherent advantages of getting anything people needed from anywhere during these tough times. It received a lot of critical acclaim on social media; below are some snippets of what people have said about Genie.

Snapshots of some of the tweets on Swiggy Genie

As the lockdown eases down and non-essential services are slowly restored, Swiggy still has plans to extend Genie’s utilities to provide safe and secure delivery of all possible need states and to be the go-to service for a guaranteed delivery experience. We have already seen some unique use cases of Genie during the Amphan Cyclone havoc in Kolkata.

Here’s to more customers rubbing the proverbial magic lamp to meet their saviour in crunch times!

Note: I thank Prasanna Venkatesh & Srinath Rangamani for giving me the opportunity and mentorship to create this truly magical experience. Also, kudos to all the product (Notably Mayank Gelani), engineering (Notably Harshwardhan Rathore for his sleepless efforts), business and marketing counterparts; without their hard work and sheer perseverance, Genie would have remained a fairy tale.

1 clap is COOL, 10 clap is GOOD, 50 clap is AMAAAAZING…🤩

--

--

Vysak A S
Swiggy Design

Design @talabat | Ex-Swiggy | Ex-Myntra, Ex-Amazon, Ex-Bosch | Design Mentor | IITian | Not a design superhero | www.vysak.in