University of Illinois ยท 2020-2023
University-Wide Design System, Prototypes, and Web Components
Building a shared design system, accessibility framework, and governance model across a decentralized university environment.
Challenge
The University of Illinois consisted of hundreds of public-facing websites managed independently by colleges, departments, and units across campus.
As a result, branding was inconsistent, accessibility practices varied widely, design patterns were duplicated, development teams often solved the same problems multiple times, and prospective students encountered different experiences depending on which website they visited.
University leadership wanted to strengthen brand consistency while improving accessibility and creating a more cohesive experience across campus websites.
The challenge was not simply creating a design system. It was creating a solution that multiple colleges, technical teams, and content owners would willingly adopt.
Approach
I joined an initial cross-campus working group that brought together designers, developers, accessibility specialists, information architects, and university stakeholders.
What began as a design initiative quickly evolved into a broader effort focused on governance, collaboration, accessibility, and shared ownership.
Over time, I became a leader within the initiative, helping establish processes, coordinate working groups, develop accessibility guidance, and support implementation across campus.
The team focused on creating:
- Shared design patterns
- Reusable web components
- Accessibility standards
- Design documentation
- Cross-campus governance processes
- Education and training opportunities
The goal was to create a common foundation that could support multiple content management systems while reducing duplication and improving quality.
What Was Created
Shared Design System
A centralized design system that documented UI patterns, page layouts, components, typography, color standards, and interaction behaviors.
The system evolved from Adobe XD into a more scalable Figma-based workflow as adoption expanded.
Reusable Web Components
A growing library of shared components that could be implemented across multiple platforms, including cards, call-to-action modules, feature components, navigation patterns, content layouts, and interactive elements.
The component approach helped teams move faster while maintaining consistency.
Accessibility Standards
Accessibility was embedded into the system from the beginning rather than treated as a final review step.
Particular attention was given to color contrast requirements, component accessibility, content structure, WCAG compliance guidance, and design documentation.
One notable challenge involved balancing accessibility requirements with the university's highly recognizable Illini Orange brand color. To address this, we developed documentation, approved color combinations, and educational resources that helped designers make accessible decisions while maintaining brand integrity.
Governance and Collaboration
The initiative expanded into a campus-wide governance model through the Web Implementation Guidelines Group (WIGG).
I helped establish and support a structure that connected UX, design, accessibility, component development, Drupal teams, WordPress teams, and campus stakeholders.
This created a shared process for proposing, reviewing, prioritizing, and releasing improvements across the ecosystem.
Education and Enablement
Creating standards was only part of the solution. Adoption required helping others build new skills.
To support this effort, I created and delivered accessibility presentations, design workshops, documentation, office hours, reference materials, and campus presentations.
The focus was helping teams understand not only what to do, but why it mattered.
Outcomes
While the system continued evolving after the initial launch, the effort established a foundation for:
- More consistent university branding
- Improved accessibility practices
- Shared design and development standards
- Reduced duplication across teams
- Stronger collaboration between colleges and units
- Greater awareness of inclusive design practices
The initiative also grew from a small working group into a large cross-campus community focused on improving the quality of public-facing digital experiences.
My Role
Throughout the project I contributed in multiple capacities as the initiative evolved.
Design
- UI design
- Design systems
- Prototyping
- Pattern libraries
Accessibility
- WCAG guidance
- Accessibility reviews
- Documentation
- Training
Leadership
- Working group leadership
- Cross-team coordination
- Governance development
- Stakeholder communication
Operations
- Project management
- Process development
- Release coordination
- Adoption support
Key Takeaways
This project taught me that successful systems are rarely just design systems.
Creating reusable components was important, but the larger challenge was helping people work together, align around standards, and adopt new ways of working.
Many of the leadership, accessibility, governance, and enablement practices I use today can be traced back to lessons learned during this initiative.