Boulder_Header

The Student Affairs Design System is an interal tool used for the development of CU Boulder’s digital products.

Year

2019

Role

System Design

Boulder_Graphic

Cohesive Guidance

During my time as a UX Designer for the University of Colorado Student Affairs Web Team, I was tasked in creating and maintaining a design pattern library with corresponding brand guidelines. The pattern library consisted of 500+ assets that would be used by a team of 5 designers and 6 developers. While the brand guidelines set the rules of how to use the assets in the pattern library. Current and future users continue using the brand guidelines to make sure that any CU Boulder app, website, or digital product has a cohesive visual infrastructure and passes WCAG AA accessibility standards.

Branding Tab Microinteraction
Calendar no mouse
Flyout Notifications

Design Pattern Library

The DPL process mainly consisted of compiling materials, standardizing in-house design practices, and creating an efficient structure for the assets. The main users of this new library would be the design team and the engineers. Exploratory sessions helped me empathize with the users’ needs, find common pain points, and gather insights. This allowed me to set some broad objectives to guide me through the whole process of designing the structure.

These objectives include:

• Promote individual creativity
• Enable the structure to grow with the team
• Bring the engineers and designers closer
• Have a versioning system to keep everyone in sync
• Standardize naming convention

After a few feedback sessions and revisions, the DPL was ready to be deployed. It was created as a Sketch library file and distributed to the team using Abstract. This way the DPL could be used for a variety of projects while making sure everyone uses the same version.

Boulder_SiteMock

Brand Guidelines

Documenting the design team's assets into a set of brand guidelines helped us have one source of truth. It helped us provide a catalog of the DPL assets, branding components and UI specifications. The brand guidelines were hosted in an internal server for SA Web team to use.

Boulder_notifications
Boulder_inputforms
Boulder_Colors2