.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.
Action Group - Component
Action Group - Design
Definition
The action group component displays multiple options in a single grouping, requiring the user to make an explict choice. It acts as a decision tree, revealing additional on-screen functionality after a selection is made so that the user can complete a task or process.
Design Challenge
The original design supported a maximum of three options displayed at one time. As the organization’s needs evolved, it became clear that additional options were required.
During usability testing, we discovered that users had difficulty identifying which tab was currently active. This lack of clarity created confusion and reduced the effectiveness of the component, highlighting the need for improved visual hierarchy and clearer active-state indicators.
Key Design Focus
The primary focus was to redesign the component to accommodate more options while making it immediately clear which option is currently active. Improving clarity and scalability was essential to ensure the component remained easy to use as organizational needs expanded.
Process
I initially created the design in gray, but the feedback was that it felt disabled. To make it feel more active, we introduced a light teal background along with a stroke and tested the update. The revised version performed well and passed.
Process
Then, as part of the documentation process, we started adding more detail to these pages—such as images of the different viewports and an anchored list—so that anyone who needs specific details can find them quickly.
Small Viewport
Creating the small-viewport version was interesting because a vertical action group simply wouldn’t work. In fact, Apple had a similar action group at the time, but they used a gradient to make it appear as though it faded at the edges. I think that approach made it harder to engage with, especially given the limited space. The best solution was to have the action slide directly to the corresponding section when clicked.
Documentation
This is how it was documented. Everything followed the 8-px grid system, and a micro-interaction was noted to better align with the UPS design language of movement.
Mock Ups
Here are some of the mockups created for testing.
