Problem Statement
Problem: Inconsistent user interfaces across products within the organization steepens the learning curve for end users, increases front end design and development time, and poorly defines organizational branding.
Background: As the organization matures and adoption of products increases, user feedback focusing on the intuitiveness and learnability of products highlighted the need for commonality between product teams with overlapping users. A design system team was formulated to unify the products around a common set of principles, components, and design strategies.
“I think you’ve provided the gold standard and the model for how a modern cross-application design system is developed, managed, and communicated.” - Kessel Run Engineering Lead
Methods:
Facilitate workshops with product designers and portfolio leadership to determine a common set of design principles all product teams could follow.
Extensively test color combinations to define light and dark palettes that have consistent contrast and meet government requirements for accessibility.
Leverage existing component libraries to avoid unnecessary rework and improve code consistency across products.
Adopt a “custom as a last resort” model that requires designers find consistent and repeatable solution patterns.
Establish a "recommendations not rules” approach to account for vastly different sets of users between products.
Provide robust documentation for developers and designers with recommendations, notes, examples, and code sandboxing.
Results: A case study was conducted on the impact of adopting the design system for one of Kessel Run’s established product teams. Design story requests were cut in half, story complexity increased 36 percent, but stories took an average of about 3 less days to complete. Developers were touching less files, inserting 20% less lines of code, and deleting 35% less.
In short, developers were doing more complex design stories faster, while the product manager requested them less often.
Prior to adoption the product was on pace to see roughly 191 design stories requested in a 12 month period. At their pre-adoption development pace of 22.18 days per story that’s over 4,236 developer days of work dedicated to front end development. Adoption dropped that design story pace to 101 stories in a year. The increased velocity meant a year of front end stories would require 2,291 fewer developer days to complete.