How We build the Excelsior Design System
Accomplish more with less as a small but mighty product design team
Inception
When I first joined the national clearinghouse in November 2019 as a part of the newly formed design team of two. The organization never had one single full-time UX designer before that. Over the years, different agencies and consultants have left so many digital legacies that can only be described as “archaeological lasagna”. How to build modern, consistent, easy to maintain UI and improve user experience while working with small teams, and at the same time transitioning to new technology. This is no easy task. The product manager who welcomed me to his team said to me with sympathy: “I don’t envy your job.”
NSC has a wide range of products, which function more or less like micro-businesses within the organization. They serve a wide range of customers, from universities, education organizations, background screeners to students. The digital experiences that were created over the years for various products were not consistent and some of them are extremely outdated.
As a design team of two, we both quickly realized that if we were to create consistent, modern digital experiences, we would definitely need some standard to follow and this standard didn’t exist at the time. Well, we have a corporate style guide which has basic guidelines of brand colors and typography, a very limited color palette, and the type system was nonexistent. We had to create everything by ourselves!
We were at the time designing for several products. Each following slightly different branding for very different audiences. So we slowly designed our way through products while building our design system building blocks by pulling those components from the things we built. We also surveyed all the big tech companies’ design systems like Google’s Material Design, Adobe’s Spectrum, Salesforce’s Lightning design system, IBM’s Carbon Design System, etc. We quickly discovered components and principles that work for these companies, they may not work for us. As beautiful, polished and definitive sounding as they all are, They all serve very specific use cases, data types, user flows and business needs. We cannot just copy their components and turn them into ours. Even when they have 500+ person design teams and we only have a two person team.
Two quickly turned into three after a few months. The three of us worked through those early inception months and we had the first version of our own design system ready. We named it Excelsior. That was January 2021. A little more than a year after we started. We then had a small budget to hire a part-time contractor UI developer to help us build the library in code. We reviewed all the components we built so far and all the color and font styles and she helped us build everything in the next few months.
Promote the Design System as a Product
After the first version of the design system was built, we started the work to promote the design system to the organization. We created a 5 minute video explaining what a Design System is, why it’s important and what are its benefits. A colleague from the relationship management did an amazing voiceover for us for the video. Executive buy-in is essential for initiatives like this since we are trying to bridge product and development with design system. As the team lead at the time, I presented the key benefits of design system like consistency, efficiency, scalability and accessibility in the video and showed the potential and inevitability of the Design System to the executive team and got their full support. We then worked with our internal Common Services team and created a Design System Governance Statement and worked with them on a regular basis to resolve issues, review new components, and optimize work processes.
Bring New Designers Onboard
In 2022, with two more designers onboard, we had an urgent need to bring them up to speed and start designing. The design system became their biggest help. We quickly recognized that involving them and start auditing and updating the design system is the fastest way they learn our design language and start contributing to the components. We started the auditing project in September 2022 and 4 months later we had Excelsior 2.0 ready to go. The newly designed components leveraged new features like variants, auto-layout and nested components in Figma so they are far more adaptable. The need to detach an instance from the main component and do cumbersome custom changes drastically decreased.
We also started another project to document UX patterns, which are bigger organisms that allow more complex user actions such as uploading data, downloading reports, searching for a school or students, etc. These are the recurring patterns across our products and we don’t want to reinvent the wheel every time. More importantly, we don’t want the experience to be very different for different products, since we do have a large number of customers using more than one of our products, especially school users from the registrar’s office. It turns out the process of documenting and optimizing recurring UX patterns is extremely effective in helping new designers to navigate their day-to-day product design work and the benefits do not stop here.
In September 2024, with the release of Figma Variables earlier that year, we started rebuilding our design system using variables. We specified variables for Color, Type and Spacing systems and started building variable modes for different devices. We also invested time to structure our design tokens properly so they can be consumed by different endpoints like the Web, iOS, Android, etc.
Reflection
The primary goal of a design system, which is to establish a single, unified visual language, one that everyone adopts, and doesn’t alter constantly sometimes conflicts with the need to innovate and adapt to change. As a result, design systems tend to fall apart, or designers are left feeling creatively stifled. Or worse—both.
I think there’s a solution. We tapped into a designer’s inherent desire to evolve or even completely rethink parts of our system. We created a paradigm wherein our designers do not view themselves as users of the system, but instead see their role as core contributors and co-authors of a shared system - one that they have ownership of. In this world, they’d be building the system, rather than fighting it.
The result is quite extraordinary. With a 4 person design team, including myself as a manager, plus a 5-8 hour per week UI developer who helps us with design system component development work, we are able to support 11 products serving different audiences while maintaining and constantly updating a design system that serves a development organization of more than 60 developers. New products are built based on the foundation of the design system, and in turn bring opportunities to create it anew. Under my leadership, we were able to accomplish more with less.
