University of Illinois ยท 2020-2023
Building a Design System a Decentralized University Could Adopt
I built the v1 design foundation and reusable component library that gave hundreds of independently managed university sites a shared starting point. I then helped govern the community that kept it in use after I left.
Independent Sites Made Consistency and Accessibility Uneven
The University of Illinois had hundreds of public-facing websites managed independently by colleges, departments, and units across Drupal and WordPress. Prospective students could encounter very different experiences depending on where they entered. Teams repeatedly rebuilt headers, heroes, quotes, statistics, and image features, often with inconsistent branding and uneven accessibility.
Accessibility expertise did not sit in every web-development team, and any unit could launch a site. That made quality hit or miss. The system needed to give teams clear, prescriptive guidance they could use without a specialist in the room.
Leadership wanted a more cohesive, accessible web presence. But in a federated university, no central team could simply mandate a new standard. The real business problem was not making a design system; it was making the accessible, on-brand choice easy enough that autonomous teams would choose to adopt it.
I Built the Foundation and Led the Work That Made It Reusable
As Director of Web Development for the College of ACES, I built the v1 design foundation and led the core design work that extended it.
My direct contributions included:
- the buttons, header, hero, quote, statistics, and image-feature components
- the Adobe XD component library and prototypes, later rebuilding the base system in Figma
- accessible-color guidance and focus-state designs
- a partnership with the front-end developer who named the tokens and built the production components
- training, workshops, documentation, adoption support, and Figma enablement for designers
I also co-chaired the cross-campus Website Implementation Guidelines Group as one of five people on the steering committee and led its WordPress and Design groups. I built the foundation and led the core design work; the broader community extended and adopted the mature system.
Adoption and Durability Showed That the System Was Working
I did not have a formal adoption rate, defect-reduction figure, or return-on-investment measure for this work. Instead, I evaluated success through concrete uptake and durability signals:
- a few other colleges adopted the standards and rebuilt on the foundation
- the governance community grew to roughly 175 cross-campus members, with five people on the steering committee
- the system and governance group remained in use after I left
Those are adoption and durability signals, not a claim of measured efficiency or compliance. The next measures I would put in place are component reuse and accessibility-defect reduction.
I Turned Repeated Page Patterns into an Accessible Component System
I started with the patterns teams were already rebuilding: headers, heroes, quotes, statistics, and image features. I designed those components as a shared foundation, then partnered with a front-end developer who named the tokens and built the production components.
Teams could assemble pages from tested building blocks. Components were prototyped, tracked in an inventory, and made available through the same governance process that guided their evolution.
- Design foundation: buttons, headers, heroes, quotes, statistics, image features, accessible color guidance, and interaction states
- Component library: documented design components with real Default, Hover, and Focus states
- Shared implementation: a component library that WordPress and Drupal teams could use and build on top of
I Made the Accessible, On-Brand Choice the Easy Default
Several decisions kept the system practical in a decentralized environment.
I made accessibility part of the component system from the beginning. Brand was involved from the start and was a major stakeholder, with particular expectations for Illini Orange. That color is central to the university identity, but it fails contrast requirements as text on white. Because accessibility expertise was uneven and any unit could launch a site, I documented approved color combinations for each theme and designed focus states that made the safer choice clear without requiring contrast math or a specialist review.
The system needed to meet teams where they worked. The shared component library gave both WordPress and Drupal teams something they could use and build on top of, without requiring every unit to change platforms. The tradeoff was less central control, so the design foundation, documentation, and reusable component model had to carry more of the consistency work.
Collaboration mattered more than familiar tooling. The work began in Adobe XD because the university had licenses, but decentralized IT and versioning made shared work brittle. No one was using Figma, so I taught myself the tool, rebuilt the base system there, and taught other designers how to use it. Moving tools was worthwhile because the tool itself had become a barrier to contribution.
Governance, Training, and Shared Tools Turned Standards into Adoption
The component library was only one part of the product. The other part was the cross-functional operating model that let it evolve without relying on one team or one person.
I worked with designers, developers, accessibility specialists, information architects, content teams, brand partners, and university stakeholders through the Website Implementation Guidelines Group. As one of five steering-committee members, I co-chaired the group and led its WordPress and Design channels within a community of roughly 175 people.
That community created a shared path to propose, review, prioritize, and release improvements. I paired it with workshops, office hours, documentation, and Figma training so that standards came with the capability to use them. That gave teams a shared way to improve the system without routing every decision back through the original team.
The Artifacts Make the System Tangible
Selected prototypes and documentation show how the system translated into accessible, reusable patterns.