All three college front pages All three college front pages

Design System

Goals

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

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

Brand blue

I formed a small design team with four graphic designers. Our first task was to pick one brand blue to represent the colleges. I made sure the final blue (#0c489b) had a high contrast ratio (8.69 AAA) for accessibility.

Brand colors, neutrals, tints and shades

Together we had decades of institutional knowledge. We chose historical secondary colors for each college. I created tints and shades.

Proxima Nova web fonts

For our web font I chose a hybrid that combines modern proportions with a geometric appearance. It's a solid typeface. A fellow UX Design Lead who works for a large toy company recently texted Can't go wrong with Proxima Nova.

Our design group showed three header concepts. We each designed many rounds of ideas, went back and forth, and whittled down to these together.

All three college subdomain examples All three college subdomain examples

As interests and skills surfaced, team members natural roles emerged. I created user flows, consistent logo lockups, and icons for audience pages.

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

I rapidly prototyped recruiting, and basic page designs.

Heros and subdomain components Heros and subdomain components

I designed, and built front page banner w/ CTAs, and microsites.

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

The web development team created Drupal themes and templates from my prototypes. When we built a new feature for one college, I created a component that could be used by another with a small amount of CSS, HTML, and imagery.

Forms designs Forms designs

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

I assisted communications and marketing teammates in building out the information architecture. Based on a student usability survey, I sketched flexible templates for the user journey, wrote meaningful navigation item names, and implemented a menu hierarchy.

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 designed and built reusable components, Figma library, prototypes, and wrote the CSS and HTML. The design system is continuously finding consistency and being applied to the production environment.