Design systems

In 2013, as part of a partnership between the Kuali Foundation and Indiana University, I started working on the Kuali Student project on the Core Design Team. In this role, I worked alongside the designers of several product teams, to encourage collaboration, alignment, and community. As such, I helped kickoff a UI pattern library called the Kuali Student Design Guide to start establishing standards and best practices. While the project didn’t have time to mature because of the dissolution of the Kuali Student teams, I learned about the complexities of such a system, such as maintenance, political buy-in, versioning, documentation, and governance.

The next year, I was assigned to one of several newly formed product teams under the university’s Enterprise Student Systems (ESS) division. After a year of understanding the technical directions of the products and the needs of the teams, I started development of the ESS Component Library, as a way to establish a common set of UI components, icons, and colors. The components were built using React, vetted by the university’s accessibility experts, and published to the university’s enterprise npm registry. Icons used a mix of custom and open source icons. A new color palette was adapted from the university’s brand colors, and color variations were systematically generated and codified. Over the course of two years, we published dozens of components and icons, while integrating them into about a half-dozen new products.

The university established the User Experience Office in 2016 to oversee design efforts across offices, departments, and schools. In collaboration with the university’s design and development communities, they maintain the Rivet Design System, and it has experienced an exponential growth in adoption. I am a regular contributor to Rivet, sharing many lessons learned from my prior design system projects.

In 2021, I lead the release of Rivet Icons v1. It provided various integration options, including tooling for generating icon sets. It introduced the first Rivet custom element (<rvt-icon>).