Kallol
Swiggy Design
Published in
8 min readOct 3, 2023

--

Swiggy Maxx / Mall — UX Case Study

A case study on how India’s largest convenience app created a hyperlocal online shopping destination.

Picture this: It’s a relaxed Sunday afternoon, and you have an impromptu gathering. Suddenly, you realise you’re short on cutlery. The idea of waiting for days on your favourite e-commerce app or rushing to the store doesn’t sound too thrilling. Does it?

“What if we could bring the speed, efficiency & convenience of food and grocery delivery to online shopping, eliminating unnecessary wait times?”

We understand you because we’re just like you — impatient when it comes to getting what we want. With Swiggy Mall ( prev. Maxx ) say farewell to waiting for long deliveries. With us, it’s all about shopping in minutes, not days 🛍️🚀

My role in the team?

Leading designs for multiple 0–1 product at Swiggy wasn’t easy. Anticipation and ambition run high, often amplified by the absence of established benchmarks. We prioritized adaptability over rigidity, an open mind, business savvy, and collaborative spirit driving this unique endeavor.

As the lead designer, I worked closely with a lean team of product, business, and engineering leaders. It was a dynamic, non-linear process that required frequent revisits to the drawing board. So, while it may not follow the typical UX case study blueprint, trust me, it’s a journey worth experiencing.

So, why Swiggy Mall, don’t we have enough players already ?

In today’s digital era, e-commerce has become second nature. Thanks to giants like Amazon and Flipkart, online shopping is safe and seamless. Yet, there’s one thing missing: Hyperlocal delivery. Average waits of 2–5 days don’t quite cut it anymore.

Seeing how instant grocery is the new normal, we thought, why not bring that same speed to e-commerce? We noticed that while big-ticket items like phones and TVs are occasional buys, everyday essentials make up the bulk of people’s shopping. Waiting days for them? No thanks.

Picture this: Your keyboard gives out while working from home or your vacuum cleaner calls it quits mid-cleaning spree or you forget getting a toy for your kid back home.

These scenarios demand swift solutions, and this is precisely where Swiggy Mall steps in. The intent was to never compete with already established players in this space rather filling an unmet need in the ecosystem.

With Swiggy’s robust logistics infrastructure already in place, creating Swiggy Mall was a logical next step. We aimed to redefine convenience in online shopping, mirroring our success in the food and grocery domains.

Challenges & obstacles :

At this stage, while one would usually start with some preliminary user research and competitor analysis, it was imperative that we started with a set of predetermined constraints, since our case was unique. We embraced these challenges, crafting solutions tailored around them. This process not only defined our journey but also showcased the complexities that come with such endeavours. The obstacles we had to tackle along the way were :

Breaking free from the mould : Imagine taking a brand known for food and groceries and turning it into a full-fledged e-commerce platform. That was our challenge with Swiggy Mall.

Illustrations by our rockstar Shivam Thapliyal

On top of that, we had to work with existing tech meant for food and groceries while creating an experience that felt nothing like instant grocery. So, we dove into a world of captivating visuals and innovative merchandising, all within the purview of our constraints.

We tried and discarded countless visual styles and approaches before settling on the final one

Embracing constraints : While working within the boundaries of our existing tech wasn’t a setback, there were certain tradeoffs , tradeoffs done in favour of cost, speed and efficiency. These constraints meant that we had to figure out ways of making it work for an e-commerce platform while honouring the limitations of tech.

Merchandising magic : We needed to craft guidelines that were a breeze to follow. Whether it was brand images or stock photos, we wanted everything to flow seamlessly. In the fast-paced world of e-commerce, where things change by the minute, this efficiency was a necessity to be a game-changer.

The flexible merch style made it easy to work with different images, be it brand provided or stock

Navigating the unknown : With a small team of experts and resources limited, tackling a project of this magnitude demanded agility. We moved forward with careful consideration, knowing that every step counted.

How did we do it ?

We kicked off this process with extensive user research, diving into customer behaviour, demographics, and established online shopping patterns.

The plan was crafting an MVP based on research data, qualitative and both quantitative, anecdotes, hypotheses and industry standards. Given the well-trodden path of e-commerce, valuable insights into online shopping behaviours were readily available, allowing for a streamlined approach.

