University-wide web components, templates, and pattern library
2020-23
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.
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
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.
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.
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
View the website for the Digital Accessibility overview presentation given to multiple Agriculture Communications classes at Illinois.
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.
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
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.