My Role
Built a tokenized banner system powering all Estée Lauder brands.
The Problem
Banner implementations were fragmented, inconsistent, and expensive to maintain.
Impact
One system. 20+ Brands. Fewer bugs. Faster shipping.
Banners
A highly configurable banner system designed for multi-brand environments, enabling designers and engineers to ship consistent, responsive banners across platforms without sacrificing creative flexibility.
Customizing the Banner
How it works
1. Choose your banner type
Designers start by selecting a predefined banner pattern like hero, inline, category, or promotional, each built for a specific use case.
2. Select a layout and size
Designers choose the banner size and layout variant that best fits the page context and content needs.
3. Position the content block
Using the invisible block system, designers place text and CTAs anywhere within the banner without breaking layout rules.
4. Customize content elements
Designers toggle headlines, body copy, buttons, and links on or off to match messaging requirements.
Hover to see the invisible block system
Behind the scenes
Banner content lives inside a single, invisible field that moves within the banner rather than being placed manually. Built on auto layout–adjacent rules and guided by simple horizontal and vertical axes, it creates visual range while preserving structure, alignment, and consistency across brands and breakpoints.
Scaling across brands
A tokenized architecture enables brand switching without redesign. Core banner components remain stable while brand-specific styles are applied dynamically, reducing duplication and accelerating production across teams.