Industry

Education

Client

UMD

UMD Design System

A top university’s first ever design system

The University of Maryland has over 1,300 websites. Built on different systems, templates, and technologies, everything about these sites is difficult to manage, and detrimental to a cohesive brand. As the UX and digital design lead for the university’s digital team, my team and I sought to create a design system that would address consistency and accessibility issues, as well as minimize design and technical debt.

Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #1
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2
Project Gallery Image for 50% width of the screen #2

Process: comprehensive and ever evolving

As is commonly the case, our design system is in continuous development. It is refined and iterated as we get more feedback and optimize it for both a range of design and development processes. We started with an interface inventory of the existing university sites to determine the functionality and components we should standardize across properties (shown below). We then assessed each component for broad usage began design. The design style was largely based on the university’s existing brand guidelines, with needed adjustments to allow a scalable and neutral framework that would be compatible with most of the university’s websites. In addition, we had the job of selling the design system to other parts of the university. We sought to encourage adoption to maintain brand and accessibility standards. Presentations to stakeholders have been an important part of the work.

The image featured in the carousel #1
The image featured in the carousel #1
The image featured in the carousel #1

Documentation is (almost) everything

Our documentation site accounted for a lot of the hours spent by my team. We wanted to create thorough documentation to outline component requirements and options, layout optimization, and best practices. We endeavored to be a one-stop resource to answer questions for designers, developers and content editors, with plans to create more resources in the coming year.

screens from documentation site
screens from documentation site

Results that speak for themselves

Our team has successfully used the design system on several projects and it has been used on several projects outside our team as well to stand up websites much faster than had previously been possible.

400%

400%

increase in design velocity using the university's new design system

increase in design velocity using the university's new design system

Main Project Image