Case Study: Nav Menu
The Scalefast team was growing quickly and expanding their product portfolio. They needed a better way to raise visibility and direct users to the new content. The navigation menu presented a perfect opportunity to achieve this.
Case Study: Nav Menu
One of the main requirements for the new menu was not only that it provided a clear path through the site but also that it raised visibility for several new products.
The main challenge of building the new nav menu was how to maintain a logical, clean design while adding so much new content. Another challenge was to ensure that the products being offered were perceived as being just as important to the business as the legacy products. This called for visual balance and a reassessment of the menu's visual hierarchy.
As the UX designer and web developer for the project, my job was to guide the design process, communicate with stakeholders and build the experience.
I took insight and inspiration from sites that were using horizontal menus effectively. I chose to explore a horizontal menu layout for this project because it presented a more neutral visual hierarchy then a vertical menu. If products are displayed horizontally, the user perceives them as being equal in value and therefore equally deserving of their attention. This is a perfect way to present the new products in the menu without lessening their perceived value.
I created two sets of wireframes, a low-fi version (fig. 1) which I used to sketch out the layout and user flow for both desktop and mobile and a high-fi version (fig. 2) which I shared with the client.
Fig. 1 - Low Fidelity Wireframes
Fig. 2 - High Fidelity Wireframes
Implementation + Analytics
The menu was then built and implemented on the site. We used Google analytics to track the impact of the redesigned nav and performed A/B testing to serve a control and test version to users. What we found was that the new products were getting clicked on almost as much as the legacy ones and it showed an upward trend.