Site Navigation Optimization

Role: Lead UX Designer and Manager | Company: Hanna Andersson

Navigation-header.png

The Brief

The Hanna Andersson site navigation was identified as a point of friction for users. We wanted to make it easier for the customer to find the products they were interest in, and to create a clean visual hierarchy that felt intuitive to the user.

Research

The UX team met with stakeholders to understand the business needs and what categories the merchandising team wanted to expose. We relied on best practices to inform our decisions to ensure the solution met the user’s needs.

Challenges

The overall framework of the navigation combined content that did not intuitively go together. An overwhelming amount of categories were displayed without visual hierarchy, making it difficult for the user to find what they were looking for. And finally, when the user interacted with the navigation it often took over the viewport and made users feel trapped.


organization-nav.png
 

Organizing for the User

To create an intuitive navigation, we grouped like content to create zones. Zone 1 is the primary navigation. Zone 2 contains all of the user links. Zone 3 houses promotional messaging. Zone 4 is an optional section to promote new features like baby registry.

 
 
multiple-promos.gif

Multiple Promotions

Like many e-commerce sites, we often had multiple promotions at a time. When we combined the promotional messages into a single global banner, they seem complicated and would often wrap to 3-4 lines of copy on mobile devices which took up valuable real estate. With the redesign, we solved this issue by adding a carousel that could rotate through 3 messages and limited the copy to a single line.

 
 

Navigation Dropdown framework

To create the organizational framework, we combined like information and grouped categories into 5 columns. Studies show that users get overwhelmed with to many options, so we limited each column to a max of 8 categories. While observing user behavior, we found that many wanted to simply shop everything in their child’s size, so we added that as a section in the dropdown.