Redefining DMart’s Digital Presence
Brief
DMart’s brand values include reliability, efficiency and maximising customer savings. As their designers, it was our job to bring these values to the fore such that they are noticed, appreciated, and loved - by all their end users!
Product Strategy
Innovation Consulting
User Research
Enterprise UX
E-commerce
https://www.dmart.in/
Research and Discovery
This part of the process with DMart involved heavy user research. Of course, we also conducted a heuristic evaluation, but the most actionable part of our research was gathered via the end user’s experience with - as well as their expectations from - DMart!
Ideation and Strategy
This phase of the process called for the construction of 7 varied user ‘archetypes’.
A complete makeover keeping the same core values
The most tangible, delightful part of our process! All past research and ideation now come together to establish a successful, enjoyable user interface. We conducted a complete makeover of DMart interface, all while keeping brand integrity and core values in mind. Some highlights include:
Personalising the homepage experience by user type
The homepage’s interface and user experience was redesigned based on the stage of a particular user’s journey. To do so, we used customised cards for every archetype. A new user will see cards that use real data from the past to explain why DMart is a reliable brand, true to its values. New user cards can also talk about what a pick up point is, how they work, how much money DMart can help one save, and more.
Card types vary based on the actions a user has either already taken or is in anticipation of taking. User archetypes included Hesitant, Anxious, Curious and Returning Customer - among some others.
A big check out clean up
Before NOCTs intervention, users had to use 7 consecutive actions in order to place their orders, make their payments and check out. We shaved off about 4 of those steps, and ensured swift check outs for all - increasing interactions and overall conversions for DMart. Returning customers with their payment details saved, now enjoy a flashing 1-step check out system.
New and efficient product cards with all the information you need
We worked hard and smart to optimise DMart’s product listing page design such that customers need not jump to the product display page in order to make purchases. DMart’s all new product listing page comprises of product cards that carry all the information that is relevant to buyers, ensuring it’s easy and convenient to make purchases!
Retail navigation reinvented for easy discoveries
We reorganised DMart’s product navigation entirely. Previously, their navigation relied on hover ability, which considerably reduced the user’s ability to explore and discover. Presently, DMart customers enjoy a leisurely, structured and organised view of everything that is available to them. This new layout allows customers to scan and locate products they are looking for, as well as make delightful new discoveries.
Nudging customers to make right purchase and reducing drop offs
We initiated similar product recommendations for out of stock items! As per what is in the user’s cart, we also brought in frequently-bought-product recommendations, as well as personalised wish list reminders, based on past data. Furthermore, we provided universal suggestions egging users on to buy products that are often purchased together, like bread with butter, or shampoo with conditioner! To reduce drop offs and stress upon how easy the buying process can be, we designed to prompt users to checkout on the home page itself.
Designed to keep focus on creating value for money
One of DMart’s core values is their deep focus on affordability, and it was our job to design in a way that helps customers realise the value of shopping with DMart.
Every cost label is accompanied with a ‘savings’ amount, perpetually notifying users about how much they are saving, even as they spend.
Across the board, designed cards reveal hefty savings made by DMart users over the years.
Micro interactions to support user information intake
We created several micro-interactions that support the user’s information intake as they navigate through the DMart buying site. To remain in line with DMart’s philosophy of value for money, we used micro-interactions to ensure all users are hyper-aware when charges are added for any reason. Extra delivery charges are highlighted in red, and a floating, animated arrow points at the number every time a user opts for home delivery.
Custom illustrations that bring joy and delight
Creating custom illustrations for DMart was a joyful process for our designers. That is to say - we really had fun with it! Each illustration was made keeping DMart’s target audience in mind, while also reflecting their brand values, overall reliability and a good-natured sense of humour.
We also built illustrated icons to help users find relatability when looking through DMart’s product navigation page. This worked well because all the icons are based on (literally) ‘iconic’ products that are used around most Indian households… Fun-sized, icon-illustrations of Amul butter, Harpic toilet cleaner, Lifebuoy hand soap and Parachute coconut oil sit amongst plenty of other charming drawings of real, recognisable and quintessentially Indian products.
Comprehensive design system
Design system acts as a single source of truth for streamling user experience & interface. Multiple design patterns, rules & UX guidelines were carefully created to maintain consistency across all current & future products of the application.
