University of Georgia Case Study
The Office of Online Learning (UGA Online), which has multiple websites and complex audiences of its own within the community, brought in Sparkbox to build a design system and to highlight and explain its value to others in the UGA community. Their ultimate vision was to see the tool evolve to serve teams beyond their own across the whole campus—a university-wide design system that prioritizes accessibility, efficiency, and consistency.
Onboarding First
Our team wanted to begin this project by thoroughly understanding the needs and vision for the Office of Online Learning's design system. It was important for Sparkbox to gain clarity on UGA Online needs, but we also needed to be mindful of the design system's potential to be used beyond UGA Online. We conducted interviews with members of web teams across the university to learn about their process for creating digital properties as well as their needs, goals, and pain points. We reviewed our findings from those interviews and other research with the UGA team in-person to help us identify the best path forward—including some potential strong allies who could help us advocate for and positively influence the UGA Online design system as it evolved. Armed with these insights, we were ready to start work on a system that would serve the UGA Online team's needs immediately—and the broader university's needs in the future.
UGA has recently addressed brand consistency across the university. There are nice, robust brand guidelines in place now. The next logical step is to apply brand consistency at the website level. It makes sense to create one system that can apply to many different units across campus.
Strategically Building Buy-In
We've found that when it comes to creating support for a design system, a grassroots effort is often needed. Particularly with higher education institutions, an institution-wide mandate is unlikely. Instead, you need to create a system that people want to opt into. In situations like this, it helps to start early with community members whose enthusiasm and advocacy will drive successful outcomes. Keeping stakeholders informed and invested in the goal helps to drive the collaboration needed to build investment on a larger scale.
Early in our engagement, we worked with the Online Learning team to select potential early adopters who could eventually implement the design system beyond UGA Online. Using the information that we gathered during Onboarding, we identified and prioritized specific components that would benefit this critical group. We made sure that universally helpful components, such as the site header and form elements, were prioritized. We also worked with UGA Online to identify important external stakeholders who needed to be kept aware of the project's progress. We created a communication plan for each stakeholder, strategically deciding when we would bring them on board and how we could speak to them with clarity and intention about the potential benefits of this design system.
In order to get behind the approach, people need to understand exactly how centralizing the design is going to benefit them.
Working Faster & Smarter
On every project, Sparkbox is focused on finding opportunities to provide both quality and efficiency for our partners. Like many higher education institutions, UGA Online came to this project with a finite budget, and we were dedicated to finding every possible way to protect their budget while maximizing the work we could do.
Fortunately, this wasn't the first time we'd considered how to jump-start a design system project. Sparkboxers realized during earlier projects that many steps must be repeated every time a design system gets off the ground. Our team built a design system starter to help eliminate this duplication. We used Drizzle (a tool we use frequently for design system projects) to build out a customizable template that automates the initial steps on a design system project and cuts down the time needed for project set-up. The starter kit includes many starting points for the necessary spacing, layout, colors, and typography systems—the building blocks of a design system.
Using this design system starter on the UGA project shaved days off of the time we usually spend setting up the code base for a new project. Every day saved was time back in the budget that we could put toward creating additional templates, conducting more accessibility tests, and finessing our documentation—the work that creates the most value for our partners at UGA.
Using What Exists
From the outset of this project, UGA Online had the opportunity to determine whether they wanted to fully redesign the website or concentrate on the design system. They opted for the design system, an approach that made good use of their well-established brand while setting the stage for long-term success by creating a reusable library of components.
We wanted to allow for constant iterative changes based on user experience and needs rather than just turning over the site in one fell swoop every couple of years.
To serve this goal, our tech lead conducted a thorough audit and documented the 75 different components he found across the online learning websites. From this starting point, we shared recommendations for eliminating inconsistencies, documenting use guidelines, and making sure that all components were brand-compliant, usable, and accessible.
The Sparkbox team then set out to rebuild each component using best practices in CSS architecture, JavaScript development and testing, and web accessibility. Components and extra styles, called utilities, were documented in Drizzle to help future developers who would interact with the design system understand how to use the code. The system was intentionally built to be platform-agnostic so that it could be used by any of UGA's technical teams working in any platform.
At the end of our engagement, we were pleased to join the UGA Online team in Athens for an in-person training session that was attended by their early adopters and some of their project stakeholders. With this bow on top, the Online Learning team now has a library of validated components in Drizzle, documentation on how and when to use each one, and a recorded training session that can be shared with future adopters as use of the system grows.
Becoming Experts
Throughout the project, the UGA Online team worked diligently within the university community to build understanding of and buy-in for the design system. The UGA Online team has been presenting their work broadly with the university community, and Sparkbox has supported these efforts by reviewing their presentations to ensure they accurately describe the benefits of design systems and complement our team's strategic plan for building investment with stakeholders.
So far, the team has been remarkably successful. The more folks have learned about the design system and the problems it can solve, the more excitement and investment has spread across the university teams. Franklin College, which is the founding college of the University of Georgia and represents 30 academic departments (and more than 100 websites!), is implementing the design system as well. The Office of Online Learning has been asked to present their work with the design system multiple times to other interested groups in the university, becoming in-demand experts on design systems as a solution for the University.
We've started to see other colleges within the university start to explore the design system, which is good for the whole. We're happy to be able to say, 'It's here. Who wants to use it?'
