Unifying the US Courts design system while automating accessibility
Project type
Web
My role
Lead UX Designer
Company
Agileana / US Courts
Year
2023-2024
Why this project is important?
Redesigning the US Courts’ design system with a focus on accessibility was a strategic effort to ensure that everyone—no matter their ability—can easily access important government information. Accessible websites are essential for fostering inclusivity and public trust, as they connect all citizens to their government. This project required careful planning and collaboration to create a user-friendly experience that meets high accessibility standards, giving everyone the same opportunity to navigate and understand vital resources.
Project and contribution summary
In this project, a template system was created for the UC Courts websites. This included the main UCCourts.gov website along with 300+ lower court websites.
What I did:
Content and Design Strategy: Reviewed research to prioritize essential information, designing layouts that improved content discoverability and user focus.
Created Scalable Design System: Designed a flexible design system for 300+ court websites, balancing customization with strict accessibility controls.
Adaptive Strategy: Pivoted from court-type layouts to content-based layouts, addressing unique needs identified through research.
Created Alignment: Facilitated discussions to align stakeholders on key design decisions, addressing concerns and building consensus around design.
Testing Strategy: Developed and executed a user testing plan to validate the effectiveness of the information architecture and key components.
Iterative Improvements: Made research-driven adjustments to the information architecture and components, ensuring a more intuitive and accessible user experience.
Goals:
- Create a cohesive look across all court websites while allowing customization
- Ensure WCAG accessibility standards are met across all design elements
- Improve usability and information architecture
What happened:
- A flexible design system with built-in accessibility controls
- User-friendly templates refined through iterative testing
- A consistent yet adaptable digital experience for all courts
Hero mockups
USCourts.gov
Lower courts
Inclusive design through a strategic process
This section highlights how accessibility and strategy were integrated to create an inclusive user experience. By aligning accessibility best practices with client objectives, I developed solutions that ensured compliance, usability, and scalability, meeting the needs of all users while driving organizational goals.
Establishing a content and design strategy
Research conducted by an external agency revealed that finding certain information was the top priority for users. I reviewed these findings and crafted a content strategy that made certain information easy to access, while deprioritizing less important content. This content prioritization would be reflected in design layouts to highlight essential content and improve site usability.
Creating an accessible template and design system
Designing a template and design system for over 300 court websites required balancing flexibility with accessibility. Courts wanted to customize their color palettes but we needed to ensure all options met accessibility standards. A system for controlling color selection was implemented to prevent admins from using non-accessible colors. This allowed courts to maintain their unique identities while guaranteeing an accessible experience for all users.
A deeper look at accessibility
1. Creating the color palettes
We developed a predetermined set of color palettes for courts to choose from, and tested to make sure the colors worked well together for different types of color blindness.
2. Testing the colors
Each color was carefully evaluated to determine its appropriate use in various contexts making sure when applied as a background or foreground color, it was accessible.
3. Applying the colors
Components were designed to automatically pull colors from the selected palette in an accessible manner, with customization options limited to specific elements. We defined which parts of the components editors could modify to maintain consistency and accessibility.
4. Automating accessibility
To streamline color selection, we implemented automation within the content management system (CMS), restricting editors to a specific range of colors. For example, when a dark background is selected, the text color automatically changes to white, preventing editors from altering it. This approach provided flexibility for editors while safeguarding accessibility across the design system.
Evolving the layout strategy
The original idea was to differentiate court types by layout. However, research showed that courts of the same type often had varying content needs and priorities. The design strategy was changed and layouts were created based on content needs, not court type. This better addressed user and organizational priorities.
Iterating through user testing for optimal design
Several rounds of user testing were conducted on the information architecture, components, and navigation. When tests revealed issues, designs were refined and retested until positive results were achieved. This ongoing process of iteration ensured that the final designs were clear, intuitive, and easy for users to navigate.