Auctane Design Language and the Stamps.com Rebrand

Unifying Auctane's products, design systems, and feel while applying rebranded basics provided from a 3rd-party.

Pardon the brevity, but here's a peek into how I helped lead the effort to create a unified design system for Auctane's disparate house of brands. By leveraging the rebranding initiative as an opportunity to streamline and standardize design elements across products, we were able to eliminate unnecessary duplication of work and create a more cohesive user experience.

I focused on defining a core set of accessible color primitives based on the unified color palette of the rebrand. By analyzing the hue, saturation, and lightness values of each color, I created a scalable color system that could be easily applied across all products. This not only ensured consistency in branding but also helped meet accessibility guidelines for text and button contrast ratios.

White to black grey scale steps, with some color scale options tied to semantic meanings.

The (nearly) final primitive colors (blue would later change). A white to black greyscale, with similar scales for green, gold, red, and blue. Names, rgb/hex/hsl values given for each.

To see the stylistic and usability mess that Stamps.com was in, please check out my Heuristic Evaluations of the web experience.

rebrand styling example. Heavy on red, blue, pink, yellow, and green. Example basic illustrations of boxes, stamps, and envelopes. Marketing collateral.

Above: An example of the Stamps.com assets from the Auctane-wide rebrand material we were given to work from. Left: a visual timeline of the process of distilling the rebrand colors into accessible primitive color scales to use across all app UIs.

The core design team collaborated to create a centralized "Foundations" file in Figma, which defined the primitive colors, spacing, typography, and other design elements. By utilizing Figma's new variables and modes features, we were able to create components that could adapt to different brand specifications with ease. This approach enabled a seamless workflow for designers, allowing them to quickly create new designs without having to manually adjust each component.

Through rigorous testing and collaboration, we were able to create a set of components that were not only functional but also user-friendly. By prioritizing scalability and flexibility in our design system, we laid a solid foundation for future growth and expansion within Auctane.

Left: Examples of how variables were used in both the core Foundations file and the Components library, in addition to example molecules through patterns defined across ADL as well as brand specific usecases. Above: using modes to create quickly assignable themed components..

Variables defining the primitive UI colors that would be shared by all Auctane brands. Colors use 000-999 naming convention to indicate if shade is correct contrast in color pairs.

Variables to define default measures used across ADL

Variables from the ADL Foundations file, showing default surface, border, text and icon colors, defined by primitive colors.

Example Figma screen from ADL Components file, documenting Dialogs

Showing all the Button variables & modes that align to brands. Most variables are based on other variables from the foundations file.

A Figma component for a telephone number, with 4 variants: US empty state, US filled, Brazil example, and Australia example. Each includes an international prefix selector, a number field with placeholder in the locale's format, and a field for extension.

A robust component for gathering name, with options to gather Full Name, First / Last, a

Overall, this project exemplifies my ability to work with cross-functional teams, analyze complex design challenges, think in both macro and micro scales, and implement scalable solutions that improve the overall user experience. My focus on creating a unified design system not only enhanced visual consistency across products but also streamlined the design process for the entire organization.