Redesigning Swiggy’s new user onboarding — A product design case study.

In this case study, you’ll see how we went about crafting a warm welcome for a new user on Swiggy, into the world of hyperlocal convenience.

In a world that moves faster than ever, where every second counts, the doorway to your digital realm must swing open with effortless grace.

Imagine strolling into a cozy neighbourhood store, where the shopkeeper knows your name, your preferences, and the shortcuts to your cravings. That’s the magic we aimed to capture when we embarked on the journey to redefine the onboarding experience of Swiggy.

Just as a warm, friendly greeting from your local shopkeeper can set the tone for your entire shopping experience, the first moments a user spends with an app can make or break their entire app experience.

In this case study, we delve into how we transformed mere digital handshakes into meaningful delights. Read on as we explore the art of crafting a warm welcome, backed by real-world references and the tangible impact it has on the Swiggy experience — with this project, titled NUX (New User Experience).

We had 3 uber goals:

1. Our entire design language changed in around 2021, so we had to make the onboarding match the new design language, i.e., reskin the UI.
2. While we were at it, we also wanted to solve some major usability problems and revamp the whole flow to suit the user needs better.
3. Swiggy is no longer an app dedicated only to food. We also wanted to bring visibility to the other verticals we have like Instamart, Genie and more.

Now of course, before we start solutioning, it’s highly important to know the problem in hand and what exactly we’re solving for.

🔴 Problems with the old flow

This is how the old new user onboarding flow looked like on Swiggy:

We conducted some research to identify a few problems with the existing flow. Let me elaborate section by section:

✨ The new flow

With the problems and goals laid down in front of us, we started off with some initial brainstorming and whiteboarding. Our primary task was to freeze the flow. Before delving into designs, we wanted to be very sure of what sequential actions we want the users to take.

We went through dozens of apps to understand the different flows being followed. For this benchmarking exercise, we made a list of questions we wanted to address with every reference we were considering:

1. What is the sequence of steps a user has to follow before they can start using the app?
2. Is the flow optimised for speed — i.e., the steps are very simple, or for maximum context setting — with enough information given at each step, or a mix of both?
3. Details in each screen like — What are the anchors being used in the intro section? What modes of authentication are being used? Is all information solicited at once or it’s sequential? etc.

Here’s a snippet of the same:

We also made a list of permutations & combinations of the different steps user will have to take to complete the sign up process and evaluated them against each other.

With a winning variant emerging out of this exercise, we had a foundation ready to build on!

🎨 Some early iterations

Let me take you through a few early explorations & decisions before showing you the final flow.

Now that you have seen the iterations, let me show you what the revamped flow looks like, section by section, explaining the design decisions we took at each stage.

✨ The introduction screens

Like I was mentioning earlier, the intro screens are the gateway into Swiggy for a new user, so we had to decide on what exactly we want to communicate here, so that the user is excited enough to explore the app.

We went back to the research outcomes about what thoughts and general perception users had about Swiggy, and did some whiteboarding:

Now there are multiple approaches we could take for the comms that we wanted to be presented in the intro screens:

1. Value proposition — talk about affordability, speed of delivery, convenience, etc.
2. Familiarity — promote visibility & availability of well known brands and restaurants on Swiggy.
3. Variety & collection — communicate a wide range of choice available on the app.
4. One stop shop — bring awareness about the different verticals available on Swiggy and how one app can do many different things, thereby offering hyperlocal convenience.

We evaluated these approaches against each other and what we felt was the first 3 options are very targeted and can vary based on user segment & needs. Plus, we are indeed communicating about all this via our marketing efforts before users install the app.

Moreover, in 2021, one of Swiggy’s main goals was to establish itself as a hyperlocal convenience app as opposed to only a food delivery app, which it was earlier known for. Option 4 clearly aligned with this larger goal of the organisation and hence we decided to go ahead with it!

Now let’s look at the designs:

📱 The sign up screens

This is the part of the flow where the user has to take a lot of effort and give us useful inputs. Which is why, we were very careful about not making the screens intimidating or monotonous.

🎁 The gift intrigue screen

Before I tell you what this screen is all about, I want to bring your attention to 2 things here:

1. The progress bar
2. The return on investment

📈 The progress bar

In most cases, when dealing with a sequence of actions, it’s very important to give users a sense of gratification about how much of the task they have completed so far and what more remains.

Which is why, we felt the need to introduce a progress bar in the NUX flow, to keep the user in loop.

Even here, we tried out a bunch of different iterations:

