College Design
System

How we visually unified a family of colleges.

  • North Seattle go page
    North Seattle go
  • Seattle Central go page
    Seattle Central go
  • South Seattle go page
    South Seattle go
  • North Seattle header
    North Seattle header
  • Seattle Central header
    Seattle Central header
  • South Seattle header
    South Seattle header

I guide the team through the process of creating a design system and partner with them to execute their vision. I try to clarify, simplify and balance what we are communicating.

The challenge

To visually communicate that North Seattle, Seattle Central, and South Seattle College are connected and part of the same district family. The visual identity for each campus is vaguely connected. Historically each campus did their own thing and operated as separate institutions.

Image campaign for all campuses
Image campaign for all campuses

I collaborate with communications specialists and marketing professionals, senior designers with a career in print design and web developers with a range of front-end and back-end expertise.

The goal

Design and build components once and use them across all platforms. Work within the existing brand guidelines to refine and update lockups and colors. We focused on tightening things up and identifying patterns.

Basic page for all campuses
Basic page for all campuses

My role as web design lead is to implement design standards and oversee consistency to the visual design across all platforms.

The outcome

We connected all campuses with one brand blue color and represented individual campuses with a secondary color. We designed templates for each step of the user journey. Each area of study prints a list of programs (the bread and butter for each campus) to explore. Each program offers degrees and certificates.

Areas of Study flow for all campuses
Areas of study list » area of study » program

Designing and building flexible templates that connect to a single curriculum database was a leap forward for the colleges. Students are less likely to receive conflicting program information.

  • North Seattle hero
    North Seattle hero
  • Seattle Central hero
    Seattle Central hero
  • South Seattle hero
    South Seattle hero
  • North Seattle microsite
    North Seattle microsite
  • Seattle Central microsite
    Seattle Central microsite
  • South Seattle microsite
    South Seattle microsite