Problem
G-P needed a scalable, accessible, and internationalized design system
to support a rapidly growing microfrontend ecosystem across 50+
applications in 188 countries. The existing environment lacked standards
for accessibility, internationalisation, and governance, creating
bottlenecks and inconsistencies.
Along with a UX design partner, we gathered the corporate support needed
to drive the initiative forward. I then led the architecture,
development, and scaling of the design system, prioritizing
accessibility and internationalization from day one to ensure global
adoption and compliance.
While certain details are confidential, the case study highlights the
strategic approach, key results, and learnings from this transformative
project. In particular, I can say unequivocally that certain design
choices we made up front were instrumental in our success and the
long-term health of the system, and that AI augmentation has been a
total game changer for both contribution velocity and governance
efficiency.
Key Learnings
Early investment in accessibility and internationalization pays
dividends in global adoption.
This was a critical factor in the success and widespread adoption of the
system, and is often overlooked in design system initiatives.
While it may require more upfront effort, I believed that it was
essential that the smallest components be the most compliant and that
accessibility concerns form part of the core component interfaces. This
was sometimes awkward and forced us to confront difficult questions
early on but it meant that when the European Accessibility Act came into
effect, we were already in a great position to support our customers in
meeting the new requirements without requiring our consumers to change
their implementations of these ubiquitous components.
Distributed governance and clear contribution processes are essential
for scaling.
As the system grew, it became clear that a centralised ownership model
would not be sustainable. We established a distributed governance model
with clear contribution processes and guardrails, which empowered
consumer teams to contribute while maintaining the integrity and
consistency of the system.
This balance of autonomy and oversight was crucial for scaling
effectively.
AI augmentation dramatically improves efficiency in both contribution
and governance.
The integration of AI tools for code generation, review, and governance
tasks significantly increased our velocity and efficiency. Thankfully we
had architected the system in a way that allowed us to leverage these
tools effectively as they became available, with strong detailed
documentation, consistent patterns and conventions.
converting contribution guidelines and governance processes into prompts
was very helpful; but the real enabler was the development of skills
that could plug into the AI tools developers were already using,
increasing the accuracy and quality of their contributions and reducing
the friction of contribution to the point where we saw a significant
increase in consumer contributions and engagement with the system.
converting contribution guidelines and governance processes into prompts
was very helpful.
On the governance side, AI tools helped us to automate routine
maintenance tasks, enforce coding standards, and even identify potential
issues before they became problems, allowing our small core team to
manage a much larger and more active ecosystem of contributors and
consumers than would have been possible otherwise.