Illinois Web Theme

University-wide web components, templates, and pattern library


Collage of homepages across many Illinois websites showing big differences in design and branding

The Problem

Lack of a shared identity as a university.

The University Marketing office wants to implement a singular University of Illinois brand.

The university is siloed in most colleges and units creating a vast array of web platforms, designs, and accessibility issues.

Additionally, work is being duplicated and costing the University more money.

The Team

The initial team of eight formed and included designers, UX, an accessibility expert, an information architect, front-end developers, and back-end developers. My initial role was UI designer since I was already working on these files for my college.

Web Implementation Guidelines Group (WIGG)

Now, WIGG is a cross-campus community of expertise represented by each college or large campus unit focused on creating and encouraging best practices for public-facing websites. It consists of a small core membership and several working groups that create the deliverables. Groups include Design, Components, Drupal, and WordPress. I have been an integral part of establishing and managing this team as a leader of multiple groups and co-chair of WIGG.

Cross-Campus Collaborators

  • Technology Services
  • Strategic Marketing & Branding
  • IT Accessibility
  • Admissions
  • Colleges – ACES, LAS, Grainger Engineering, Education

The Solution

Create a common web pattern library and web components to integrate new branding, create consistency, and improve accessibility across the University of Illinois’ public-facing websites. Leveraging the working groups in WIGG, prioritize accessibility, user experience, and branding. Utilize shared components and code repositories for CSS, HTML, Javascript, WordPress, and Drupal.

My Roles

  • Project Management
  • Visual and UI Design
  • WCAG Compliance
  • User Experience Design
  • Testing
  • Leadership


10 weeks to create the first working version


WordPress template using components


  • Adobe XD
  • Microsoft Teams
  • GitHub
  • AirTable
  • WordPress

Target Audience

Faculty, staff, and units on campus

Screenshot of the homepage for the WordPress version of the Illinois Theme showing header, hero, and body content.

Melissa is the glue stick that holds the WIGG collage together: Great at art, great at team cohesion, great at sticking the landing spots on dozens of fiddly little pieces, and great at producing a gorgeous outcome.

-Dena Strong · Senior Information Design Specialist and member of Design and Components groups

Instituted and continually encourage a culture within the group for an evergreen process to quickly create, publish, receive feedback, revise, and improve.

Create and deliver interesting presentations for WebCon, IT Proforum, and WIGG monthly information sessions.

Web Components

Tabbed Accordion

Image Feature

Design Challenge

Select and use a tool to share designs with designers, developers, and communicators.

Solution: Adobe XD + AirTable

Adobe Xd Logo
Airtable Logo

The Design group of nine settled on Adobe XD due to campus licensing options and restrictions. XD created many challenges such as version control and ownership of files. One person manages the master files. Any team member can create designs using the shared component library, and submit them back to the master. Developers use links to the final XD design files housed in AirTable.

My initial role was to take our current college designs and additional great ideas used across campus and put them into a new pattern library and XD software.

Previously, I had used multiple Adobe products, but not XD. After trial and error along with video tutorials, I learned the program and then taught others how to use XD.

It’s not a perfect solution, but based on university constraints, it has allowed for great success so far on the theme. It is now time to reevaluate this tool as the best option for our current needs as we grow and scale.

I created a master spreadsheet in the AirTable online software. It contains the project workflow state, XD design link, final component link for documentation and trial, and the CMS release it belongs to.

Paragraph types in Drupal mocked up on an ipad and mobile phone
Call to Action component with details in AirTable project management view

Accessibility Challenge

Illini Orange is not very accessible, but it’s one of the two main branding colors we need to use.

Solution: Clearly define color accessibility per WCAG rules and provide a cheat sheet, documentation, and education opportunities.

The University is associated more with our orange than the blue color. Incorporating it into our designs is very intentional due to the limited colors we can use with it. Most designers on campus want to use more white text on the orange background. The orange text on white is also not accessible in small sizes.

I am giving presentations and educating graphic designers, web content editors, faculty, and staff on the color contrast combinations using orange and the rest of our branding pallet for digital use.

Melissa Waller

View the slides for the Digital Accessibility overview presentation given to multiple Agriculture Communications classes at Illinois.

Melissa Waller

View the slides for the Digital Accessibility talk given to campus designers and content creators.

View the XD cheatsheet.

Design document for developers showing the sizing and colors for all of our Illinois themes.

Project Management Challenge

Managing multiple groups with volunteer participation to implement the components as they become available.

Solution: AirTable project and common person to attend each group’s meeting

The workflow for the system starts with Design, then is made into Components, and they are then populated in each CMS (WordPress and Drupal). Since these groups are more spread out across campus and rely on volunteer work outside of regular duties, the flow is more sporadic and dependent on primary role priorities.

I am considered the glue stick at this time that weaves all the changes throughout the groups. This has served us well to really get momentum in this project and keep all groups up to speed. As this group has matured, we are considering additional options since this isn’t sustainable for one person indefinitely.

Currently, all items and releases for the components as well as each CMS are listed in an AirTable software and tagged accordingly. This helps each group see what is on deck next to continue to implement. I also attach the design files to the records so each group can reference them.

Communication Challenge

Let the campus know what WIGG does and how it operates in addition to the templates and services available.

Solution: Microsoft Teams and new monthly update meeting for all of campus

Notes and documentation for each release for each of the CMS and components groups. A monthly conversations meeting where we discuss the updates for each group and project overall.

Started from a small team of nine and grown to a community of almost 200!