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
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.
Together we had decades of institutional knowledge. We chose historical secondary colors for each college. I created tints and shades.
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.
As interests and skills surfaced, team members natural roles emerged. I created user flows, consistent logo lockups, and icons for audience pages.
I rapidly prototyped recruiting, and basic page designs.
I designed, and built front page banner w/ CTAs, and microsites.
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.
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.
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.