All three college front pages All three college front pages

Design System

The Goal

Seattle Colleges is a multicollege district. The goal of this project is to visually communicate that Seattle Central, North Seattle, and South Seattle are connected and part of the same district family. My role was to create and implement design standards across all platforms.

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 and followed our path.

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

The Outcome

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.