Main Navigation - Shinola

 Main Navigation

An updated web navigation experience that makes products easier to find while also delivering a modern, ADA Accessible experience.

Key Goal
Redesign and reorganize the existing navigation and create a new, modern, ADA Accessible experience that is easy to use.

Devices
Web - Responsive

Responsibilities
Research, UX Design, UI Design

01. Roles & Responsibilities

I was the lead Product Designer on the project. I analyzed site metics, behavior analytics through hot jar, conducted user testing, and designed the UI to match brand guidelines. I worked closely with our director of e-commerce, digital design director, developers, digital merchandising manager, and our merchandising teams. I created mid and high-fidelity mockups and created a prototype to document animations. After the first version was released I collected product experience insights and reviewed analytics to reassess if the new design was working as intended.

02. The Process

Shinola was looking to update the site to look new and modern while increasing the usability for mobile users, increased and product discoverability.

My initial step for the header redesign involved gathering essential insights from unmoderated user testing sessions which allowed us to gain a deeper understanding of how users navigate the site and locate products effectively. To ensure a data-driven approach, I also collected site analytics, harnessed Hotjar behavior analytics, and conducted a competitive analysis. To ensure I met the deadline, I employed whiteboarding sessions which enabled us to rapidly generate and refine designs. Our first version was primarily aimed at updating the design to be more modern while also aligning with our user-centric approach. I removed excess imagery and optimized the categories based on the initial research. I also guided the developers on what we can do from an experience standpoint to improve the accessibility of our navigation.

In the second update, we shifted our focus towards revamping categories and subcategories. Collaboration with merchandisers played a pivotal role in the second part of this journey. Paired with the insights from user research to transform the way subcategories were presented. This collaboration fostered a deeper understanding of business needs and underscored the importance of certain categories. An integral part of this strategy was the decision to remove gender-specific top-level categories, recognizing that many products were unisex in nature. This was a common point that users brought up during the unmoderated user testing.

We successfully presented categories in a manner aligned with how users preferred to shop, breaking away from original internal product categorization. This transformation ensured a more user-friendly and intuitive navigation experience, culminating in a project that met its objectives and elevated the overall user experience on the website.