I somehow wanted to make this progress bar more fun and delightful, rather than using the mundane constructs. I kept exploring, and that’s what lead to this crowd favourite iteration:

But, as delightful and loveable as it was, when we tried some hallway testing with it, users had some lingering questions that needed to be addressed. Some of the questions that came up are:

1. “Will I get a pizza after completing these steps?”
2. “Are these the steps to follow to get free food?”

…and more. Although they were intriguing and generated curiosity, we didn’t want to set the wrong expectations.

Which is why, we finally decided to go with this one, which is more contextual:

Now, you might be wondering why there’s a gift box all of a sudden. Well, I’ll consider that a perfect segue into what I want to bring your attention to next:

🎁 The return on investment

Let’s take a step back and zoom out. There are a lot of actions the user needs to take right from the beginning — enter a phone number, verify it, then enter name and email, and then go on to give permissions — and all these contribute to the perception of effort in terms of the overall flow.

The question that was bugging us is:

Is the user motivated enough to complete all these tasks without an attractive return on the effort?

Umm, not really. And even if they were, we did feel that surfacing a ‘hook’ will definitely be an added delight!

So this was the plan:

But why not hook them at the very beginning? Why wait till the phone number verification is done?

Well, that’s because in Swiggy’s framework, the phone number is our primary and only source of authentication, and hence it acts as the key differentiator between returning users and new users. As the ‘hook’ will only be limited to the new users, we didn’t want to confuse returning users by promising something they are not eligible for, and then disappointing them.

What are we going to use as a gift to hook the user while making it attractive enough, but also not compromising on business needs?

The answer to this question was right in front of us — we already offer a special coupon to our new users — 50% off & free delivery on their first order with WELCOME50. We just had to bring top of funnel awareness about it so that it works as a motivator, while also not promising something impractical, that might not suit business needs. It was a win-win!

Now with all this in place, we tried a bunch of visual iterations for the gift intrigue screen:

As you can see above, we explored 2 different directions:

1. The first one, where we talk about the offer upfront and use that knowledge as a motivator,
2. The second, where we talk about a gift but don’t mention the details, and bank on curiosity as the motivator.

We decided to experiment with these variants to see what performs better.

Here’s the final version:

👤 Getting the personal details

📍The location flow

We initially started with this iteration:

But, like I had mentioned earlier,

We don’t need the exact pin location of the user at this stage of the journey. An area or locality will do, as that’s all is needed for us to show the available restaurants & services nearby.

In that case, the iteration shown above is counter-intuitive, showing a house with a pin on top of it. And so, we re-structured it to look something like this:

🎁 The gift reveal flow

This is the final pass of the flow and we tried to make it as delightful as possible! 🥰

Check out the end to end flow in action here

Aaaaandd with that, we have covered the entire flow of New User Experience (NUX) in Swiggy! 🥳

But, hold on! There’s a little bit more to discuss before we call it a close!

🔢 Let’s talk numbers!

Ummmm, I wish I could, but you know the fuss about data, right? I’m not allowed to disclose the actual numbers 🥹.

But, this new flow indeed performed really well! 🤩

We launched this flow as an experiment to a small set of our users between July & September 2022, and then in October 2022, we scaled it to 100% of our users.

And as of December 2022, these are the results we observed:

📉 Some negative signals & improvements

1. Because of the forced sign up in onboarding, we saw a relative drop in user movement from onboarding to the Swiggy home page.

2. We had a hunch that not all Indian users might be familiar with email ID/ not have their own/ don’t have it at their fingertips. So we experimented with making the email ID field optional.

How did that go?

1. We saw an uptick in sign-up success rate, leading to higher incremental signups per month,
2. And an uptick in new user acquisition (users acquired/users initiated signup post mobile verification) leading to higher incremental acquisitions per month.

Thank you for sticking around till the end of this case study, it means a lot to me! This was the first ever real world design project I was exposed to and it was indeed packed with so many learnings — from learning how to think both from the user and the business angle, to handling & convincing multiple stakeholders, to iterating & honing my craft, to analysing & improving, to incorporating feedback & creating something beautiful, to taking your stand and charting a vision — it’s been one roller coaster ride! I thoroughly enjoyed it.

Today when I look back at it, I’m filled with gratitude and pride that I was entrusted with such a crucial part of the app, very early on in my career. And I hope I was able to do justice for the time you’ve spent reading this, by sharing the knowledge that came along with this project.

For any feedback/ further discussions do drop a comment, or reach out to me directly on LinkedIn, Twitter, or akshatachandra2@gmail.com. See you around! 🥰