Dropbox Growth Design Systems - 2022
Designing the system behind Dropbox’s growth
From fragmented to fast: I built a design system that powered experimentation at scale and unlocked new growth for Dropbox’s web platform.
Dropbox’s Challenge
Dropbox’s marketing and growth teams relied on inconsistent web UI patterns that slowed experimentation, created visual debt, and eroded brand trust. Each new page launch required heavy design and engineering lift, slowing iteration on high-impact experiments.
The Opportunity
To accelerate growth and reinforce brand trust, we built a scalable logged-out design system that unified visual standards, increased experiment velocity, and aligned teams around shared components and best practices.
My Role
As the founding designer for the logged-out design system, I partnered with engineers and marketers to define the system’s structure, author experience, and adoption strategy while balancing brand integrity with flexibility for rapid experimentation.
The design systems
Evolved Dropbox’s site from a single-product experience to a scalable multiproduct narrative through page redesign
The users
The design system served a diverse group of internal users:
Designers
needed a consistent, flexible library to move faster and stay on-brand.
Developers
relied on reliable components and documentation to reduce code debt.
Marketers and Growth PMs
needed scalable templates for rapid experimentation and page launches.
Balancing these needs required designing a system that was robust yet adaptable, centralized yet flexible, and empowering teams to ship confidently without reinventing patterns.
Design process
Our goal was to create a scalable, growth-ready design system that could accelerate experimentation and maintain brand integrity. To achieve this, I partnered closely with engineering, brand, and marketing teams through a three-phase process:
Audit & Alignment
Conducted a comprehensive audit of 200+ web components and marketing patterns, identifying redundancies and performance gaps. Facilitated cross-team workshops to align on design principles and governance.
System Architecture & Design
Defined a modular, responsive component library optimized for high-velocity growth experiments. To balance speed with quality, we built preset, opinionated components that guided marketers toward best UX practices, and ensuring consistency and usability across every new page launch.
Implementation & Adoption
Partnered with engineering to establish a unified token system and Figma-to-code parity. To ensure the system worked for everyone, we conducted Author Ridealongs which shadowed AEM authors to observe their workflows, pain points, and publishing habits. These insights directly informed component naming, documentation structure, and authoring patterns, making the system more intuitive and empowering for non-design users.
Impact on the business
150+
Responsive Components
9
Cross functional team using the library
1,000+
FIgma insert/week
90%
Adoption across Dropbox web surfaces
220%
Page performance improvement
+650k
GNARR