DMart Ready Website UX Case Study
DMart is a one-stop supermarket chain that aims to offer customers a wide range of basic home and personal products under one roof. Each DMart store stocks home utility products including food, toiletries, beauty products, garments, kitchenware, bed and bath linen, home appliances and more available at competitive prices that our customers appreciate. Their main objective is to offer their customers good products at a great value. This leads them to acquire a large portion of their market share.
Why DMART?
Being one of the top grocery chains, we feel that it seems to be a very poorly built website in terms of UI and UX.
Mission/ Goal of DMart
To be the lowest priced retailer in the area of operation/city/region.
Target customers of DMart
DMart’s target customers are low-income groups who are looking for low-cost goods. Thus by providing excellent quality and branded products at a lower cost, DMart attracts a more extensive customer base than other retailers.
Stakeholders
- Customers or Users
- Dmart staff/ Managers
- Wholesalers
- Suppliers
SWOT Analysis
The company was started by Mr Radhakishan Damani with the objective of offering value-based products to families across the country at affordable rates. The retailer is said to be modelling itself on Big Bazaar and follows similar pricing strategy.
Strengths
- Focus on long term
- Slow scaling up
- People-centric management style
- Discount policy
- Clear price based differentiation
Weakness
- No frills
- Slow growth
- Focus on certain places only
Opportunity
- Personalization of services
- Technology
Threats
- Online retailers
- Startups
Research
To approach a redesign with just our opinions wouldn’t give us the best results. We need to understand what users want and what problems are they facing while using the website. Due to the pandemic situation, we weren’t able to meet the users personally so choose to collect users experience reviews from the internet. We went through as many reviews as we could and marked the ones which were most of the users facing.
It wasn’t that helpful then we decided to make a survey with the help of google forms and we got 33 responses, the data is given below;
Validating the problem
First, we had to figure out the problem and its solution. So we found our potential users like, men & women who used to shop regularly from DMart. We went through some reviews of the website and targetted the major flaws of the website. We also conducted our primary research in the form of a google survey.
Slot Selection
Majority of the reviews talk about not being informed on the slot availability until the customer reaches the checkout page. where a lot of time and effort is wasted without knowing the slot availability.
Out of Stock Products
Out of stock products are greyed out and not shown clearly. There is no option for customers to know when the products get back in stock.
Adding Address
While adding address customers cannot manually add city or state. They have to type the pin code in order to get city or state.
Filter option
There is no option for filtering the products. Customers cannot filter out products as per their convenience.
Some UI centric problems
There is very less breathing space between banners and product cards. The basic layout grids are not being followed. The button sizes vary at every single page of the website.
Navigation Flow
Information Hierarchy
Wireframes
We created wireframes of the individual pages to help visualise the basic structure of the website. Wireframes are useful for deciding on design solutions without spending time on specific elements.
Style Guide
We decided to take green (hex: #245D26), its tint (hex: #56A659) and its shade (hex: 245D26) as they are the colour marks as the primary colour. For the secondary colours in the palette we’ve added the greys which are used everywhere in the background, we have added red(hex: #FA3E3E). Almost all buttons are given a curve and not created sharp edges as the logo has soft and round edges, which also gives a feel of something casual and friendly.
Prototype
Homepage
This is the introductory page of the website, serving as a table of contents for the site.
Features Added
- Redesign the home screen a bit to make it look good.
- This solved the major problem which is slot availability. Option for customers to check the availability of the slot is on the header of the website.
- Deals of the day are shown under the banner which helps the customers to know about the major offers and discounts before the dig into the website for buying something.
- More breathing space is added to ensure every thumbnail should look individual and not as an excel sheet. Round edges are added to the thumbnails and banner to make them look more friendly and appealing.
Product list
A product listing page is a page on a website that presents a list of products based on a category or search query.
Features Added
- A section for the filter is added which was not there in the actual website. Filters really help the customers to shop according to their needs.
- Hovers are added to the product cards which makes the interface more interactive for the customers. The option of infinite scrolling is added.
- Out of stock products were greyed out in the actual website. A feature for notifying me is added so that the customers get notified via mail or text message on their cell phone, whenever the product comes back in stock.
Product Overview Page
A product overview page is a page that presents the description of a specific product. The details displayed often include relevant information customers may want to know before making a purchase.
Features Added
- In the new design, the details made visually clear compared to the old design. Price details are rearranged to maintain visual clarity.
- Added Frequently Bought items section and Recently viewed items section so the user might be interested in buying those. This section is also helpful in a business point of view.
Cart Page
A Cart page is an essential part of the eCommerce website. It is the page where users pile up what they want to buy from the website and simply checkout.
Slot Selection
This is the last step in the checkout process, here people can choose their preferred time slot to pick up the delivery or get the products delivered.
Features Added
- Added feature for confirmation of address and to re-check whether the customer has selected the right address for the slot.
- Hovers are added to the slot cards which makes the interface more interactive for the customers.
Add Address Page
This is page comes under the Account page where customers can add and save addresses or adjust pin locations where orders would be delivered.
Features Added
- Maps are added to this page, which will help to pinpoint the exact location of the customer which will really help to deliver their order without any delay.
- Compared to the old screen where user needs to fill the complete form we actually have made it a bit easier by reducing the unnecessary content part of the form.
Login/ SignUp Page
The signup or login page allows a user to gain access to their account on an application or a website by entering their username and password.
Features Added
- Added quick login methods which include twitter, google, and facebook login for a faster process.
- Unlike the older interface where signup takes customers to a new page disturbing the process of shopping. This new feature takes you where you left.
Comparison of existing and redesigned UI
Compared to the existing website our redesign looks cleaner and has less clutter which makes it easier to navigate for the user to find their desired product and easily skim through the whole website.
Conclusion
This was the first time we carried out a UX case study, the process gave us insights into the website ideation and design process, Overall it was a very great learning experience.
