Navigation Refresh
136% Conversion Increase
Overview
VMware launched a significant "SaaS" initiative, aiming to revamp the website, and a critical part of that was the Navigation. As the Lead UX of that area, I spearheaded the design and research efforts. The outcome of this project had a significant impact, with a staggering 136% increase in the conversion rate of users who found what they were looking for and a 13% increase in users interacting with the navigation. Moreover, the decrease in the average time spent decreased in navigation by -44% and a -49% decrease in abandonment rate.
Tools:
Figma
FullStory
Adobe Analytics
Usertesting.com
Powerpoint
Miro
Clickup
Timeline:
6 months
Team:
1 Lead UX Designer
7 UX Designers
2 Strategists
6 Stakeholders
10 Developers
1 UX Manager
Before
After
Objective
The navigation redesign had three main business objectives:
Minimizing the number of options within the menu improves usability by reducing the options that users need to scan through, and it becomes a quicker, less confusing, and more efficient process.
Incorporating SaaS Services as we transform our products to SaaS, it was important for us to ensure that VMware.com reflects this change.
Using customer-centric labeling, this approach prioritizes using simple and easy-to-understand terminology, rather than relying on industry jargon.
Along with the business objectives we aligned with stakeholders to improve the navigation experience for our users by ensuring it is user-friendly & intuitive, promoting ease of use and clarity in areas such as:
Enhancing the search experience, tucked away in the utility navigation and bringing it within the main navigation.
Simplifying the Information Architecture of the menu by making it more intuitive, allowing for a seamless and hassle-free experience, fostering user satisfaction and efficiency.
Process & Contributions
Discovery
Project was originally delegated to a third-party partner. The team conducted a Competitive Analysis across 20 SaaS websites (11 competitors and 9 inspirational SaaS sites).
Cross-collaboration with our Analytics team to provide analysis on the main navigation and each sub-menu to provide deeper insights into each menu engagement and deeper analysis for content simplification.
I provided initial analysis of the navigation using Fullstory for Quantitative and Qualitative analysis. This allowed us to gather valuable insights and data to determine key performance indicators (KPIs) to help lead project strategy and ensure our project in the end provided business impact.
Key Findings:
Navigation is overwhelming - average time to conversion is 22 seconds with 78% abandonment
Lacks clear segmentation between Products and Solutions
Large number of links makes it difficult to scan and complete tasks
Real estate used for marketing instead of navigation
SaaS offerings are buried or not present
KPIs
01
The Conversion Rate metric reveals how easily users find what they're after when they open our menu and within our menu. It not only evaluates the effectiveness of the main navigation but also assesses the discoverability of sub-links within each category. By analyzing this metric, we can optimize the user experience and improve overall website usability.
02
The Engagement Rate (CTR) of the top navigation menu links provides insights into the effectiveness of the new site hierarchy. It helps us assess how well users can find the products they need and determine if the user journey is optimized for their needs.
03
The Logo (CTR) of the VMware logo provides valuable insights into user behavior. It helps identify if users are inadvertently going to the wrong area and utilizing it as a "jump back" button. By improving our navigation, a decrease in this metric would indicate that users are successfully navigating to the intended area.
04
The Average Time in Navigation provides valuable insights into the effectiveness of simplifying product offerings and reducing users' navigation time, ultimately enabling them to reach their destination faster.
05
The Abandonment Rate is the inverse way of measuring engagement. It focuses on users who open a menu but do not click any sub-links. By comparing these metrics and analyzing the improvements resulting from the new design, we can gain valuable insights of how this new design has helped users experience.
Ideate
Our third-party partner vendor, provided two rounds of initial design. However, I recognized an opportunity to bring this project in-house for cost and efficiency. Seizing this chance allowed our team to save over $280,000, which we reallocated to other areas.
Given the limited timeframe remaining for the project, I took the lead in the navigation design. To generate more design ideas within a short span, I organized a design workshop using Miro to collaborate. This approach allowed me to conceptualize the final design of the navigation wireframes effectively in a timely manner.
Design
Low Fidelity Designs
Menu Designs
Accessibility
Main Navigation
Mobile
Scope/Constraints
Due to time limitations after ideating process, we unfortunately were unable to conduct testing before the launch of the new designs. As a result, we could only validate and conduct more thorough user testing after the launch.
Handoff & Develop
Design Specification hand-off for the development team to implement navigation, including Localization specification
Accessibility specification for the design as well as Globalization to ensure the design was ready for localization of the other languages/batches.
UATed design after development for quality implementation of design before launching. Thorough checks and validation, guarantee a correct and seamless user experience.
User Research & Share
Conducted Usability testing after the navigation was implemented using UserTesting, a Qualitative method to gain deeper insights into the new navigation design.
Reported to stakeholders final report-out of research and insights and data analysis for improvement areas and next steps.
Research Process - Time: 4 Weeks
Week 1 - Discover & Approach
Week 2 - Execute Research
Week 3 - Analyse & Synthesize
Week 4 - Impact & Share
Insights from research:
Positive impact:
In all the menus, the participant perception of the menu organization is helpful. (Menus : Multi-Cloud Environments, Products, Solutions, Resources)
All the menus, content is understandable & met expectations of participants. (Menus : Multi-Cloud Environments, Products, Solutions, Resources)
In the “Multi-Cloud Environments” menu, all the participants understood the "Multi-Cloud Environments” label.
In the “Products” menu, the “Highlight Area” is understandable.
The “See All Products” button is identifiable.
Performance metrics in FullStory validates navigation user experience.
Need Improvement Areas:
In the “Multi-Cloud Environments” menu, Half of the participant expectations when clicking "Multi-Cloud Environments" aligned to page view rather than a menu flyout.
In the “Products” menu, the SaaS icon is identifiable, but room for improvement.
In the “Resources” menu, the support links lacked clarity.
Results
The Navigation underwent a one-month stabilization period, without any iteration or A/B testing after its design (I used that time to perform the User Research noted above), during which the team conducted metrics 2 & 4 Weeks to assessment its performance. I worked in collaboration with the Analytics team to evaluate the navigation metrics. Furthermore, being the FullStory lead I used it to assess specific metrics that Adobe Analytics was unable to provide for metrics before/after the launch (based on the previous site design), we benchmarked the data 14 days and 30 days after the launch.
Within just 30 days of implementing navigation, we achieved remarkable results with the first batch launch in the US.
-
More users were able to easily find what they needed in the menu, enhancing their overall experience.
-
The increased engagement of the main navigation confirms the effectiveness of the new site hierarchy from the previous design.
-
Demonstrate that users are not utilizing the "back" button to return to the homepage because they have arrived at the appropriate page, indicating that our navigation effectively assists them in reaching the desired stage of their journey.
-
A decrease in the metric shows the simplification of products on the menu is helping the user find where they need to go faster.
-
The decrease in the metric indicates the improvement in the number of customers we were able to assist in their journey compared to the previous design.
On-Going Progress
Given its high priority, the navigation project underwent ongoing evaluation through quarterly KPI reporting. As time passed, the metrics consistently reflected the major improvement from the design solution of the navigation refresh. The magnitude of this cumulative progress cannot be overstated, even with extensive A/B testing with slight dips in the last quarter.
Optimization of Navigation
Following the stabilization period, testing and enhancements were open to be performed on the navigation.
Updates from insights of user research I conducted were implemented
I delegated series of A/B testing initiatives on the navigation. Three tests were executed, all yielding enhanced outcomes.
Insight from Research
Research shows participants were confused by the “area” of the site the were in when on a product page. The highlight confused participant to believing the product was within the “Multi-Cloud Environments”.
Change
To maintain consistency with the rest of the labels, the "Multi-Cloud Environments" label used the same label color as the rest of the labels.
A/B Test 1
Hypothesis, including the term "Search" alongside the search icon will enhance the visibility and clarity of the search function on the website. As a result, it will lead to increased user interactions and improve the overall user experience.
The A/B test results indicate that the new design emerged as the winner:
Search Icon + Text - uplift 19.67%
A/B Test 2
Hypothesis, by the labels of CTA to be more explicit and inviting, we can effectively minimize customer confusion and witness a significant boost in engagement with the header functionality.
The A/B test results indicate that the new design emerged as the winner:
UI Enhancements & Updated Labels - uplift 18.8%
A/B Test 3
Hypothesis, integrating a language selector directly into the navigation will likely result in a higher engagement in language switching and a decrease in offer abandonment. The convenience of this feature can enhance user experience and boost overall satisfaction.
The A/B test results indicate that the new design emerged as the winner:
User experience enhancement to local selection - uplift 21.82%