Redesigned government website navigation at scale
Improved accessibility and readability across 10,000+ government web pages by standardising over 14 navigational components across all interaction states and exceeding compliance standards
My role on this project
- research
- design
- release planning
- communications
Project overview
Government websites use over 14 types of navigational components, including in-text links, buttons, menus, breadcrumbs, and link lists. Previously, these components were often designed in isolation, lacking a shared approach to appearance and behaviour. Focus indicators were inconsistent and frequently inaccessible, creating barriers for people navigating using keyboards and assistive technology. Interaction states like hover and active appeared differently across components, resulting in a visually inconsistent and fragmented experience.
Separately, link styling posed its own challenges. Guidance on readability for people with dyslexia advises against underlining body text, as it makes reading and comprehension more difficult. Yet underlined blue text remains the default pattern for in-text links across most websites. While technically WCAG compliant, this styling conflicts with best-practice readability standards, highlighting a familiar but flawed design convention I set out to improve.
Before and after
Interact with the tabs to see how things looked before and after this project.
Before
After
Project achievements
Established consistency, scalability, and a modern UI
I created foundational design system patterns and guidelines that standardise interaction states (default, hover, focus, and active) across all navigational components. These scalable, accessible patterns bring consistency to UI behaviour and appearance, and can be easily applied across design systems to support evolving teams and projects.
By collaborating closely with developers, I ensured every solution was technically feasible and built for long-term sustainability. I documented the patterns within the design system to future-proof implementation and enabling consistent, accessible experiences at scale.
Beyond function, I introduced a modern, streamlined aesthetic. Updated guidance on line weight, spacing, and colour improves readability, reduces visual fatigue, and elevates the overall user experience.
Enhanced accessibility beyond WCAG standards
My accessibility-first approach considered how people read and interact with content. I combined WCAG and inclusive design principles with reading science to address real-world challenges, particularly for users with dyslexia. By refining underline placement, spacing, and weight, the designs improve letter and word recognition, making navigation more accessible and readable for everyone, and going beyond what WCAG alone requires.
The design process
Audit
I explored how navigational components were displayed across design systems and primary government website. 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.
The problem with underlining links
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.
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.
Identifying the cause of the problems
Instead of jumping straight to solutions, I started by understanding why the problems existed in the first place. I combined insights from my research and audit to uncover how design and content practices contributed to inconsistent, inaccessible navigation.
Using the "5 whys" strategy to uncover 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.
- Lack of existing standards for navigational component design contributes to inconsistency.
- Limited guidance provided by the WCAG around character/ word identification and comprehension.
Exploring solutions and testing ideas
Working closely with developers, we identified technical constraints and shaped scalable, accessible solutions. I also conducted desktop research to see how others approached similar challenges, and partnered with fellow designers to rapidly prototype and test a range of options.
Creating foundational design patterns and design guidelines
I created foundational level design patterns and comprehensive design guidelines and principles.
Updating all components with the new foundational design patterns
Starting with the Figma designs, the new foundational 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 influence large-scale change to global elements and encourage wider uptake, I actively showcased the work across forums and cross-government channels, prompting other departments to adopt the new standards for their own websites. I secured stakeholder buy-in by demonstrating the wide-reaching impact of the changes and highlighting the broad spectrum of accessibility needs these updates addressed. I also provided hands-on support to teams during implementation, helping embed the patterns into real-world projects.
To drive adoption across a large state government ecosystem, I strategically rolled out the updated patterns through the design system I was leading.
Before
After
Before
After
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.
