Ed Chao - Dropbox Web Redesign

Introduction

Dropbox has created some amazing capabilities on the web that can change the way people work. However over the years we’ve outgrown the model of appending new features to a list. And we’ve made them difficult to adopt by designing each of them differently.

The redesign of dropbox.com is about creating a design system for our web experience, which would reorganize and present all of our products as an accessible, focused, creative suite.

Problems with Dropbox.com

Despite having an amazing set of features and tools, they’ve become obscured by our growing list of features. And because there is such a thin connection between them, our customers are not made aware of the tools that are actually within their reach. Customers may have a real need for Dropbox Paper but because they don’t see it or because it is positioned as a peripheral feature, they won’t think to try it.

Tangled Accounts

Dropbox is the home for your most personal files and the vault for your most important work. When these spaces merge together, not only is the privacy of home compromised, so is the security of work. Personal photos from that beach trip end up sitting next to your team financials. Neither you nor your team should be happy about that. This is also a problem from a business perspective. Business features that simply don’t exist for personal accounts are forced to show up in a semi-available state within merged views.

Fragmented Experiences

Today users of Dropbox properties have deeply varied experiences. From branding to user flows to page formatting, very little is constant across our products. This creates a feeling of unpredictability and degrades the overall perceived quality of our brand. Customers have to relearn whole sets of new rules for each tool. With each additional tool we create, this problem only gets worse.

Solutions in the redesign

We are introducing a new way to navigate across Dropbox. We are taking our rich offering of features and grouping them into a small set of products (“Home, Files, Paper”), each with their own application level navigation. This means three things…

We reframe Dropbox as not just a file storage company with a lot of bells and whistles, but a collaboration company with a focused suite of tools.
We distill the number of choices our users have to make when they arrive at Dropbox.com, which helps users jump into engagement faster by mitigating choice paralysis.
We designate a place in our navigation for products to live that offers space for the product to grow without bloating our front page.

Separation between work and personal accounts

We are separating personal and work completely by giving each their own spaces with access to their own set of tools. This separation doesn’t mean its a chore to jump between the two accounts. A simple toggle allows users to quickly go back and forth between personal and work, to their hearts content.

Unification of visual, interaction patterns

We are providing an extensive set of visual and interaction patterns that make the learning curve easier with each additional product. Every page regardless of product is laid out in the same way. Navigation is always to the left, content in the center, and actions to the right. Consistent type scale and a restrained use of iconography create a calm rhythm on each page that helps users focus. These are just a few of the main examples of how a consistent set of visual and interaction patterns unify the Dropbox experience.

Conclusion

On February 4th 2017, we launched this redesign to a small set of early access customers. After demonstrating that it didn’t negatively impact key metrics (but rather boosted them) we decided to roll the redesign out to everyone at the end of March. Around the same time we also started a new Design Systems team to extend and evolve the work going forward. Altogether the project has set a new foundation for Dropbox design and I’m excited to see where the team as a whole takes it from here.