RESEARCH UI/UX

UX Audit.
Analyzing User Experience Design Across Leading

Grocery Delivery Platforms

Table of content

Project brief Introduction UX Audit &

Observation
Project brief 1.

This comparative analysis examines the

user experience (UX) design of four
major online grocery delivery platforms:
Blinkit, Insanely Good, Tata Neu Grocery,
and Big Basket, aiming to identify and
analyze potential UX violations and the
principles and laws they may be
violating.
Introduction 2.

The Tata New Grocery Page is Big Basket Daily is a Blinkit is a hyperlocal Insanely Good is a platform
an online grocery platform subscription-based service by delivery service that offers by Swiggy that focuses on
launched by Tata Group, one Big Basket, one of India's quick delivery of groceries, delivering high-quality food
of India's largest leading online grocery essentials, and other items from premium
conglomerates. It provides a platforms. It offers daily household items. It operates restaurants and gourmet
wide range of grocery delivery of fresh fruits, in select cities and aims to food outlets. It offers a
products, including fresh vegetables, dairy products, provide customers with a curated selection of dishes
produce, pantry staples, and other perishables, convenient shopping for customers looking for
personal care items, and allowing customers to experience by delivering unique and indulgent dining
more, with a focus on quality conveniently replenish their orders within hours. experiences.
and convenience. kitchen essentials on a
regular basis.
UX Audit 3.
1

1 Touch target should be highlighted

2 They should have highlighted the delivery time to grab
attention

1 1 Match between system and the real world

They should have given the option to see the reviews
2 Too many choices make users confused
Instead of giving deals and offers two times in a home
page they should have given the separate button of
deals and offers

2 2 Highlighted the discount

They should have given the discount in price to grab
attention

3 Familiarity over Novelty 3 Different color for CTA buttons

3 3
They should have given categories option here They should have differentiate between the Enabled button and CTS
button by giving them a different contrast

UX Audit
 Logo
Low contrast Inactive button
Active button with curved edges

Dimensions-150×108px profile Dimensions-311.56×125px

Search Ghost rounded button

button
Inactive button
High Contrast Low Contrast button

Box High Contrast with icon

radius-150×150px
logo Low Contrast options

radius-48×48px
Sign for Veg

High Contrast button

Dimensions-327×105px

Highlighted offer
low contrast Button
Dimensions-228×227px

Spacing width-39.5px

Spacing width-170.8px

Active Button Active Button

Icon
Inactive Button Size-70.21×61px

UX Audit
Font Size - 16px

Font Family- Times New Roman,

ProximaNova,Helvetica,Arial,sans-serif

Miller’s Law

OBSERVATION
Text color-
#000000 #476F00 #CC0000
Content has formatted hierarchy and appropriate line lengths applied, contrast is significant

Jakob’s Law
Website is similar to other grocery sites but just the navigation menu is different
Background color- for different page which creates confusion
#404040 #007B0F #CC0000

Fitt’s Law
Touch target should be large and they should have highlighted the time of delivery

Hick’s Law
They should have given the clarity by giving categories and recommended search
option on Home page over so many offers and abundance of choice
As per WCAG color
contrast checker,
these color fails
contrast ratio

UX Audit
 1 1 Touch target should be large and
bold
Delivery time should be highlighted with bold
letters

2 Visual Hierarchy
1
Background in cards should have been in
same shape to maintain hierarchy
1 Visual Hierarchy
Not aligned visually

2 2 Cognitive load makes users

wait
Loading time makes consumers frustrated

3
3 Enable button should have proper visibilty
Enabled button is not visible nor understandable

UX Audit
 Hamburger

Low Priority

Dimensions-61×45px
Dimensions-62×62px

High Priority with

small letters

Different

background

Visually not

Capital letters
aligned

High Contrast

Options

High Priority text

Medium priority

Ghost button Loading time is

more
High Contrast Button

Spacing width-170.8px
Logo icon

Dimensions-63.5×60px

Active button

