Case Study: Nav Menu
Overview
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 products on offer. The navigation menu presented a perfect opportunity to achieve this. The current menu was overly complex and presented content in a vertical dropdown layout, which meant that content was getting lost and users weren't seeing it.
Company
Scalefast
My Role
UX Designer
Web Developer
Key Skills
Information Architecture
Visual Communication
UX/UI Design
Case Study: Nav Menu
Business Requirements
The new menu needed to redesigned to account for the expanded product portfolio. It also needed to be clearer with less buried content inside dropdown menus. Lastly, the main menu needed a larger and more prominent CTA button, which was the main purpose of the site–to convert users into customers.
The Challenge
The main challenge was to create a totally new layout that clearly presented the expanded product portfolio, without confusing the user. On top of that, I wanted to make sure the new products were perceived as being on the same tier as the legacy ones. Rethinking visual balance and hierarchy were key to the redesign.
My Role
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 worked with the PM and together we communicated with the client.
Approach + Competitive Analysis
I decided the best approach would be to make use of a horizontal menu structure which would present the products in three main buckets. This would create the perception of visual parity between the products and hopefully avoid the perception that the newer products were inferior or secondary to the legacy ones.
I took insight and inspiration from other sites that were using horizontal menus effectively. I found a few layouts that I felt worked well in terms of visual balance and parity and which presented information clearly, without the risk of burying content. I met with stakeholders and presented my findings and performed informal user interviews to get feedback.
Wireframes
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 hi-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.
Live Site Screenshots
