Building a design system is hard. Making it work consistently across Drupal, WordPress, and custom applications was challenging.
At a large regional public university, we reimagined our design system around accessible web components that could be shared across platforms while maintaining a consistent user experience. Along the way, we developed approaches for governance, automated accessibility and regression testing with Cypress, and a deployment pipeline that distributes assets through Azure Front Door.
This session will explore the technical and organizational lessons learned from implementing a cross-platform design system at scale. Attendees will learn how web components helped reduce duplication, how automated testing prevents accessibility regressions, and how a shared component strategy can support hundreds of websites without sacrificing flexibility.
We want to discuss our back-and-forth explorations in exposing options for users to enable light/dark themes and choose fonts. The two options we enable on the component side for how a menu is displayed to users and the constant refinement we see ourselves making.
Whether you're managing a single Drupal site or an enterprise web ecosystem, you'll leave with practical ideas for building accessible, sustainable web experiences that make a difference.
Session outline
1. The challenge
- Supporting many websites and stakeholders
- Multiple platforms (Drupal, WordPress, custom apps)
- Accessibility requirements
- Brand consistency vs local flexibility
2. Why web components
- Platform independence
- Reusability
- Design system architecture
- Lessons learned
3. Accessibility by default
- Building accessibility into components
- Testing requirements
- Internal struggles to make the components the best they can be
4. Catching problems before users do
- Cypress testing strategy
- Accessibility testing
- Real examples of regressions that were caught
5. Distribution at scale
- Azure Front Door CDN - We don't do anything advanced here, not yet.
- Versioning and rollout strategy
