Auctane Design Language

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

I'm just here for the visuals… jump to design results!

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.

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

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.$

Rebrand styling example. Heavy on red, blue, pink, yellow, and green. Example basic illustrations of boxes, stamps, and envelopes. Marketing collateral. — Above: a visual timeline of the process of distilling the rebrand colors into accessible primitive color scales to use across all app UIs. Right: An example of the Stamps.com assets from the Auctane-wide rebrand material.

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.

Dragging and dropping a button between different mode sections to automatically change the styling in Figma.

Below: 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. Left: 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.

ADL in action (Video Walkthroughs)

How I made brand-able components with variables and modes in Figma

Reusing patterns across brands quickly and easily

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

ADL in action (Video Walkthroughs)

ADL applied to Stamps.com apps