Photograph of blue sky with Dropbox UI

Dropbox

2023

Reimagining of the Dropbox product experience by exploring a retooled design language that instills the brand’s personality into the products.

UX
Figma prototyping
Bluesky concepts
Design system
Brand
Illustration of a content file labeled brand foundation png going into a desktop folder labeled desktop prototypesIllustration of a content file labeled brand foundation png going into a desktop folder labeled desktop prototypes

Bridging the gap

In 2022, Dropbox looked at ways to improve the overall customer experience, and one of its goals was to uplevel the design craftsmanship across the board, especially in its products. The file-hosting company aimed to situate itself as a premium brand but saw the core products needed to catch up to its rebranding and marketing efforts. The rebranding effort had vibrancy and human touches as the foundational groundwork, but that voice failed to crossover into the customer experience.

Side by side comparison of Dropbox's graphic language for marketing versus productSide by side comparison of Dropbox's graphic language for marketing versus productSide by side comparison of modern UI design language versus Dropbox's design languageSide by side comparison of modern UI design language versus Dropbox's design language

Approach

The earlier redesign efforts shared a similar design vocabulary to the modern UX design aesthetics that were popularized by the tech leaders: rounded corners, cards, drop shadows, tone elevations, and iconography. While the effort took steps towards modernization, the proof of concepts lacked any distinctive Dropbox brand personality. I took a deep dive into the rebrand’s toolkit to see what we can glean and reintroduce these brand expressions into the product, enhancing the overall delight of the product experience.

Dropbox brand toolboxDropbox brand toolbox

A brand toolbox establishes a foundation based on a comprehensive brand strategy and purpose. Here is an opportunity to find purposeful ways to leverage the Dropbox brand toolbox, rather than relying on the existing Dropbox design tokens or borrowing other visual vocabulary (popularized by Google Material Design). This will allow the team to build a distinguished product experience that aligns with their branding efforts, thereby creating a more consistent customer journey (see, buy, use).

Illustration showing card and rounded boxes

Dropbox brand’s hard edges and high contrast planes may be against the grain in the trending UX vernacular. Hard (reflecting DBX brand DNA) and soft (modern UI) don’t have to be an either/or scenario for the product’s design system. Together, there can be an opportunity to create visual tension. Avoid superficial applications of hard and soft forms; each design choice should serve a purpose to co-exist.

4 different sets of animation showing color planes moving at various patterns

Static planes can give the impression of an outdated UI. Dropbox planes, with their resemblance to sliding doors, are ripe for animation. Use motion strategically to bring fluidity to the UI and to help orient the user.

Simple black background with text that says Dramatic blacks

Give blacks a crucial role to play. The old product design was mostly beige tints, offering a very monochromatic experience. To add a bit of drama, find ways to introduce planes of black to emphasize key moments of the user experience.

Illustration of a graphic showing rounded box and Sharp Grotesk 23 typeface

The Dropbox design system (tokens) should leverage more of the brand toolbox. Don’t shy away from the display typeface (Sharp Grotesk 23), but also use it strategically to improve typographic hierarchy and increase brand personality. Squircles (a softer version of a rounded box) are not replacements for all circles-shaped badges—they can co-exist in Dropbox’s design UI vernacular.

Illustration of a person hanging framed artworks

It's tempting to drop what you have in order to chase new trends and looks. Dropbox’s rebranding effort built a very ownable illustration style and a robust library. Continue to use the branded illustration style to enrich brand equity over time and add delight to their in-product communications.

Bringing it all together

I made five Figma prototypes to prove these design approaches, each pushing a direction across a spectrum between branded and core. Some prototypes I’ve built for the redesign effort address several new design principles, including a complete rethink of the interactions for Dropbox’s core (file, store, sync) desktop product. I intentionally blurred the prototype's captured interaction (below) to maintain confidentiality, yet it still showcases some design principles related to colors and motion.

Credits • Design teams at Dropbox • Brand expressions by Instrument