Case study: Redefining online retail experience for ‘DMart’ (2024)

This case study delves into the design decisions that went into the redesign of DMart ready, an app crafted for providing an online retail experience apart from the existing “offline” stores, for the retail giant in Maharashtra, and many other parts of India- DMart

Hello there! Before I begin, please note…

For the record, I’m not affiliated with Dmart or any of its associated brands. This case study is solely for research and learning. It has been done based on all information that's available to the general public and doesn't include any specifics that are discreet and reveal company details.

I have got you covered. Let me take you along on a journey down my childhood. For all the readers from Maharashtra, let's revisit some memories, shall we?

DMart is an Indian, one-stop supermarket chain that aims to offer customers a wide range of basic home and personal products under one roof at very low prices.

Their core objective is to offer customers good products at wholesale quantities and budget-friendly prices. Thus, all their stores are located around residences, catering majorly to middle-income families and young adults

My childhood’s best memories were amidst these racks, shopping for monthly groceries. And now, as a grown-up (or so the world says), Dmart means a lot more than zooming through racks on the trolley.

The present pandemic really opened the market for online grocery shopping. From standing in billing queues to groceries reaching our doorstep, Dmart’s very own retail app, Dmart Ready, started garnering quite a lot of traction, here in Mumbai.

Being a loyal Dmart customer, ordering groceries from the app repeatedly, has become my full-time job, which helped to look into the pains of the process and made me wonder about the various experiences that I could possibly improve (Psst…D-marketing team, you listening?)

So, off the bat, here are a few reasons why I thought a redesign would work out just fine.

1. They are an established name in the retail industry in Maharashtra, who are expanding their franchise to various other parts of the country.
2. They cater majorly to the common Indian household (Large scale audience with very little technical expertise).
3. Their app has garnered quite an amount of attention in recent times, just like their competitors.
4. After having extensively used their app the past year, I felt a good online experience would definitely make them give their competitors a run for their money, given their good offline service (DMart stores assuring quality products) and loyal customer base.

The following are a few goals that I hope to achieve through this journey-

