.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.
Tabs - Component
Tabs Design
Definition
Tabs are a component used to help users navigate through small sections of content on a page.
Design Challenge
This was the existing design, but it was limited in flexibility. There was no horizontal option, and the component needed to take up less space. Because tabs were already widely used across the site, this component was especially important. Clearer guidelines and thoughtful updates were necessary to better support the organization’s needs and ensure consistency across the site.
Process
I conducted extensive navigation research to ensure the solution aligned with the brand’s design language while also meeting functional needs. Knowing this work could influence the navigation strategy across the entire site, I explored a wide range of patterns and options.
I developed multiple design concepts and presented them to the team, allowing us to evaluate and select the strongest direction collaboratively.
Because the UPS site is content-heavy, I kept the design minimal and intentional, ensuring there was ample space for large section titles and improved readability.
Documentation
Here’s how we documented the component. From spacing to the various states, we documented color, typography, and all relevant details to ensure a smooth handoff for developers.
Mock Ups
These are the different variations of the tabs component applied across the UPS site.
