The City of Seattle has a design system that is used by over 40 departments, all with different content creators and websites. Here are a few examples of how I designed components, styles, and guidance that work with the City’s content management system. As a result, residents had a more consistent, accessible, and usable experience using City websites and apps.
Updating text links for better accessibility and hierarchy
The problem
The City’s website and other digital applications did not use consistent text link styles. There were different shades of blue, hover styles, and visual indicators.
Findings
I conducted a text link style audit (PDF) with research on accessibility and usability best practices. I found that:
The most common link style (bold and blue) needed another visual link indictor to be accessible.
The bold and blue link style made it difficult for content creators to control visual hierarchy on the page.
Solution
I designed a new link style—including hover, focus, active, and visited states for light and dark backgrounds.
I worked closely with my collaborator on the development team to implement this new style globally, providing documentation and QA help.
I also wrote style guidance for content creators and vendors.
Before:
After:
A sample of my color contrast audit:
A sample of my documentation for developers:
A sample of my guidance for content creators:
Making the location cues more clear in left navigation
The problem
Usability testing showed the people were often confused about where they were on the site because of the design of the left navigation menus.
My UX analysis findings
The menu used blue text to show what page you are on. Using color alone as a visual indicator is an accessibility issue.
People often mistook the dropdown arrow as a location indicator.
The dropdown arrow did not follow conventional patterns. Arrows often point down when a menu is collapsed and up when open.
Users could not jump to content in the dropdown menu without loading the parent page, which slowed them down.
Content creators often misused the left navigation menu by adding non-local links. This confused users even more about their location.
Solution
I designed a new left navigation menu with accessible location cues.
"This gray color shows me where I am on the website."
-Usability study participant
I also designed a way for users to jump to child pages without having to load the parent page.
“This arrow is a hint for me that if I click on it, it will open up an additional menu with some options.”
-Usability study participant
I wrote style guidance about what pages should have left navigation and what links should go in left navigation menus.
The development team was able to use my guidance to rebuild the left navigation component in a way that automatically populated the menus with the correct links.
A sample from my documentation for developers:
A sample from a presentation I gave on how to use left navigation:
A sample from my guidance for content creators:
Creating guidance for GIS maps
The problem
A popular way for city departments to communicate information to residents is through maps. However, it was difficult for map creators at the City of Seattle to make their maps accessible, findable, and mobile friendly.
The solution
I created guidance for map creators on color schemes, headers, and where to put their maps.
From my guidance on using a standard header:
From my guidance on using accessible and meaningful colors:
From my guidance on making maps findable:
