Why We Made a Design System
Explore the circumstances that enabled a small team at a R1 research university to create a web design system for the first time.
One thousand, six hundred and fifty one websites.
That’s how many unique Texas A&M University websites I found in the fall of 2022 — and I’m not convinced I found them all. I had been asked to conduct a website ecosystem audit to get a birds’ eye view of the state of the web at our university — possibly for the first time ever.
Going through hundreds of websites made a few things very clear about the Texas A&M website ecosystem. There were vast inconsistencies in several themes:
- Brand compliance
- User experience (especially as related to wayfinding)
- Accessibility compliance and monitoring
- Analytics installation and usage
- Hosting and website management (CMS)
A bit of history
Over the course of decades, websites at Texas A&M had been made by multiple people using whatever resources and skill sets they had available at the time. From an organizational perspective, the university used a “decentralized” model for “support units” — things like IT, HR, and communications.
However, in 2022 we found ourselves with a unique opportunity: multiple “service” functions were being centralized at the university, including marketing and communications functions. While this would be short lived (the Division of Marketing & Communications would see a major change in size, scope and strategic direction less than two years later), it led to the existence of possibly the largest centralized web team that has existed at Texas A&M in its history.
Now to be clear, we were still a small team — about twenty people in total, with responsibilities to various units within the university from which most team members had been “centralized” from. Compared to 1.5K websites, that’s definitely not enough manpower to make a dent.
But still, we knew that this was an opportunity to make a big difference if we took a big swing.
So what could we do at this pivotal point in the history of websites at Texas A&M? What could we do to set a course to improve the experience and effectiveness of our website ecosystem as a whole? How could we utilize our special skills and expertise to make a difference?
With a passion for making waves, we set our eyes on making a design system for Texas A&M University.
What is a design system?
According to Nielsen Norman Group’s Design Systems 101, “A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.”
Dan Mall breaks out design systems into six different kinds — from brand identities as design systems to design systems as practice.
Of Dan’s different kinds of design systems, his favorite type is “products as design systems,” and he uses this definition:
A connected, package-managed, version-controlled software product that contains the smallest set of components and guidelines an organization needs to make digital products consistently, efficiently and happily.
Ultimately this somewhat technical definition is what we aimed for. We set out to create something that was helpful to designers, developers, and even content contributors to quickly and easily make brand-compliant, accessible and human-centered websites. We wanted the main deliverable to be code that was maintained and improved upon over time using continuous delivery and continuous integration principles. And we succeeded in making that — and much more.
Learning while doing
No one on the project team had ever worked on a design system before, and it was a big learning curve for all of us. At times we may have been too focused on the trees to see the forest — heck, we may have been too focused on the leaves — but ultimately we grew and learned together.
At the time, our dedicated design system project team ended up being six people:
- 1 director (product owner)
- 1 information architecture manager (UX research and design operations)
- 1 UX development manager (UX design and front-end development)
- 1 UX designer (UX design)
- 1 full-stack developer (front-end development and pipeline management)
- 1 junior front-end developer (front-end development)
As I said earlier, this was a big swing. A really big swing. We knew that this might be our one chance to tackle this idea, and we had to make it count.
A big swing with a big deadline
If creating a robust design system wasn’t a big enough challenge, we also decided that this was our best opportunity to rethink our university website (www.tamu.edu). It made sense that the best way to get the design system off the ground would be to use it on our flagship website; this would be the best way to convince other websites to use our cool new design system!
Our leadership set an aggressive goal for launching the new university website: winter break of 2023. That gave us one year to research, design, and code a design system robust enough for the university website while simultaneously restrategizing every aspect of the university website, from primary audience and purpose to information architecture and every piece of content.
