Illinois Web Theme

University-wide web components, templates, and pattern library

2020-23

webtheme.illinois.edu

The Problem

Lack of a shared identity as a university.

The University’s Marketing & Branding office wants to implement a strong and consistent 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 a significant amount of money.

screenshot of college of ahs homepage
screenshot of college of Gies homepage
screenshot of college of faa homepage

The Team

An initial team of eight formed from a campus working group 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)

Today, 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, UX, Components, Drupal, and WordPress. I have been an integral part of establishing and managing this team as a leader of multiple groups and a co-chair of WIGG.

Cross-Campus Collaborators

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

The Solution

Create a common web pattern library and 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/UI Design
  • WCAG Compliance
  • User Experience Design
  • Testing
  • Leadership

Timeline

10 weeks to create the first working version

Product

WordPress template using components

Tools

  • Adobe XD, Figma
  • Microsoft Teams
  • HTML/CSS
  • GitHub
  • AirTable
  • WordPress

Target Audience

Faculty, staff, and units on campus

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 UX and Components groups

Team Mission

An Evergreen Process

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

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.

Figma Logo

Update: Moved the team to Figma!

I am working on training the newest group of designers about web design, and accessibility, and migrating our designs to a Figma library.

Paragraph types in Drupal mocked up on an ipad and mobile phone
Design document for developers showing the sizing and colors for all of our Illinois themes.

Accessibility Challenge

Illini Orange is not very accessible, but it’s one of the two main branding colors we want and 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 Illini Orange #ff5f05 than the Illini Blue color. Incorporating it into our designs is very intentional due to the limited colors we can use with it for best accessibility.

Most designers on campus want to use white text on the orange background at all sizes. 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.

Educational Presentations

Melissa presenting with a student in front of a tv screen

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

Slide from the digital design presentation about accessibility

Education around universal design inclusion from the start of the design process is a need on campus for graphic designers, social media content creators, faculty, and staff. One of the ways I’m helping champion this effort is by giving a Friday morning Caffeine Break presentation.

View the Design Accessibility cheatsheet online.

Browse the presentation website.

Web Components

Here are a few examples of the design files and the link to the toolkit builder to see them in action.

Project Management Challenge

Managing multiple groups with volunteer participation to implement the shared web components.

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

The workflow for the system starts with the UX team. It is then handed. off to the design team. Once the UX team approves, it is made into Components, and they are then populated in each CMS (WordPress and Drupal).

These groups are spread out across campus and rely on work outside of regular duties, therefore, the workflow 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 get momentum in this project and keep all groups up to speed. As this group has matures, we are currently 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 attach the design files to the records so each group can reference them. Additionally, we link to the toolkit builder, a spin-off project one of the amazing components team developer made for testing and building.

Call to Action component details in the project management software

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!

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

Additional Products Built from this Design System

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

Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.