Dropbox
Arbor System
A comprehensive design system for all global logged-out customer facing properties on desktop and mobile web.
In 2016, the Dropbox website was a tangle of mismatched illustration styles, type scales, button styles, and even primitives.
Eight years of design and tech debt was weighing it down, and it badly affected my team's speed of execution and morale.
More importantly, it caused confusion for users and eroded trust in our brand.
We obviously needed a design system. But first, I wanted to frame the problem crisply for the business and our users.
With no design system, and widely divergent surfaces across the site, design and eng debt are high, which slows progress and hurts team morale.
Browsing Dropbox web on desktop and mobile is a confusing, visually exhausting experience.
After 3 months of hard work, a new design system was born.
We named it Arbor.
Arbor would go on to support all global logged-out customer facing properties on desktop and mobile web. It worked hand-in-glove with the existing logged-in design system, Maestro.
I did an audit of all our logged-out properties. There were many problem areas. To name just a few:
I presented the findings from the audit to my team, and then adjacent teams to build support. Everyone agreed: something had to be done.
With the support of design leadership, I led a cross-functional team to take on the challenge of creating a design system.
Our aim was to consolidate our system into a coherent set of primitives, patterns, and components. I’ll highlight the same 3 from above:
Headings should sit closer to the content they describe than the content that comes before. Applying margin above text (rather than before and after, or only after) helps ensure that spacings look as they should.
We developed our own gutterless fluid column grid, with 24 columns for desktop and 12 for mobile. All columns are equal in width, and flex in width depending on the total width of the viewport, hitting a max width of 1080px.
With this intricate component, it was important to optimize for legibility, so that users can easily scan and parse the search results. We also designed and built in all states (hover, focus, disabled, and down).
Finally, we pulled everything together to construct entire pages and sections of our website.
Arbor transformed the way our team worked. Here are a few highlights:
