University-wide design system, prototypes, and web components
2020-2023
The Problem
Prospective students want to easily identify official college websites for the University of Illinois because various site designs and inconsistencies create confusion and uncertainty during their application process.
Examples of various home pages from colleges within the university:
The lack of shared brand identity across various colleges and units creates a fragmented user experience, leading to web platform inconsistencies, design variations, and accessibility problems. This disjointed approach not only hampers the university’s reputation but also results in duplicated efforts, causing substantial financial burdens.
As a result, the University’s Marketing & Branding office aims to address this issue by implementing a robust and consistent Illinois brand. Departments and units within the university should unify all web platforms, designs, and accessibility standards. The challenge lies in creating a human-centered solution that ensures prospective students can easily recognize official university websites and enjoy a seamless and cohesive experience throughout their journey. Additionally, the solution should encourage collaboration among different colleges and units, eliminating duplicative efforts and optimizing financial resources for the University.
The Team
An initial team of eight was 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
- UI Design
- Project Management
- WCAG Compliance
- UX Design
- Testing
- Leadership
Timeline
10 weeks to create the first working version, additional projects after
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
Design System
(v3.0 is a work in progress)
Create a design system to share with developers and campus designers.
Solution: Figma
I took my current College of ACES designs and additional patterns used across campus and put them into a new design system.
Currently, I am training a group of junior to mid-level designers in web design and accessibility while we are migrating the design system to a Figma library.
Design System Figma Prototype
Accessibility Challenge
Illini Orange is not an easy color to make widely 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 than the Illini Blue color. Incorporating it into our designs is very intentional due to the limited colors we can use with it for a compliant accessibility outcome.
Most designers on campus tend to use white text on the orange background at all sizes. The orange text on white is not accessible in small sizes. We created themes for the design system to use.
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
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.
Browse the presentation website.
View the website for the Digital Accessibility overview presentation given to multiple Agriculture Communications classes at Illinois.
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.
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
An interactive tool designed for both students and parents. Dive into the rich variety of programs offered by the College of ACES, using a dynamic filter and sorting system.
Witness the evolution in Figma of the IL Design System, as it transitions smoothly from lo-fidelity to hi-fidelity components, maximizing the efficiency of the design process.