I’m a UX/UI Designer with a front-end development background.
I'm a designer with 2 years of front-end development experience. I love transforming complex workflows into easy and productive experience. Currently, I'm working at a data analytics startup, designing for complex data and business needs.
I’m a UX/UI Designer with a front-end development background.
I’m a UX/UI Designer with a front-end development background.
I’m a UX/UI Designer with a front-end development background.
Nuts.com Header Navigation Redesign
Nuts.com is a family owned e-commerce company that specializes in selling high quality snacks, pantry items, and gifts in the U.S. and Canada
MY ROLE - LEAD DESIGNER
Responsible for research (benchmark analysis, usability testing, tree testing, data analysis), end-to-end design, stakeholder alignment
TEAM
Product Manager, Front-end Developers, Customer Success team, E-commerce team, Graphic Design team
TIMELINE
Dec 2022 - Present (Expected to be launched mid-June)
OVERVIEW
As part of the initiative to improve the discovery and search experience for Nuts.com customers, the header navigation redesign is one of the most impactful initiatives that I worked on in 2023.
This redesign involved a revamp of the header, main navigation menu, the search experience for the responsive website across all devices.
The new design was well received by people during user testing, and it's set to be launched in mid-June.
Why Redesign It?
This redesign project stems from an audit of the header navigation and a set of business goals:
Increase the product view rate and conversion rate
The assumption is that by improving the discovery and search experience for both new and existing customers, we can increase the product view rate and therefore conversion rate.
Update the visual treatment to reflect our current branding
The old header design was created long time ago and yet the branding went through a couple of iterations. So the business wants to update the look and feel of the website to reflect the latest branding.
Design for the future
As the business grows, the old header design no longer accommodates all the new features that the business wants, such as having sister brands, additional promotional messages, and new navigation options. Some of the other navigation items are no longer relavant or needed to be placed in a prominent location.
Old Header Nav Design Overview
How Customers Perceive it?
To understand what issues customers experienced with the header navigation, I conducted usability testing where participants were asked to find various products and pages using the header navigation. To form a complete view of the problem space, I also looked at the Google Analytics data, heat maps, e-commerce best practices, and other research, such as cognitive load research and taxonomy research, conducted by external researchers.
Based on the research, the following themes emerged.
The amount of options on the desktop header is overwhelming
Research reveals that, due to the amount of information presented in the header and navigation, people experienced cognitive overload when asked to recall where things located
It takes long time for people to scan through the menu due to visual hierarchy and style inconsistency
Different menu items have different layout and format. This issue affects desktop participants more
Some of the sub-categories are not located at where people expect them to be, because of non-intuitive category name and the way they are grouped
These issues effects mobile participants more
Defining the Direction
Based on the issues that we learned, I looked at different navigation patterns among similar e-commerce website and started wire-framing. Finally, I narrowed down to three directions and discussed the pros and cons with my team and stakeholders.
Final Designs
After considering the feedbacks from stakeholders, product manager, and UX team members as well as the flexibility for future iterations, we landed on one final direction for the header structure and multiple variations of the menu for future A/B testing.
Highlight #1 - Reduce height and clean up the visual hierarchy
Highlight #2 - Improve Menu Scannability
Highlight #3 - Upgrade Search and Search Auto-complete
Design Validation
Once the hi-fidelity design was ready, I built the prototype and tested it with participants via Userlytics. Similar to the discovery test, participants were asked to find different products and pages using the header navigation.
All participants were able to complete the tasks with ease and almost no hiccups
-
“very clear”
-
“I like the simplicity, the organization and convenience”
-
“the website is well organized , easy to navigate.
-
“the welcoming page has a whimsical atmosphere”
-
“everything is clearly and concisely mapped out”
Design Hand-off
After the design got approved, I prepared the design file for developer hand-off, which includes designs for different device breakpoints, detailed specs on spacing, and component variants for different state.
