Site Navigation Optimization
Role: Lead UX Designer and Manager | Company: Hanna Andersson
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 interested in and to create a clean visual hierarchy that felt intuitive to the user.
The UX team met with stakeholders to understand the business needs and what categories they wanted to expose. We relied on user recordings & best practices to inform our decisions and ensure the solution met the user’s needs.
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.
Original Navigation Research Findings
To begin the process, the UX team audited the original site navigation, reviewed user recordings, and analyzed GA data.
1 The dropdown navigation was to large & users felt trapped. 2 Users had difficulty finding categories. 3 Global banner messaging was long and overly complex. 4 Responsive issue with icons & search. 5 Visual tiles had very little engagement. 6 Shop by size had good engagement. Additional business needs store locations, referral program, & market new features like baby registry.
Once the issues & findings were identified we moved into the wireframe stage. We collaboratively worked on the wireframe and then reviewed it with stakeholders before moving onto the visual design phase.
The Final Solution
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.
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.