top of page

Napa Redesign

title.jpg

P R O B L E M

Napa’s website contains text that is lackluster and has an outdated design language

As a UX/UI Designer, I've noticed texts of all different sizes with no pattern and their categories are all over the place.

Inconsistent experience.jpg

Inconsistent Experience

Inconsistent design breaks the user experience and increases technical debt. Users are more likely to be lost in the app.

Redesign the whole checkout process

After studying the problems, I designed an easy-to-use website that requires all the needs of the buyer, as the site contains top categories, special offers, and How-Tos that empowers the user to choose what he wants and will easily be able to do it on your own.

Increase consistency of texts and relevancy

Build a popular categories system to show consumers the most relevant content based on most purchases and interests.

solution 2.jpg
solution 1.jpg

A delightful consistent consumer experience

To ensure a proper design system is in place to reduce technical debt, and give our consumers a better consistent experience.

U S E R S

I took a deep dive into existing behavioral and purchase data for my research

Before I started designing, I took a deep dive into existing behavioral and purchase data for my research. We also conducted a series of user interviews.

We defined 2 user archetypes when users visit the Napa website.

users 2.jpg

A heavy deal saver that looks for the best price to value purchase.

Frequent visitor to Advanced Auto Parts and O’Reilly Auto Parts.

users 1.jpg

Always wants to learn how to do it yourself and seeks satisfaction when it’s complete.

Always tries to learn various ways on fixing cars without needing help.

P R O C E S S

Created rough sketches + low fidelity wireframes + user flows

The purpose of these designs is to make the top categories and deals at the forefront of the website.

process 1.jpg

Rough sketch

This was one of the sketches I ended up using to model my design. This sketch was the 3rd iteration I created.

Low fidelity wireframe

This wireframe was the first iteration on how I wanted the design to look.

process 2 .jpg

User flow

From the sketch, I created a user flow for participants using the app's core features and tasks, so I know which screens and content will go where, and if I needed to change certain parts.

Nappa User Flow.jpg

F I N A L  D E S I G N S

Looks new. Feels like home.

Here's a walkthrough of the revamped website.

screen 1.jpg
screen 2.jpg
screen 3.jpg
screen 4.jpg
screen 5.jpg
screen 6.jpg
screen 7.jpg
screen 8.jpg
screen 9.jpg
screen 10.jpg

L E S S O N S  L E A R N E D + C O N C L U S I O N S

Adapt to the changing consumer behavior

I needed to stay grounded and focused on the goal, but also account for changes to the product to match the changed behavior of customers during the pandemic.

Take it one phase at a time

I learned to break down complicated designs into small, manageable chunks; this eases development.

What I'd do differently next time

Iterate as much as you can. In the beginning stages, I’ve explored so many different options to try finding the right solution for my student users- I’ve ended up “restarting” my project over 3 times with over 6 iterations of my Figma file to make sure every aspect of the app was designed with intention. Not to mention- I have a better sense to obey WCAG standards next time!

Be insight- not process-driven. Despite weeks of research + development, my first version of this case study was full of unnecessary text at this stage instead of tying everything into the bigger question- “so how does this fit into the bigger picture”? Hence, I cut down the copy by more than 60% and focused on the major points in my project. Hence, going forward I believe focusing more on the insights will improve my storytelling abilities to others.

bottom of page