.png)
Components are the building blocks of UPS websites and are constructed from smaller elements known as atoms. Using the Atomic Design system, this small-to-large approach makes it possible to replicate, create, and scale a wide range of use cases across multiple applications.
One of my first tasks at UPS was documenting and redesigning many of these components. As the needs of the company evolved, the components required greater versatility and more rigorous testing. Every detail—from color, typography, and spacing down to the pixel level—had to be carefully tested, validated, and documented to ensure consistency, accessibility, and scalability.
Supporting/Secondary Navigation - Component
Supporting Navigation Design
Definition
Supporting Navigation is a component that helps users move quickly through a page journey. It functions as a secondary navigation panel that is sticky on the left side of the screen and follows users as they progress through the experience.
This persistent navigation provides clear orientation and quick access to different sections, reducing friction and helping users move efficiently through complex content.
Design Challenge
A secondary or supporting navigation component did not exist in the design system, despite many in-page journeys requiring users to move through large amounts of information. This created a need for a navigation pattern that improved wayfinding and reduced excessive scrolling.
Process
The process of researching and creating this component was challenging because it introduced a new navigation strategy across the entire site. Reaching alignment on the final design required collaboration, including having coworkers pitch ideas to build synergy and shared ownership.
Designing the pattern for small viewports was the most difficult part, as it needed to remain clean while still being accessible and intuitive for users.
wthe
Variations
From the main design, we also wanted to support additional options such as parent and child subpages and icon usage. This flexibility allowed the component to cover a wide range of needs across the website.
Documentation
Like all components we design, this component was fully documented, ensuring alignment with the 8-point grid system and clearly defined labels for consistent use.
Mock Ups
Below are different mockups of the Supporting Navigation component, showcasing its various use cases in practice on UPS pages.
