High-density Design System
Interaction design
Summary
The Material Design System launched an internal, Google-branded take on its design system. Their initial release focused on consumer products, so enterprise design teams dove in to determine how to evolve their products to match this new system.
A fellow designer, Darren Head, and I created an approach to densify the design system. Over time, other design organizations leveraged this approach and Figma library. It is now owned by the Material Design System team.
Contact me for a detailed overview of this case study
Background
The Material Design System launched a new iteration of its internal design system, focusing initially on consumer products — so enterprise design teams dove in to determine how best to evolve their products to match this new system.
At the time, I built products for software engineers, who digest an immense amount of code to maintain Google’s infrastructure and need products that thoughtfully condense as much information as possible into their multi-monitored workspaces.
Outcome
In this self-initiated project, a fellow designer, Darren Head, and I created an approach to densify the design system for our design organization’s 11 products and 100+ designers. We launched into cross-organization collaboration, pair design, and the creation of an extensive Figma library to illustrate our approach.
Over its first 6 months, our Figma library was leveraged by 121 design teams, who added dense patterns and components to their design files over 347,000 times.
Our principles, components, and Figma library were adopted, and are now owned, by the Material Design System team.
I led:
Strategy & design workshops
Collaboration strategy workshop
Design system tooling workshop
Feature discovery for new design system platform
Research & design
“Consistency vs. cohesion” exploratory research
Usability sessions for new design system platform
28 high-density design patterns for design systems
Animated high-density guidelines
Densifying the design system encompassed not only the individual elements (such as smaller buttons, input fields, or text), but also the overall layout. Our collaboration efforts with designers and researchers aimed to find the balance between too “comfortable” and too compact.