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
return to the home page by
using the home icon in
bottom navigation bar,
they notice that the screen
changes, but the navigation
bar itself remains static, the
navigation bar totally
useless
User on the product page
and want to return to the
previous age to search for
another product, they
encounter the absence of
a back button, it leads to
frustrated and close the
website
The user intended to buy
500g of salt, but the
weight of the salt couldn’t
be adjustable. But still the
site reminds the user to
choose the weight of the
product.
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
Nick learns about the Nick visit the Fresh List
fresh list website for website. products and adds them
online grocery shopping He browse through
various product
categories
Addidng
Nick completes his
shopping, but the
frustrating experience
Nick select several
Nick continues may impact his
shopping, but the satisfaction and future
to his cart
frustration affects his use of the website
overall expeirence
Nick tries to select the Nick attempt to return to
specific weight for the the previous page. But Resolution Resolution
product but can’t find an there is an absence of
option to do so. 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
Digital wireframes
• The back icon in an app or website acts This Back icon
helps the
like a virtual "go back" button, allowing
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
Screenshot of
"Weight Selection" icon to choose the desired
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.
 Refining
• Mockups
the design • High Fidelity Prototype
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:
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."
What I learned:
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!