All three college front pages All three college front pages

Design System

Goals

Seattle Colleges design system's goal is to renew the user experience at Seattle Central, North Seattle, and South Seattle from the ground up. It helps teams achieve higher efficiency, consistency, and scalability when building digital products.

Role: Design lead, branding, user experience, components library

College colors and fonts College colors and fonts

I formed a small design team with four graphic designers. Together we had decades of institutional knowledge. Our exploratory work was based on print materials, websites, and each campus's physical environment. We noticed that South had a burnt orange color that kept popping up, North's campus is covered in trees and ivy, and Central had just adopted yellow for their 50th anniversary celebration.

All three college subdomain examples All three college subdomain examples

As interests and skills surfaced, team members natural roles emerged. There was an overall willingness to work together which elevated each iteration of the project.

All three college go and basic pages All three college go and basic pages

A secondary color to delineate one college from another made sense and our communications colleagues favored that route.

Heros and subdomain components Heros and subdomain components

A small cross-functional group from our larger team (communications and web development) proposed our plan to college leadership. With their blessings we gained momentum.

Mobile view for all colleges cta and basic page layouts Mobile view for all colleges cta and basic page layouts

We unified through sharing. The web development team created Drupal themes and templates from prototypes. When we built a new feature for one college we created a component that could be used by another with a small amount of css and imagery.

Forms designs Forms designs

We overhauled elements from third party systems like email templates, and forms.

Components library built with Figma Components library built with Figma

Outcomes

My role was to guide the team through the process of creating a design system and partner with them to execute their vision. I built a components library, prototypes, and wrote the css and html. The design system is continuously finding consistency and being applied to the production environment.