Keysight.com Header Improvement

---

Role:
UI/UX
​Visual Design

Issue:
When visitors scroll down the page, they lose the capability to have easy access to the
navigation unless they scroll back up to the top of the page. The sticky header will eliminate
the need to scroll up.

The current navigation has many main menu items – making it less memorable and difficult for
visitors to focus on important links. Reducing the main menu items from 8 to 5 will make the
header appear less cluttered and easier for visitors to find what they need.

Upgrade Plan:
Streamlining and relabeling the navigation
Creating collapsible sticky header
 Sticky hamburger menu for smaller screens


Solutions:
There are 2 phases to the solution:
Phase 1: Test sticky navigation
• Run an A/B test on making the main navigation sticky (50 / 50 split).
• Test if a sticky navigation drives higher click thru rates to sub-sections.

Phase 2: Simplify navigation and standardize as sticky
• Update the navigation configuration in AEM, reduce the amount of main navigation and
consolidate them to the appropriate parent navigation.

• Implement code changes for collapsible navigation and restructured sub-navigation.
Update CSS rules to show hamburger menu when the navigation starts to wrap around
(currently we only use the hamburger menu on mobile devices).

​Tools:
Adobe XD
Adobe Experience Manager

---