DHIVAKAR S

Project overview

The product:
Fresh List is the online Grocery supermarket stores in
Chennai, Delivering a wide range of fresh fruits,
vegetables and groceries at your doorstep in a
convenient and efficient manner.

Project duration:
Completing this case study within Two days is
challenging goal for me.
Project overview

The problem: The goal:

Visibility of system status The user experienced these issues while using
User control and freedom this website. I have planned to resolve these
Flexibility and efficiency of use problems and improve the website‘s usability .
Recognition rather than recall
 User research
Understanding Personas

the user Problem statements

User journey maps
User research: Summary

About :
Grocery delivery apps are becoming more and
more popular.
With the arrival of the Covid-19 pandemic, grocery
delivery apps are maintained the flow of consuming
products an buying grocery by ensuring that the
groceries is delivered in a safe, socially distanced,
and convenient way.
What are the user’s goals?
Quickly and easily shop without spending extra time
on it (Purchase online), get fresh groceries delivered
instantly.
User research: Pain points

1 2 3
Pain point Pain point Pain point

When user attempt to User on the product page The user intended to buy
return to the home page by and want to return to the 500g of salt, but the
using the home icon in previous age to search for weight of the salt couldn’t
bottom navigation bar, another product, they be adjustable. But still the
they notice that the screen encounter the absence of site reminds the user to
changes, but the navigation a back button, it leads to choose the weight of the
bar itself remains static, frustrated and close the product.
the navigation bar totally website
useless
User Persona
Goals Frustration
Problem statement: To get fruits He want to choose the
vegetables, fruits and product’s weight, but
Nick is a Software Engineer
groceries delivered to there is no option
who needs to order groceries my home. available for selecting
on online because his kitchen Make it simple to add the specific weight.
multiple products to
is low on essentials, and he is Nick
the cart
looking to store up fresh Age: 26 Nick was shopping for groceries on the Fresh List website. He

products and snacks Education: B.TECH added various items to his cart, including fruits, vegetables, and

Hometown: Banglore other essentials. However, he couldn't find an option to select

the specific weight he wanted for each product. The website kept
Occupation: Software Engineer
reminding him to choose the weight, which left him feeling
frustrated. In his frustration, he tried to go back to the previous
page, but there was no navigation icon, so he resorted to using
mobile gestures to return, making the experience even more
frustrating for him.
 User journey map

Awareness Research Addidng

Nick completes his
shopping, but the
frustrating
Nick learns about Nick visit the Fresh Nick select several experience may
Nick continues
the fresh list website List website. products and adds impact his
shopping, but the
for online grocery He browse through them to his cart satisfaction and
frustration affects
shopping various product his overall future use of the
categories expeirence website

Nick tries to select Nick attempt to

the specific weight return to the Resolution Resolution
for the product but previous page. But
can’t find an option there is an absence
to do so. of back navigation

Adding to cart Navigation issue

 Paper wireframes
Starting
Digital wireframes
the design Low-fidelity prototype
Paper wireframes

Based on user research, I intend to make

the website easier to use and increase
the product usability. So, I'm going to
draw a basic design on paper to show
what the new page might look like. This
will help me turn my ideas into an actual
design.
Digital wireframes

I've taken a step further by making a digital

version of the paper wireframe. This will help
me design the page exactly the way I want it.
I've created a new bottom navigation bar. It's
more responsive now. When you tap on one By using this
of the icons in the bar, it changes color right navigation bar user

away to show you which page you're on. can easily navigate
and switch between
different section,
which make it
easier for them to
use the website.
Digital wireframes
The back icon in an app or website acts This Back icon
like a virtual "go back" button, allowing helps the
user go back
users to easily return to the previous to the
previous page
page or screen they were on. It simplifies
navigation, ensuring users don't get lost
while using the app or website.
This selection
On a grocery website, the weight is helpful to
pick he exact
selection icon is equally helpful. It lets weight they
need
users choose the precise amount or
weight of the product they want to buy,
adding a personal touch to their
shopping experience and making it more
convenient.
Low-fidelity prototype
In this online grocery shopping user flow, users
begin on the home page, explore product
categories, and select items. They use the
"Weight Selection" icon to choose the desired Screenshot of
prototype with
quantity, adding products to their cart. If they connections or
prototype GIF
wish to return to previous pages, they utilize the
"Back" icon. This process enhances the
shopping experience by allowing easy quantity
selection and convenient navigation, making the
overall experience user-friendly and efficient.
 Mockups
Refining
High-fidelity prototype
the design Accessibility
Mockups
Before usability study After usability study

After the low fidelity prototype now

I have refining the design. So I made
mockup images to show the
changes. One significant change is
the bottom navigation bar. Now,
when users touch an icon in that
navigation bar, it changes color.
This makes it easier for users to
know where they are on the page.
Mockups
Before usability study After usability study

Another change I made is to the

back icon and the weight
selection button. The back
button lets users go back to the
previous page. The weight
selection button helps users
choose the exact weight they
want for a product.
Mockups
High-fidelity
prototype

By making changes to the bottom navigation

bar, the back icon, and the weight selection
icon, we're ensuring that using the website
becomes simpler for users. This will result in a
smoother user experience and a more user-
friendly website, reducing frustration for users
while using the app.
 Takeaways
Going forward Let’s Connect
Takeaways

Impact: What I learned:

The impact of these design improvements has
resulted in a more user-friendly and
frustration-free experience, as noted by one of
our study participants who mentioned, "The
changes made it so much easier to use the app.
It feels more intuitive and less confusing."
During this project, I learned that listening to users and
making changes based on their feedback is crucial for
making a better website. I also found out that it's
important to make sure the website is easy to use for
everyone, no matter their abilities. This experience
taught me that design should always consider the
needs and feelings of the people using the website, and
it's essential to keep making it better with their input.
Let’s connect!

DHIVAKAR S
UI / UX DESIGNER

Linkedin: www.linkedin.com/in/S-Dhivakar

E-Mail: dhivakarsivakumar123@gmail.com
Thank you!