A robust design system built with cutting-edge technology

In 2020, we were faced with not only rebuilding the College’s ecosystem of websites due to an impending technology change, but also with the Herculean task of completely reimagining how we did it and why. In the midst of a pandemic and learning to work remotely. While having a vacant web manager position due to hiring freezes. Over the course of 18 months, we worked diligently to do so, launching the products in 2021.

When the team set about to develop this system, we decided to not follow the status quo, but set a trailblazing path for the College. Fully embracing the emerging WordPress Gutenberg technology, we took a new approach to web design and development, centering the democratic and modular nature of the technology to build a system that is flexible yet consistent. This also came with the development of the College’s first-ever Design System – a set of philosophies and guidelines for the team and others to follow to ensure brand and user experience consistency.

The Design System was built into the Theme “Forty-Two,” which is now used to power Michigan Engineering’s main College site, its News site, and eight departmental sites.

This project required:

• Different ways of coding and interacting with WordPress, designing with a “block-first” approach. These component-based design systems are becoming increasingly relevant for big brands, and the team’s work to move us into this space early has set the College up for future success.
• A fundamental shift in the way the team thought about and approached design. Rather than prescribing the way parts of the design would work together, each and every piece of the system had to be designed, built and tested as a robust standalone component.
• Using WordPress’s new editor, Gutenberg, during a time of rapid innovation challenged the team during the entire process. New releases and features were constantly being added by the WordPress community. At times it was like building a ship while at sea.
• The approach we chose ultimately places a lot of power in the hands of editors. It required us to consider guardrails and guidance at every turn, and a great deal of training for users.