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 interested 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 they wanted to expose. We relied on user recordings & best practices to inform our decisions and 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.
Key Findings
To begin the process, the UX team audited the original site navigation, reviewed user recordings, and analyzed GA data.
The dropdown navigation was to large & users felt trapped.
Organization & number of categories was difficult to navigate.
Multiple messages in the global banner was long and overly complex.
Responsive issues with icons & search.
Visual tiles had very little engagement.
Shop by size had good engagement.
Additional business needs: store locations, referral program, & market new features like baby registry.
Wireframe
Once the issues 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
Organized Top Navigation Content
To accommodate business needs a number of elements were added to the top navigation. In an effort to keep the the it intuitive for the user we defined zones of similar content:
Primary navigation of divisions.
Secondary navigation for user specific content & settings.
Promotional messaging.
Optional section to promote new features like baby registry.
Global Banner: 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 a mobile device. 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 too 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.