Upgrading the Procurify website global navigation from a simple dropdown to a full mega menu style, to improve the overall user experience, increase page findability and user journey, and improve SEO efforts.
This project includes several rounds of team feedback, external user testing / feedback and Internal team feedback.
The original website navigation was a simple dropdown navigation with ambiguous one word headers, requiring the user to decipher and search around the website looking for important information.
Product Tab
Customers Tab
Company Tab
Resources Tab
During a web project, I will always kick things off with a discovery which often involves understanding the goals and challenges of a project, competitor analysis, and comparable research (often focused on SasS tech space). From here, I'll look at the examples and pin point areas that might create inspiration, highlight elements that might be important to incorporate in the design, or elements that might be irrelevant or critiqued.
For this particular project, I also did a deep dive of the site map and site structure, as well as research on different web navigation structures to identify which solution might fit best for our requirements.
After completing the discovery phase, I then took all that information and inspiration that I had sourced and worked that into a v1 wireframe, where I was able to focus on the overall structure of the nav, and which pages should be highlighted within the primary and secondary navigation.
These wireframes were then presented to the Marketing and Growth Teams using the InVision platform to collect direct feedback.
I then set out to conduct some unmoderated user testing from my peers, to get a clearer understanding and consensus on where people might expect to find certain pages with the mega menu navigation. The participants that were chosen were from a broad demographic, ensuring that this test was inclusive of many different people - from a range in age, roles, departments and tech experience levels.
The questions that were used in this test were built to be customer-centric and were taken from a previous research document that I had worked on with our SDRs, which outlined key questions that users may ask when landing on our website. Some task related questions were also added to get feedback specifically on the location of some examples.
There were certain areas within our navigation that needed further research to understand and validate feedback and opinions towards components in question and their value, for example:
Displaying the company phone number - questions were raised if this should be within the top navigation, and if we receive enough calls for this to be a critical component of the top nav.
Results: After researching further on the number of calls that we receive, and the overall user experience of the call journey, it was decide to remove this component from a key position, and instead include within the menu dropdown.
Company tab - there was some internal debate to whether the Company tab should be within the top navigation, or whether the top navigation should only be buyer-centric and should only contain tabs that help a buyer.
Results: This required some further testing and data to support this notion. The Company tab was then removed from phase 2 testing, with an additional section at the end centred around questions to provide more information on what a user looks for when researching a SaaS product, and if a company tab is relevant.
Login button - there was also some debate on whether the Login button should be included in the main nav, and instead be moved to the footer. This being for the same reason, to ensure the navigation was only focused on being buyer-centric.
Results: Further research was done to identify whether the Login button is a critical pathway for our customers, and to gain an understanding of how many customers would be expected to change their behaviour if the Login button was to be repositioned within the footer. On average 30% of our overall web traffic were customers using this Login button as the main way to log in to the Procurify Platform.
Once we had a good understanding of the tabs and pages that were going to be used within the new mega menu, the copywriter worked on producing title and sub copy for each section of the menu. Meanwhile the wireframe was refined to implement feedback gathered from the previous session.
I then set out to take my learnings from the earlier feedback sessions and after making adjustments to the wireframes, moved through to soft designs. Taking these soft designs through to both an internal and external moderated user testing sessions. During these v2 user testing sessions, I then pulled up the company tab and asked more questions based on company / employer branding web pages to test how the users felt about this information being accessible only via the footer.
I also conducted an unmoderated test with a few other designers on our team, including specific questions about the company tab.
