Dropbox
2023
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 & marketing efforts. The rebranding effort had vibrancy and human touches as the foundational groundwork, but that voice failed to crossover into the customer experience.
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 shadow, 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.
A brand toolbox is a foundation built upon an overarching brand strategy and purpose. Here is an opportunity to find purposeful ways to leverage the Dropbox brand toolbox instead of relying on the existing Dropbox design tokens or borrowing other visual vocabulary (popularized by Google Material Design), and build towards a distinguished product experience that is in alignment with the branding efforts, thereby building a more consistent customer journey (see, buy, use).
Dropbox brand’s hard edges and high contrast planes may be against the grain in 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 have visual tension. Avoid superficial applications of hard and soft forms; each design choice should serve a purpose to co-exist.
Static planes can give the impression of an outdated UI. In the case of Dropbox planes, they resemble sliding doors, begging to be animated. Use motion strategically to bring fluidity to the UI and to help orient the user.
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.
The Dropbox design system/tokens should extend the toolbox to the product designers more. 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.
It’s tempting to walk away from what you have to pick up on trends and new looks. Dropbox’s rebrand effort does have a very ownable illustration style and has built an extensive library in this look. Continue and leverage the branded art library to enrich the brand equity over time and add delight to in-product communications.
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 evolved the design system of ongoing redesign efforts with more branded effort, and some prototypes were a complete rethink of the interactions for Dropbox’s core (file, store, sync) desktop product. The captured interaction of the prototype (below) is intentionally blurred for confidentiality but still displays some design principles related to colors and motion.
Credits • Design teams at Dropbox • Brand expressions by Instrument