1. To provide a clean, engaging and less taxing user experience, which makes online shopping seamless.
2. To don multiple hats of a User researcher, UI designer, UX developer and the Users themselves, to be able to step into various shoes and understand the requirements first-hand, thus designing better.
3. Most important of all, learn from this experience, get feedback and keep improving (it's a never-ending process after all :)).

I planned on taking this journey in an orderly fashion, just like how I would stroll through every DMart rack to look at everything.

I started with the first section, an E-commerce user survey, which was conducted on Instagram. I asked a series of basic online retail experience questions to an audience of around 100–150, aged between 20–25, from all over the country.

A few basic conclusions that I could make after these surveys was-

1. The older population preferred stocking up and saving time whereas the younger population ordered whenever required.
2. Amazon has complete monopoly over the E-Commerce market, catering to varied user needs and product varieties, though the grocery market is still divided amongst various applications.
3. Given that DMart is an expanding franchise in many other parts of the country, many still don't have an idea about it, compared to their competitors, which could change provided a great “e-xperience”.
4. Buying groceries online is still a very new thing, that people aren't accustomed to. For that matter, buying anything at a store (offline) is preferred.

Following were a few observations that I could clearly make after a good amount of personal usage, the comments by my user group and conducting a detailed UI breakdown of the main pages in the app (Home page, search page etc.)-

1. Cluttered User Interface-

A lot of images are used which create multiple points of interest, thus breaking the user’s attention and disrupting the flow. Also, there is very less white space provided, making the app look crowded.

2. No Brand identity-

The brand colours or icons aren't used to create a unique look and feel to the app. The website on the other hand uses illustrations and icons to explain and denote functions and categories respectively.

3. Unnecessary scrolling and poor categorisation-

A lot of offers and items are shown repeatedly under poorly categorised groups, which increase screen scrolling. Many users completely skip scrolling all the way to the bottom.

“There's just too many repetitive offers which are confusing! There are items which dont even need to be deemed as “on offer”! Hard pass.”

4. Features not placed well-

A lot of important features like Share-a-cart- Share the cart with others to add missing items to the cart from their account, Top-up order- Shop at a lower minimum order value, two more times a month, after shopping once and Add-on order- Add missing items to a placed order before it is packed for delivery, are placed way later on the page, which is very poorly accessible to users.

“Man, I never really knew about these features before this survey! would have been of great use had I known…”

5. Linked overlapping functions, confusing features-

The Quick Reorder (accessing past ordered items & add them to the current cart if needed) and My orders (past order details like delivery date, time, invoice etc.) are provided as subpages under the menu on the Cart page.

“My orders” also has a Reorder function that adds the entire past order to the current cart (which is NOT what anyone wants :/ )

The “Categories” being the most important functions, is stacked away under the hamburger collapsible menu and at the very end of the main page, which makes it unnoticeable.

With the E-commerce scene blowing up manifolds all over the world, there were a ton of competing apps that, on analysing, gave me a lot of input and inspiration as to how the above problems could be tackled.

Firstly, I did a comparative analysis of various competing applications, taking into consideration the type of audience they cater to and the type of products and services they provided.

Post the survey and comprehensive research (I hope!), I came down to a few basic needs and expectations that the users had from the app-

1. To be able to compare similar items in terms of price
2. To be able to get maximum information in less time (Reduce scrolling)
3. To have access to features more easily in the least number of steps.

I started with understanding the existing information architecture of the app.

After analysing the user needs and a lot of brainstorming, paper prototyping and user testing with my family, I came up with a set of wireframes with the following solutions-

Following is a problem-solution exchange, with all my redesign suggestions explained along with the reasoning behind these decisions.

Problem 1- No clear format in terms of icons, images, colours etc.

Solution 1- Uniformity and hierarchy in type and UI elements, a recurring theme and brand identity.

The various images make the UI extremely crowded with no single point of interest. There is also no brand identity visible throughout the app.

So I was at the internet’s doorstep, for insights!

I studied Google’s Material design library (this curation never fails to amaze me!) and browsed through various apps that I find extremely well designed and are a breeze to use, like Swiggy, Zomato, Yulu, Big basket (big fan!🙋🏽‍♀️)

I aim to use a lot more iconography and brand colours (I have tried to remain as close to the original branding as possible) and minimise the usage of images and provide more white space.

Problem 2- Never ending vertical scrolling with hardly any information or interest created.

Solution 2- Utilising horizontal scrolling to reduce overall vertical scrolling on the home page and covering more offers.

There are various individual offer images apart from the first slide of hero images. A lot of users mentioned they don’t scroll because it takes too long. So, I decided to provide various image sliders, showcasing the major offers, at various junctions on the home screen.

This will keep the user engaged throughout the page and will also cover all the necessary offers like Festive offers, daily/monthly offers, payment offers etc.

Problem3- Poor accessibility of functions, outdated UI style

Solution 3- Adding a bottom navigation bar with the main features.

Bottom navigation bars are more accessible and easy to use, given their strategic placement on the phone screen.

Thus, adding a bottom nav bar containing the major functions like “Home”, “Search” (apart from the main search bar), “Profile”, “Cart” and “saved for later” (lists) would be a good addition and would make the main screen look clean and less cluttered.

Problem 4- Poorly placed functions, confusing user flow.

Solution 4- To move “Product categories” to the top of the home screen, below the hero image slide, for easy access

“Categories” is placed inside the hamburger menu and at the very end of the main page, which makes it repetitive and poorly placed. I plan to place the categories in the form of a horizontal scroll under the hero image slide.

Problem 5- Special features not showcased and available for easy access.

Solution 5- To showcase special features

The Share-a-cart, top-up order and Add-on order are the DMart app’s best features but aren’t promoted enough for users to notice it quickly and utilise it. Thus, moving it to the top of the page, under the categories, will be a good solution.

Problem 6- Search based only on keyword input.

Solution 6- Searching made easy by providing features like sort/ filter and search recommendations

The search bar will now showcase your past searches along with recommended searches based on popular user searches.

The search results page will also contain a sort/ filter option to sort search results based on Product type, pricing range, discount range, categories, ratings etc.

Problem 7- Unable to get delivery information before adding items to the cart.

Solution 7- To provide information regarding available pick up/ delivery slots for orders-

The available slots for order pick up/delivery isn't provided till we finish adding all items to the cart and move to choose between Pick up/delivery.

A lot of users complained that it frustrated them when there were no delivery slots available and they would have spent all their time on adding items to the cart for their order.

I propose to provide the latest probable delivery timings for orders placed at that time on the main page itself. This will help the users decide if they want to spend time now or if they would order later.

Problem 8- No way to compare available options for the same product

Solution 8- To provide a drop-down menu for various varieties of a product to compare prices at the same place.

DMart is well known for its wholesale products like groceries, toiletries etc. Given there are various options in terms of quantity and type for a single item, I propose to provide a drop-down menu to compare the various varieties of a single product at a single point, without scrolling endlessly.

Problem 9- Functions poorly placed, creating a confusing user flow.

Solution 9- To place allied functions together, making them inherently accessible.

The “My Account” page should include details regarding addresses, past orders, saved payment options etc in an easily accessible manner (preferably in as few clicks as possible), which the current design doesn't accommodate.

The redesign will accommodate delivery addresses and past orders and also add new features like reviews and ratings for products, notifications for out-of-stock products or offers etc.

This project definitely was a very challenging one, but also an amazing learning experience. Here are a few important lessons that I got to take away from this experience-

1. Research is key.

How much ever you try to be in the user’s shoes, at the end of the day, being a designer always plays a part in one’s design thinking. So conducting as many user surveys, questionnaires, user testing etc. is highly important. That is where one would actually get a glimpse of the way the app would be used in the real world.

2. Redesign is never complete.

There are new trends created every day, new ways of making the end user’s journey, easy and interesting. In this ever-changing world full of improvements, the design process doesn't stop at one or two designs/redesigns either.

It's an ongoing process, and embracing that reality gives this sense of freedom of expression and creativity and something to look forward to every day.

3. On similar lines, you cant cover each and everything.

It's very well said, ‘How much ever you try, there will always be something left out.”

As an individual, keeping in mind that there needs to be a point where one needs to stop is an important realisation. Trying to cover every aspect and possibility is like jumping into this rabbit hole that you can't get out of (Stay safe and sane folks!)

Liked this article? I hope you did! 😁

Do drop me your feedback at divyav1232@gmail.com or feel free to contact me, if you feel there’s scope for improvement. I would be extremely glad to discuss, learn and hone my skills and knowledge!

Also, if you come across or know of any DMart’s design and backend crew, I would be glad if you could set me up with them! (If you guys are out there and reading this, let's catch up!) I would love to understand the process first hand and discuss the possibilities.

Linkedin | Instagram | Facebook