Emily Gilles

The City of Seattle Design System

Seattle’s design system serves 40+ departments with many digital products. I designed components and wrote guidance to improve accessibility and consistency.

The challenge

The City of Seattle’s design system is used by over 40 departments, each with their own content creators, websites, and apps. Inconsistent styles and lack of guidance created accessibility barriers, lowered usability, and made it harder for residents to navigate City products.

The approach

I audited and researched to set a clear direction.

For each improvement, I started by documenting the current state, identifying accessibility and usability issues, and researching best practices. I paired this with targeted usability testing when possible.

I collaborated closely with development and content teams.

I partnered with developers to ensure components could be implemented across the City’s platform and wrote guidance for content creators so components would be used consistently and effectively.

I tended to the design system like a garden.

These three solutions are just a sample of the work I and my design teammates did to maintain the design system. It required constant maintenance and adaptation to the environment to make sure it produced accessible, consistent, and usable products.

  • I was one of 3 designers redesigning components, patterns, and style guidance for the City of Seattle. I collaborated closely with developers and departmental content creators.

  • Design systems, user research, UX and UI design

  • I prototyped in UXPin. Our design system documentation lived in UXPin as well. I worked within a content management system called Ingeniux to implement new components. I used Userlyics for remote usability testing.

The solution

Text links with better accessibility and hierarchy

I conducted a text link style audit (PDF) and found that the most common link style (bold and blue) wasn’t accessible for people relying on more than color cues, and it reduced flexibility for visual hierarchy. I designed a new link style with hover, focus, active, and visited states for both light and dark backgrounds, and worked with my developer partner to implement it globally. I also documented best practices for content creators and vendors.

 

Left navigation with more obvious location cues

Usability testing revealed that users often didn’t know where they were on a site. The existing location indicator relied on color alone, and the dropdown arrows didn’t follow conventions. I redesigned the left navigation to add an accessible location cue and updated the arrow patterns to match common interaction models. I also worked with the developer to rebuild the menu so it auto-populated with correct links, reducing content errors.

 

Map guidance for better accessibility and findability

Many departments use maps to communicate with residents, but creators lacked guidance for making them accessible and mobile-friendly. I created standards for color schemes, headers, and placement, ensuring maps met accessibility guidelines and could be more easily found by residents.

 

The results

  • These changes removed accessibility barriers, created more predictable interactions, and helped content creators publish more consistent and usable experiences across 40+ websites and apps.

  • Departments can now implement accessible link styles, clear navigation patterns, and compliant GIS maps without starting from scratch.

  • These three examples represent just a portion of my design system work for the City of Seattle.