King County
Overview
King County is a vast and diverse region encompassing over 60 agencies, including prominent ones like Public Health, Metro Transit, and the Department of Natural Resources and Parks. Currently, King County is undergoing a significant redesign initiative aimed at improving the web experience across the entire organization. This project seeks to modernize and unify the digital presence of all agencies, ensuring that residents and stakeholders have access to a more user-friendly, accessible, and cohesive online experience.
My Role
In the King County redesign project, my role was pivotal in creating a unified design system to bring consistency and modernity to over 20,000 web pages across the county’s diverse agencies. I developed a comprehensive UI kit in both Figma and Sketch, enabling efficient distribution of design assets and ensuring scalability. Additionally, I worked closely with developers to communicate design goals and ensure the seamless implementation of the new standards across all agencies.
Redesign Before/After
Impact
- Streamlined Workflows: The design system significantly improved efficiency for the systems team, reducing redundancy and accelerating the development process.
- Consistency Across Agencies: Over 60 King County agencies achieved a unified and consistent digital presence.
- Extensive Component Library: Developed a robust library of components and over 200 clickable pages of design guidelines.
- Enhanced User Experience: The design system provided a cohesive, navigable experience across mobile and desktop platforms, improving accessibility and usability for all users.
- Collaborative Testing and Iteration: Worked directly with agencies to stress-test and refine the designs, gathering feedback and iterating on the redesign initiative.
- Comprehensive Support and Training: Provided agencies with ongoing support through office hour meetings, formal workshops, and additional guidance.
- Improved Brand Ecosystem: The result was a more harmonious and efficient product and brand ecosystem, aligning King County’s digital presence with modern standards and user expectations.
Overall Process
Define: Our Users
The audience for both our front facing KingCounty.gov website and the internal Design Systems document can be broken down into the following groups:
Define: Pain points
- Global alerts are too disruptive and cause users to leave their sites or get frustrated by the interruption.
- Ads present on some of the county pages
- No standard way to find contact information for each agency.
- Too much jargon on many of the web pages, prevents users from accomplishing tasks.
- Information architecture is a maze, lots of dead ends
- Header menu is confusing
- Search is not optimized
Implementation
In the implementation phase, I collaborated closely with developers to build new components in Sitecore CMS, ensuring alignment with the updated designs. I conducted QA on existing components and created prototypes using the new designs to facilitate a smooth transition. Additionally, I supported content producers in understanding and utilizing the new components, and worked directly with agencies to help them leverage the design system, updating their web pages to align with the project goals.
Test with Agencies
We implemented a thorough engagement process to test and refine our new design system, working closely with each agency to address their unique needs. By gathering feedback and iterating on the designs, we ensured the system aligned with their requirements and could be effectively implemented across the entire organization.
The first step for agency engagements was to hold a kick-off meeting where we described the entire engagement process, ie. what to expect.
- Then we did an ethnographic interview.
- Mapped out research information collected from the interviews into an experience map (positive and negative interactions with users).
- Created a sitemap – updating existing architecture to new standards.
- Provide design prototypes using new components
- Engaged with editing their content using updated sitecore CMS
- Let agency take the wheel and leverage new components on their own.
- Hold office hours for agencies
Design System Process
- Engage with Agency to find out what existing user pain points are
- Find opportunities for new components
- Create high fidelity prototype of components
- After the UI kit for that component is built with its component properties, I created a design system where we went further into describing the use case of each component (component properties, when to use, when to avoid using, component states, best practices)
- Provided spec documentation for developers
- Provided additional information for content producers who will eventually leverage the components
Card Sorting Activity
Goal: Create the most useful navigation for the design system.
- Developers/Sitecore Specialists/Designers
- Card sort activity
- Analysis patterns and converged on the navigation
Quality Control
- Conducted side-by-side comparisons to show design vs development
- Communicated with developers – aligning on design details.
- This helped the team understand spacing throughout the site, from the perspective of the entire page as opposed to only looking at each component.