UX Audit
Font Size - 16px

Font Family- ProximaNova,Helvetica

,Arial,sans-serif

OBSERVATION
Fitt’s Law
Text color- Touch target is large and they should have highlighted the time of delivery with bold letters
#5E9400 #BBBBBB #FAE6E6

Jakob’s Law
Website is similar to other grocery sites
Background color-
#5E9400 #CC0000 #3B82F6 #606060
Miller’s Law

Content is not formatted hierarchy, it’s not visually aligned

Hick’s Law
They have given ads on the home page which creates technical load in the website
As per WCAG color and make users wait
contrast checker,
these color pass
the contrast ratio

UX Audit
UX Audit 3.
1
1 Touch target is large and bold
1
Delivery time is highlighted with bold letters 1 Familiarity over Novelty
They should have given the filter option

2 Visual Hierarchy
Maintained the visual hierarchy by giving
different color contrast to differentiate
categories

3
3 Highlighted the offers in different color
Highlighted to grab attention 2
2 Visual Hierarchy
Content and buttons should have been
formatted properly

3
3 To avoid people think total price should be
stated
Total price of products should be mentioned to avoid
load in memory

UX Audit
 High Priority
High Priority
USP icon
Low Edge curve radius

Medium priority
Filters
Button dimensions- 1086.65×145px

Webkit Tap-
Transparent
Inactive Button

Spacing
width-24.26px
Active Button
Categories available

Secondary. Ghost. High Priority

Rounded button

Spacing
width-36.24px

High
Priority
Highlighted Image
in transparent
background
High Priority
Spacing button
Delivery
timing width-37.38px
Offers that make

people buy more

Ghost button
Call to action
Max Width of Media Dimensions-203.31px×98.62px
button
Screen-1020px Low Edge curve radius

UX Audit
Font Size - 12px

Font Family- Okra, Helvetica

OBSERVATION
Miller’s Law

Body color- Content has formatted hierarchy and appropriate line lengths applied, contrast is significant
#666666

Jakob’s Law
Website is similar to other grocery sites
Colors used-
#318616 #1F1F1F
Fitt’s Law
Touch target is large and have ample space between them

Hick’s Law
They should have given the clarity by giving total price of the product when user
As per WCAG color selects the item not in the end as it creates cognitive load
contrast checker,
these color pass
the contrast ratio

UX Audit
1 1 1 Familiarity over Novelty
1 Flexibility and efficiency of use They should haven the sort and filter option to
avoid cognitive load
They should have included the profile option
on the home page to make it easier to find
2 addresses, orders and more

2 Recognition rather than recall

They should have given the categories of their
items

3
3 Aesthetic and minimalist design
These videos are not required and this will create a
cognitive load to users

2 Buttons should be in high

contrast
2 They should have given the buttons in high
priority

3
3 Visual Hierarchy
Content and buttons should have been formatted
properly

UX Audit
 Back Button Radius-104px×102.5px

Drop Shadow

Ghost Button with curved edges

Dimensions- 304.65×124.35px

Spacing Width-37.26px
Drop Shadow

Spacing Width-48.62px

High Contrast

Dimensions-166.5×66.5px

Box Size-
510.93×681.24px

Radius-27px

High Priority

Button Size-266.5×100px

Radius-12px
Spacing Width-51.63px

High Contrast with round edges

Dimensions-465×178px

Medium contrast

UX Audit
 Font Size - 10px

Font Family- Arial,Helvetica,sans-serif

OBSERVATION
Miller’s Law

Text color Content has formatted hierarchy and appropriate line lengths applied, contrast is significant
#C2FFF6

Fitt’s Law
Touch target is large and have ample spacing between them
Background color
#551A8B #0000EE #E61C4B Jakob’s Law
Website is not similar to other grocery sites

Hick’s Law
They should have given the clarity by giving navigation menu in home page over
As per WCAG color abundance of videos and ads
contrast checker,
these color pass
the contrast ratio

UX Audit
THANK YOU