All three college front pages All three college front pages

Design System


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. It will help 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 blue color to represent the brand. I verified 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

I chose the web font. It is a hybrid that combines modern proportions with a geometric appearance. A fellow UX Design Lead who works for a large toy company said, 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. The final design was the clearest in terms of accessibility, branding, and usability.

All three college subdomain examples All three college subdomain examples

As interests and skills surfaced, team members natural roles emerged. I created user flows, content patterns, and page templates. I tested for adequate white space and text color contrast for accessibility.

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

I rapidly prototyped recruiting and basic page designs. I tested how similar content layouts would look for each college.

Heros and subdomain components Heros and subdomain components

I designed and built front page banners w/ CTAs, and microsites. I tested how content patterns behaved when the window size changed for responsive design and readability.

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 the team built a new feature, I added a reusable component to the library.

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


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 reusable components, authored our Figma library, built prototypes, and wrote the CSS and HTML.