University-wide web components, templates, and pattern library
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 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.
- Technology Services
- Strategic Marketing & Branding
- IT Accessibility
- Colleges – ACES, LAS, Grainger Engineering, Education
- Project Management
- Visual and UI Design
- WCAG Compliance
- User Experience Design
10 weeks to create the first working version
WordPress template using components
- Adobe XD
- Microsoft Teams
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 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.
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.
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.
View the slides for the Digital Accessibility overview presentation given to multiple Agriculture Communications classes at Illinois.
View the slides for the Digital Accessibility talk given to campus designers and content creators.
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.
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!