This project addressed usability challenges within an oversized flyout navigation menu, where 80% of the space was underutilized. User testing and heatmaps revealed confusion and navigation difficulties on screens smaller than 1280px, as well as minimal engagement with deeper category levels. The solution focused on streamlining the menu to enhance usability, reduce clutter, and improve user navigation, while preserving essential elements.
xxxldigital —
Transforming User Experience: Redesigning Main Navigation for XXXLutz Möemax, and Möebelix.
UX UI design
Business goals
- Improve discovery and navigation by increasing clicks on categories and category cards, boosting traffic to service pages, and promoting personal account usage (logins and new registrations).
- Enhance accessibility to meet WACA certification standards.
Used tools
- Figma
- UserZoom
- Mouseflow
Meet Elisa,
She is a regular customer of our shop. She enjoys visiting our brick-and-mortar stores, sometimes sitting down for a coffee or a schnitzel in our restaurants, and also doing a bit of online window shopping on our website. But she, as many more of our users, has been experiencing some frustration when browsing our site.
When she hovers over the navigation menu, she often finds it confusing and difficult to navigate. The menu is too large on smaller screens (below 1280px), blocking other parts of the page, and in some cases, she even has to scroll down just to see all the options. This disrupts her browsing flow and makes the experience feel cumbersome.
Additionally, the structure of the menu doesn’t help much either. According to heatmaps, the 3rd and 4th levels of categories, which take up to 80% of the screen space, aren’t very useful to her or most users. They rarely get clicked, yet they dominate the screen, making it harder for her to focus on the content she actually wants to see.
We needed to fix this evident issue!
And here is how we did.
Overview
Process & Research
This project took place during a year of corporate reorganisation, which resulted in starting with one team and finishing with another. The flow chart below illustrates the transition between the Inform and Disco teams.
My Product Owner and I collaborated closely, gathering pain points and ideas from stakeholders. We aligned these with issues identified from previous UX tests and our own experiences. After synthesising the insights and defining a strategic direction, I developed designs and prototypes for further testing.
Testing a new menu is challenging. While A/B testing can provide qualitative data, it may not reveal if the navigation is intuitive or if users encounter any flow blockers. To address this, we opted for a phased approach, starting with user tests to gather quantitative insights and refine the design. This would set the stage for a final A/B test to evaluate the impact on key metrics.
Our Customer Experience (CX) team handles user testing and research. In collaboration with them, I designed 3 user tests with prototypes featuring a simplified version of the existing design.
User test #1
Variant 1: no side bar
Variant 2: only 2 levels
Given the flexibility in redesigning the menu, my goal was to explore the best possible option. We started by testing a horizontal menu, similar to the previous design but simplified with fewer levels.
Variant1: Without side bar and one level less
Variant1: Without side bar and one level less
Results
Variant2 : Only 2 levels
Variant2 : Only 2 levels
Variant1: Live-system
User test #2
Variant 1: Live-system
Variant 2: Side Modal
Next, we compared the current live-system design with a completely new approach: a side modal menu. This new design could streamline maintenance as it closely aligns with the mobile version, requiring only minor tweaks.
Variant1: Live-system
Variant2 : Side sheet modal
Results
Variant2 : Side sheet modal
Analysis of all done tests to come up with the final design.
Quantitative data.
To gather additional insights, I analysed the SUS questionnaires completed by testers, identifying areas where the designs received lower scores. I drew conclusions from this analysis, combined with the overall findings from the CX team’s testing. Based on these insights, we continued refining the side modal menu.
Outcomes
- The new navigation was perceived more consistent.
- Some users feels that new designs were self explanatory and users don’t need further help to use it.
- Users felt more confident using the new design.
"I think that I would like to use this navigation menu frequently.”
“I thought the navigation menu was easy to use.”
Conclusion
Solution & Results
Based on the results, we identified a clear winner. However, the side sheet modal design was not far behind and offered significantly more flexibility for shops to include categories and service links. As a result, we decided to further refine this design and conduct another round of user testing before running a final A/B test to validate its overall impact.
This final round went fine, which gave us the green light to continue with the AB test. We ran the test for 4 weeks and the results were quite positive.
*The uplift of these events was statistically significant (with 95% confidence level)
Navigation vs search:
2.6%+
CVR Navigation only
5.1%+
CVR Navigation + search
Account creation and Logins:
3.13%+
Overall uplift Logins
7.55%+
Overall uplift New created accounts
The uplift of these last events was statistically significant (with 99% conf.level)
lessons learned
Some learnings to share.
The final design effectively resolved the main usability issues while simplifying complex code required for the old menu. This improvement enhanced code readability and streamlined the navigation flow.
Better search of products
The redesigned menu boosted discovery and navigation, as seen in increased clicks on categories and category cards.
Easier to find service links and other information
Additionally, it drove more traffic to service pages and promoted the use of personal accounts, maintaining or increasing logins and new registrations. The project also achieved better accessibility, meeting WACA certification standards.