Enhancing government website navigation at scale with research-driven, accessible UI patterns
From chaos to harmony: bringing consistency and improved readability to 14 types of navigation components across multiple government design systems
Project overview
Government websites faced two key challenges in their navigational components (in-text links, side nav, horizontal nav, link-lists, buttons etc).
Problem 1: Inconsistent design and affordance in navigational components
Navigational components lacked consistency across states (default, hover, focus), with focus states often failing WCAG standards. Despite being a known issue and multiple attempts to resolve it, no solution provided a consistent, scalable approach. As new designers and developers rotated in, they created new components, only for the same design inconsistencies to resurface.
Problem 2: The default UI pattern for in-text links is not accessible
The standard design for in-text links fails to meet the needs of users with reading barriers, such as dyslexia. While WCAG guidelines focus on perceivability, they do not sufficiently address readability challenges, allowing websites to pass WCAG compliance while remaining inaccessible for many users.
To address both problems, I designed repeatable, foundational UI patterns that could be applied across all navigational components and states. My accessibility-first approach considered how people read, see, and interact with content online. I conducted research to understand the reading challenges users face, bridging the gap in WCAG guidelines to create patterns that enhance readability and accessibility for diverse audiences.
By documenting these UI designs in the design system as foundational patterns for navigational components, I ensured a scalable long term solution regardless of team changes.
My role on the project
research, design, co-ordinating development release, comms.
Project achievements
Established consistency
Foundational design styles enable a consistent design pattern to be established and applied across over 14 different types of navigational components. These patterns span multiple government design systems and cover all states (hover, focus, active) and variants, ensuring a cohesive and unified user experience.
Enhanced accessibility beyond WCAG standards
While adhering to WCAG standards guarantees accessibility in terms of perceivability, it does not specify guidance around ensuring that letters and words can be correctly identified and comprehended. These design patterns surpass WCAG guidelines, providing significant improvements in the readability of all navigational components.
Modernised UI
The user interface now features a cleaner, modern aesthetic that prioritises accessibility and enhances the user experience. Guidelines on line weights and colour improve readability, reduce visual fatigue, and create a sleek interface through progressive enhancement.
Before and after
Drag the slider left and right to see how components looked before and after.
The design process
Guided by the Triple Diamond model and utilising design thinking strategies, I was able to identify, understand, and empathise with the key audience. This enabled me to unearth the root causes of problems and implement solutions aimed at addressing problems at the core, rather than resorting to quick fixes.
Auditing the website and design system
I explored where and how design and accessibility issues emerged across websites using the design system. My focus was on how navigational components were displayed. This examination unveiled the following key findings:
Significant use of in-text links
Due to the nature of government websites, cross linking content is common practice.
Aesthetic distractions
There are so many links the underlines overpower content.
Inconsistent UI patterns
Inconsistency in affordance and design across components, particularly in focus state. Focus state also didn’t meet contrast requirements.
Understanding the accessibility problem
While the benefits of underlining text links for accessibility and familiarity are evident, my focus was on uncovering the challenges and drawbacks associated with this practice. Through research, I identified two key pain points:
Content readability challenges
Underlined links overlap with letters like j, p, g, q, and y. This hinders correct letter and word identification for some readers and adversely affects content comprehension.
WCAG limitations
The Web Content Accessibility Guidelines (WCAG) currently offers limited guidance for addressing cognitive disabilities and reading difficulties, particularly in terms of letter/ word identification and comprehension.
Defining the audience
Through comprehensive research exploring how people read, barriers to reading, and existing accessibility guidance, I was able to define and categorise an audience affected by this problem into three key groups:
Citizens with cognitive barriers to their reading ability
Cognitive barriers include low literacy, dyslexia, difficulties in comprehending overly technical content, reading in unfamiliar languages, and struggles with typography that is hard to read.
Citizens experiencing physical barriers to their reading ability
Physical barriers can be situational such as viewing content on low-contrast screens or in bright sunlight, or permanent such as vision impairments, and motor control limitations.
Citizens with impaired vision
This broad category encompasses individuals with vision impairments and colour blindness.
Defining the root cause of the problems
Rather than jumping straight into solutions, I took the time to understand the root cause of the problems. I merged the findings from my research and audit to understand why and how these issues were happening.
While some issues, like the extensive use of in-text links and overly long links required recommendations to be made to content writers and publishers (which, in government there are a lot of), I focused on what I could directly change and influence in my role as a designer.
To uncover the root causes of the problems I used the “5 whys” strategy, and identified the following core issues:
- The standard design of HTML links overlaps with letter descenders.
- The standard underline beneath in-text links is very prominent, and while this is beneficial, in can also be distracting when overused.
- List items are often used for links, and currently lack any variation in line spacing which makes it challenging to distinguish between list items and new lines.
- Lack of existing standards for navigational component design in the design system contributes to inconsistency.
- Limited guidance provided by the WCAG around character/ word identification and comprehension.
Exploring solutions and testing ideas
Collaborating closely with developers, we identified and defined the technical constraints and optimal technical solutions.
I also conducted desktop research to analyse how similar challenges were tackled on other websites, and then collaborated with fellow designers to rapidly conceptualise and test multiple design options. These options were presented to a diverse group of colleagues across government, including designers, developers, content writers, publishers, and management. Their valuable feedback and input played a crucial role in refining the design aspects through a collaborative decision-making processes.
Creating atomic design patterns and design guidelines
After validating the most favoured designs for accessibility, I utilised them as the foundation for creating atomic design patterns and comprehensive design guidelines and principles.
Updating all navigational components with the new atomic design patterns
Starting with the Figma designs, the new atomic design patterns and guidelines were then systematically applied to all 14 navigational components and their variants in the design system.
Before
After
Implementing change
To enact change across an extensive state government ecosystem, I coordinated and strategised the rollout of these updates within the design system that I was working on. Moreover, I showcased this work and its designs across various forums, influencing other government departments to embrace these new design standards for their websites. Additionally, I offered hands-on support to several departments throughout their implementation process.
Beyond this project
I have published a complementary article to this case study, detailing the research and designs created for this project. It has resonated globally, with readers widely sharing it among their peers, transcending language barriers, including Japanese and French.
The article is titled: Designing dyslexia-friendly navigational components: accessibility insights and atomic design patterns and is available to read on medium.com.
