Revamping Navigation Menu for ViewSonic
Collaborated with cross-functional stakeholders to enhance website navigation, achieving a 40.3% usability improvement by conducting comprehensive usability tests on Maze, leading to a successful global launch
My Role
UX Researcher & UX Designer
Team
2-people UX Team at Global Product Marketing Group
Company
ViewSonic, a leading global visual solutions provider
Tools
Figma, Maze, PiwikPro, Relume
Why revamping the navigation menu...?
🫤
Problems
For users: A poor navigation experience caused confusion and led to high bounce rates

For Business: Limited visibility of unique selling proposition, as well as misalignment with the latest business positioning as a software-driven ecosystem provider
⛳️
Objectives
For users: Facilitate our B2B audience to easily access  product information to informed purchase decision-making.

For Business: Align with the company’s latest business strategy to enhance lead generation
🏋🏻
Challenge
As an international business, our design must balance regional differences and marketing requirements acrtoss key markets, including the UK, US, India, Taiwan, and others.
Research Insights
Through various user research approaches, we uncovered the main painpoints of the old navigation menu.
🤷🏻‍♀️
Confusing navigation
Users were disoriented due to unclear design, leading to getting trapped in undesired pages
🧐
Limited discoverability
The menu required users to find information on hover, relying on memory and slowing decision-making
🧗🏻
Inflexible pathways
A single navigation path limited diverse B2B users from performing tasks in ways that fit their workflow preferences
The old navigation menu and flow
Data points out the navigation confusion between the Main homepage and EDU homepages
Upon reviewing the data, I found many users return to the EDU homepage unexpectedly. Heatmap analysis and user shadowing revealed they often click the top-left logo expecting to go to the ViewSonic homepage, but are directed to the EDU homepage instead.
User interviews indicate that the website needs to adapt to diverse user scenarios and business requirements.
We conducted user interviews across 10 countries to cover user and business requirements. Despite regional differences in sales approaches, the overall sales flow is similar. B2B users explore the website for potential vendors during awareness and interest stages, then search for specific product information in later phases.
Competitor analysis reveals best practices for mega menu and universal menu on B2B websites.
On several websites that manage sub-brands, we discovered that universal navigation can effectively highlight the entrance to subsites from the main site and ensure that users can easily navigate back to the main site. Moreover, on B2B websites, a mega menu is a common approach to display more menu items at once. It allows users to visually compare all choices simultaneously, reducing the need to rely on short-term memory to take action.
How might we make navigation easier across vertical sites and support users to find information effortlessly?
🛼
Clear and easy to navigate
Indicate users' positions and provide clear entrances and exits
🔎
Show everything at a glance
Allow users to see rather than try to remember
🗂️
Provide multiple entrances
Enable diverse user scenarios and jobs to be done
Design Iterations
Version 1
Products showcasing
✅  Yes...
- Can browse a wide range of product offerings at a glance
❌  But...
- Scalability concern
- ‘Software’ was at the 6th order, which did not align with the business strategy
Design Iterations
Version 2
Human-centered terms
✅  Yes...
- Simple language like size and feature can help users understand betterCan browse a wide range of product offerings at a glance
❌  But...
- After stakeholder discussions, we found that features do not align with B2B user preferences, despite being intuitive. In B2B sales, a series is more effective for communication
Design Iterations
Version 3
Highlight main product line
Given that the 'Interactive Display' is our primary product line, constituting 80% of our educational hardware sales, we experimented a while to improve it by expanding its visually.
Solution
Implementing Universal Navigation and Mega Menu features for our diverse B2B audience, enabling easier product exploration.
🛼
Universal navigation
Indicate users' positions and provide clear entrances and exits
🔎
Mega menu
Allow users to see rather than try to remember from the sequential menus
🗂️
Showcase ‘series’ and ‘View All’
Enable diverse user scenarios and jobs to be done
Validation
To validate the design proposal, we conducted a week-long usability test with 15 global sales, distributors, and resellers which successfully evaluated the design.
- As most of our website’s users use desktop, the usability test focused on the desktop version.
- The test was built with Maze, integrating the Figma prototype made by me.
*SEQ = Single Ease Question, 7 scale
Clear and easy to navigate
Universal navigation improves ease of navigation between the Education subsite and main homepage.
- SEQ increased from 4.2 to 6.2
- Misclick rate decreased from 74% to 20%
Provide multiple path
When searching for specific criteria, such as a 55”, the 'View All' link facilitates navigation.
- SEQ increased from 1.9 to 4.3
- Direct success rate increased from 0% to 60%
- Average duration decreased from 67.8s to 45s
Show everything at a glance
Elevating ecosystem elements, such as software, enhances the ease of finding specific items.
- SEQ increased from 4.8 to 6.2
- 78% of users finding easier to navigate when software is displayed in the top navigation
Improve usability
With clear hover states, users can navigate to the category page more successfully
- SEQ increased from 4.6 to 6.4
- Misclick rate decreased from 34% to 0%
- Direct success rate increased from 36% to 100%
- 90% of users found it easier to navigate with the prominent hover states
Results
Launch successfully globally
- Aligned with 10+ key regions
- Facilitated localization process
- Applied on multiple devices
Impacts
The alignment process was smooth and successful. We began by interviewing stakeholders to understand their needs, which allowed us to consider them thoroughly during the design process.
Additionally, we leveraged usability test results to support our proposal, showcasing realistic user feedback, which proved to be highly persuasive.
The new navigation menu launched on global site in July 2024 and is currently being localized for regional sites, with a planned launch in September 2024.
ViewSonic Middle East Marketing
Assistant Manager
The good thing is the big menu. The description under software, training, and resources, you will already have a basic idea of what ViewSonic is offering and solutions without going to any pages, this is what I imagine right now. It reflect not only partners but also teachers. Even they are new or old, we can help users to spark more interest, and lead then to explore more. 
ViewSonic India Sales
Team Lead
I like you guys not just doing the design for design, but also testing and validating for design.
ViewSonic Middle East Marketing
Marketing Manager
The look is very nice, it's easy to navigate, what I keep in mind is that on our website, around 60-70% are new users. The easier to navigate, the better we can achieve our goal, which is to increase leads.
ViewSonic Taiwan Sales
Manager
This makes it much easier to navigate, the old one will lose the user’s patience. This is wonderful and amazing!
ViewSonic Vietnam Sales
Team Lead
I want to say thank you, After seeing this, I really like the new navigation, everything is very clean. I can find products, software, and services very easily.
ViewSonic Australia Sales
Specialist II
You guys did very well, we really appreciate you align with our business goal. 
Retrospective
💪🏻
Research takes time but works
Involving stakeholders in the early research phase allows us to address most user and market requirements. When we proposed the final design approach, all stakeholders were satisfied with the direction, facilitating a smooth alignment process.
🏃🏻‍♀️️
Faster iteration can avoid moving back
In our design process, we observed several B2B websites using universal navigation and believed it could benefit our site. However, we did not align this direction with stakeholders until our design was well-developed. It took time to persuade them, but ultimately, we successfully implemented this direction. Looking ahead, I aim to prioritize faster iteration and alignment to ensure we maintain alignment with stakeholders more effectively in the future.
🤝🏻
Leveraging Data for Alignment
Data plays a crucial role in facilitating alignment. When aligning with different countries, we showcase results from usability tests to demonstrate that our proposals are well-received by users, thereby strengthening our communication efforts.
Linkedinmedium