Dropbox

Arbor System

A comprehensive design system for all global logged-out customer facing properties on desktop and mobile web.
Challenge
How might we align Dropbox's web and mobile properties in a delightful and clarifying way for our users?
My Role
Design Systems, Visual Design, Project Management
Year
2017
Timeline
3 months
Tools
Sketch, Atomic
No items found.
No items found.
01

Background

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.

Business problem:
With no design system, and widely divergent surfaces across the site, design and eng debt are high, which slows progress and hurts team morale.
User problem:
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.

02

Audit

I did an audit of all our logged-out properties. There were many problem areas. To name just a few:

  • Type: We had 5 completely different type scales, and over 40 different type styles in use across the site.
  • Layout grid: Much of the website was coded to use a bootstrap grid with gutters. However, in practice, no one was using it because designers found the gutters too narrow.
  • Search fields. We had 6 different styles of search fields across the site. The type-ahead dropdown had poor legibility and was hard to parse.

I presented the findings from the audit to my team, and then adjacent teams to build support. Everyone agreed: something had to be done.

No items found.
03

Fabricate

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:

Typescale

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.

Layout grid

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.

Search Fields

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

No items found.
No items found.
04

Assemble

Finally, we pulled everything together to construct entire pages and sections of our website.

No items found.
No items found.
05

Results

Arbor transformed the way our team worked. Here are a few highlights:

  • Overhauled the entire website – In just 4 months, we redesigned: Home, Buy, Plans, Dropbox Blog, Help Center, Dropbox Business, Dropbox Paper, Dropbox Plus, The Transparency section, and all marketing and SEO landing pages, and many others.
  • Global rollout – Successfully rolled out to all regions globally with no adverse impact on sign-ups.
  • Reduced costs – Reduced design + eng cost for most projects by about 30%.
  • Less fragmentation – With a design system, my team could put a stop to needless fragmentation on the site that was being driven by experiments on primitives and atoms.
  • Better experiments – The focus of experiments shifted to improvements to UX and user journeys.
  • Improved morale – We celebrated a lot more of the work we did, which all of us were now proud of.