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