UI / UX for Natural Deodorant
UI / UX Designer
As the lead UI/UX designer, I led the visual interaction experience from sketches through interactive prototypes. I worked alongside my team to redesign our clients existing e-commerce website using best practices.
Heuristic research led us to conduct a full visual and content site audit, which showed us various areas that needed improvement.
SITE AUDIT +
Our team conducted an in-depth review of the existing site analytics and an audit of their main competitors.
The audit helped us determine what features needed to be added or replaced to be at parity with their competitors and capture market space.
The previous navigation was confusing because their main navigation was twice-embedded within the mega menu, as seen above.
Implementing a best practice, we removed the mega menu and the users were directed to a newly built category page.
On the category page, we added features such as product filtering to help users find their favorite product while also being introduced to new ones.
The user could now search by product type, size, and scent, with scent being one of the white space categories that could help separate clients from their competitors.
The product type image was a circle with a solid color as seen in the screenshot to the left; The user had to select each color to differentiate the products as there was no indication what the color meant.
We solved this by streamlining the users ability to self select + explore products by adding an ingredient visual and product name.
The new product page on mobile also gave users quick access to all of the products on one product page by using an ingredient visual.
ClICK HEAT MAP
Click heat mapping also showed that users could not only understand the new product selection modules flow but also explore more of the educational content.
SCROLL HEAT MAP
This before and after heat mapping image shows that users were now scrolling a lot more with the new re-design than before. Users were now able to explore the content much faster - which correlates to how much quicker they could reach check-out.
Integrating established design elements from packaging and marketing onto the website to solidify the brand's presence.
Creating a new flow for users to search for educational content + products helped increase checkout reach
Re-working their store navigator to help drive traffic to their retail partner's locations.
Competitive Analysis, Lo + Hi- Def Wireframes, Interactive Prototypes, Design Research, Visual Design, Content Strategy, Prototyping, Front-End Coding
Adobe Creative Suite