.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.
Featured List - Component
Featured List Design
Definition
Featured lists are visual callouts designed to showcase important features or benefits. Each item pairs concise text with an icon or image and may include a call to action. These lists are arranged in sets of two to adapt seamlessly to different screen sizes and layouts.
Design Challenge
Center of Design Excellence (CDx) I was Tasked with creating Illustrations. that are compelling give a story and help ease the viewer asx they attempt to get assistance. I also created Data Visualizations and App covers!
Process
My primary task for the Featured List component was to create a clear and scalable documentation system. In Figma, files can quickly become disorganized, so we needed a standardized template that everyone could follow. This template defined how each section should be structured and documented.
All components were published to a platform called Design Lab, a company-wide resource used by developers and third-party partners to understand what we were building and how to implement new updates. As the CDx team, we acted as the governors of the design system, setting the standards and rules. Because of this, everything had to be clearly written, consistent, and easy to understand.
Documentation
These templates were used to create the different pieces of documentation for each page, including do’s and don’ts, component anatomy, color, typography, sizing, and spacing. Every detail was broken down to ensure clarity, consistency, and proper usage.
Mock Ups
Lastly, we focused on creating mockups. One innovation I contributed to was replacing black placeholder shapes with light blue dotted placeholders. This approach made the elements feel editable and flexible, encouraging iteration, rather than appearing fixed or final like traditional black placeholders.
