Releasing DIG

Transformed a fragmented suite of products and platforms into a cohesive experience through evangelizing our design system, Dropbox Interface Guidelines.

Background

Dropbox Interface Guidelines (DIG) is a set of internal tools built to support product teams. Our design system supports all platforms, enabling product designers and engineers to build cohesive products quickly. This means that all Tokens, Typography, Components, and Icons are built from a single set of pre-defined, reusable elements. When DIG launched, dropbox products lacked cohesion on design and engineering; our team supported 4 platforms with mixed visual styles, which referenced 4 out-dated design systems and over 2,000 raw hex values in the web code. Additionally, old design systems at Dropbox did not define how to best apply our brand strategy and visual identity system in our products. Dropbox Interface Guidelines (DIG) was built from the ground up, including documentation, training, and a community support.

Historically, any improvements to brand in product have fallen short due to lack of cohesive code. Not only does migrating to a new design system improve product workflows, but it future proofs our product for any brand innovation. Knowing that brand updates were underway, I saw the urgency and opportunity, leading the adoption and migration of DIG 2.0 to ensure a seamless rollout of brand updates in product.

Responsibilities

• I focused on large improvements to discipline-wide practices by actively onboarding and training 80 product designers to our new system (Feb 2020). I worked with the team and cross-functional peers to improve documentation and support for product teams adopting the system.

• I developed a plan and process to help teams prioritize their migration of critical views to DIG ahead of the brand refresh launch in 2021. This strategy and advocacy secured resourcing of a TPM to ensure a smooth migration process through 2020.

• Lead the effort to operationalize migration by developing a playbook which enables product teams to self-guide and prioritize, resulting in less oversight and support from the design systems team.

• Defined migration deadline, by collaborating with product and design leadership. Translating the brand strategy to be clearly understood by product teams, including DIG’s facilitation of the refresh to end users, which lead to product teams prioritizing the work.

Impact

2 years later, 87% of existing product code leverages DIG

• Migration of prioritized views complete.

• Clean code allowed our team to partner closely with Brand, running experiments to ensure any brand updates did not impact product KPIs

• “given dropbox’s velocity standards, this is huge” - Ronak S (Product manager)

All (8) new dropbox products leverage DIG

• Adopting DIG means increasing product team velocity. Adopting DIG allows product teams to focus on feature work rather than KTLO, while our central team manages component robustness, accessibility, etc. Reducing the number of design systems in the code means teams deal with less tech debt and inconsistencies.

• DIG provides an accessible, robust, and cohesive product. Increasing user experience quality and trust.

• Increased team velocity means faster time to market for product and feature releases. Cohesive end-to-end experiences reduce the friction of users moving between products and platforms.