Our sketches were often messy but super efficient in getting the IA right

We delved into the nitty-gritty of our extensive user research. Ideas were tossed around, each one grounded in the practical insights we had gathered. There were debates, agreements, and moments of sudden clarity. Through this candid exchange, a list of offerings slowly took shape — one that resonated with everyone in the room.

Note : For brevity, I’ll skip early explorations and wireframes, potentially reserving them for a standalone case study. Our focus here is on the consumer storefront design, excluding collection and listing pages, which were based of off the existing tech stack — an unnecessary investment for an MVP.

Key problems identified :

Following extensive rounds of brainstorming, thorough competitor analysis, and a deep dive into substantial consumer data, we distilled our findings into the following key categories:

Abundance : Distinguishing swift grocery platforms from comprehensive e-commerce is crucial. Quick grocery services offer 4–5k products, while e-commerce covers a wider spectrum. Swiggy Mall and IM (Instamart) share some categories, but IM focuses only on high-volume items, while Mall sources from various brands, offering a diverse range. Ensuring “Shop by Categories” is immediately visible and using the spotlight widget to highlight unique e-commerce offerings were unanimous decisions.

Speed : To address speed, we took a multi-pronged approach:

  1. Clear messaging: “Online Shopping Delivered in 1 Hour.”
  2. Engaging onboarding animation.
  3. Concise USP card for quick value proposition.
  4. Consistent messaging for seamless user experience.

Familiarity : Building trust and familiarity was key. Partnering with established, well-known brands early on was crucial for Swiggy Mall. These e-commerce-associated brands brought credibility and a strong following, reinforcing our position as a robust e-commerce player. This partnership was mutually beneficial, enriching our assortment while offering beloved brands.

Fostering trust & security : Leveraging Swiggy’s trusted customer service, we ensured Swiggy Mall offered a similar level of satisfaction. Our reliable refund and return policy, akin to industry giants, fostered trust and security.

Non overwhelming : Ensuring a seamless user experience was our top priority with Swiggy Mall. Despite the fast pace and MVP status, we upheld our commitment to elegant, user-friendly design. This set the baseline. Beginning with an additive approach, we learned and iterated from real-time customer data, optimizing merchandising costs, even without extensive market validation.

Perception of value : In online shopping, deals and discounts are integral. Regardless of convenience or value, if your product is pricier than competitors, it may deter users. This is amplified online, where stunning deals abound. Thus, our products matched competitors in price, and our storefront conveyed value and discounts effectively.

Solving for discovery vs intent : E-commerce is diverse, making persona-based design impractical. Our analysis revealed two key patterns: Discovery and Intent. Users first explore Swiggy Mall broadly, then shift to specific needs. We curated products based on observed behaviors, especially in categories like Baby & Kids, Pets, Toys & Stationery, and Home & Kitchen. Our L1 level pages align with these behaviors.

Design principles that helped shape the problems into solutions :

These design decisions were guided by five principles that is upheld by every designer at Swiggy as they serve our stencils in crafting elegant solutions.

Implementation & metric :

We started cautiously with a single POD and a X KM delivery range. It was like a toddler’s first swim, ensuring we could intervene if needed. Regular consumer immersions helped us fine-tune the storefront. As confidence grew, we expanded our delivery radius, covering a significant part of Bangalore’s top residential areas. While I can’t share specific numbers, trust me, Swiggy Mall is making waves. Get ready for an exciting ride! 🚀

Key learning & takeaways :

Grateful to Srinath Rangamani, VP Design and a never ending source of inspiration, and Prasanna Venkatesh, Director of Design ( New Initiatives ) manager and mentor, for entrusting me with two 0–1’s, first Swiggy Handpicked and then Swiggy Mall. This journey transformed me into a more mature designer and a critical contributor. Equally thankful to Shravani, Product and Business Leader, Swiggy Mall, whose guidance helped navigate business challenges. Extremely grateful for the transformative opportunities. Excited for what’s next! 🚀

I plan to write more about design, fitness & automobiles going forward. If that something right up your alley, do consider following. Do leave your thoughts in comments if you liked reading this. Cheers!

--

--

Kallol
Swiggy Design

Design @ Swiggy | Product Designer | Automotive Enthusiast | Hobbyist Photographer