Navigation
Process
Kickoff workshop
Audits and product collab
Initial designs
Usability testing (including users with disabilities)
Product stress testing
Usability testing II
Design iterations
Implementation
Timeline
6 months
Role
Design lead
Outcome
The challenge
What navigation pattern will scale and flex to support 40+ products?
Existing paradigms
Flyout
Previous navigation pattern in Magnetic, opened on both hover and click.
✅ Works well for relatively simple navigations
⚠️️ Unable to support multiple levels of navigation
⚠️ Responsiveness was also a significant issue
Nested
Used by some products though each had their own unique interactions and implementation.
✅ Allows users to see all nav items at a glance
⚠️ Vertical space is a limitation
⚠️ Can become visually overwhelming
- Cisco user with 6 Cisco products
The opportunity
What do we need to support?
Through audits and collaboration with products from across the products we support, I uncovered the following requirements:
Depth
1
4 levels
Complexity
3
20 sub-items per nav item
Content types
Simple nav items
Screen real estate
Minimal, icon-only
Labeled nav items
Quick to navigate and accessible
Hover
Click to open
Responsive
Desktop
Mobile
The Solution
A scalable, cohesive navigation pattern
Supports simple to complex information architectures
Products that are simple can show all nav items in one level, while more complex architectures make use of the drillable, multi-level pattern.
Simple Navigation using groups
complex, multi-level navigation
Accessible and easy to navigate
Some of our products already had an existing interaction to open their nav on hover. However, hovering to trigger an action can pose potential accessibility issues and we wanted to prevent unwanted interactions with the navigation.
We needed a more accessible solution, allowing the nav to open on hover and click.
navigation drawer opens on hover and click
hover delay
Expanded or collapsed for maximum screen estate
Three variants for the navigation menu.
Product teams have the choice of offering:
Expanded and collapsed, with text labels
Expanded and collapsed, icon-only or
Collapsed with text labels
expanded
Collapsed with labels • Collapsed, Icon-only
Responsive
While Magnetic is currently responsive down to tablet sizes, the new navigation is prepared for a fully responsive future.
- Cisco user with multiple Cisco products
Key learnings
Balancing diverse needs with cohesiveness
We strike a balance of offering just the right amount of flexibility while maintaining a cohesive experience, so users don’t have to learn a new navigation paradigm each time they go to a different Cisco product.
Stakeholder involvement and collaboration
The only way to get to a flexible solution that works across so many products was to deeply collaborate with the product teams we support.
This project included working with stakeholders throughout the whole process: workshops, audits of their current navigations, design jam sessions with product designers, and stress testing of the designed component against their IAs.
Testing against the status quo
While we tested the new navigation pattern against various other paradigms, we didn’t test it against the previous “flyout” navigation because
The pattern was not inherently scalable (it fails for complex navigation structures and isn’t responsive) and
There were other potential patterns to test that would work better
However, for storytelling purposes, this turned out to be challenge later on. We got past this obstacle, but it taught me a lesson that even if its clear to you and your team, you need the evidence to show why a given option is better than the status quo.
Special shoutouts —
While I led this work, I couldn’t do it without collaboration and help from many people across the Magnetic ecosystem.
Design collaborator
UX reseachers
Product team designers, collaborators on initial design concepts
Navigation icon designer
Accessibility expert, helping with both design and engineering impementation
Magnetic team lead, helping with storytelling across business units
Agency that facilitated initial workshop to kickstart the project
Implementation
Collaborators, component stress testers, and feedback providers