Context and challenges
As part of a team working with the Environment Agency, I explored how to add more river level data and create an accessible, interactive experience that helps users understand current conditions, historical trends and potential flood risk.
I worked as a Senior Interaction Designer in the Check for Flooding Team, we implemented improvements to the service based on user feedback.
User needs
Users visiting river level services typically want answers to a small number of questions:
- What is the current river level?
- Is the level rising or falling?
- Is the river within its normal range?
- How does today's reading compare to historical levels?
Rather than presenting raw measurements alone, the chart was designed to provide context and make those answers immediately visible.
To address this, the service needed to support both sides of the problem: making it easier to publish high-quality data, and easier to access and use it.
Using the data
The visualisation is powered by river level readings stored in CSV format. When the page loads, JavaScript fetches the latest dataset and converts it into a format suitable for Chart.js.
River sensors often produce small fluctuations that can create visual noise, so I implemented a smoothing function to calculate a rolling average across neighbouring readings. This produces a cleaner trend line while preserving the overall shape of the data.
The result is a chart that feels easier to interpret and less overwhelming for users who are simply trying to understand changing river conditions.
Creating a more interactive experience
Most public-sector charts are static, but environmental data benefits from exploration.
To support this, I implemented:- Zoom controls
- Timeline panning
- Pinch-to-zoom on mobile devices
- Keyboard navigation
- Interactive tooltips
Adding meaning through context
A river level value has little meaning without context. To help users understand the significance of the data, I added dynamic annotation layers directly onto the chart. These include:
- The current river level
- The top of the normal operating range
- The highest recorded level at the measuring station
This transforms the chart from a simple visualisation into a decision-support tool.
Designing for mobile first
A significant proportion of users access GOV.UK services on mobile devices. To ensure the chart worked effectively on smaller screens, I optimised interactions for touch devices, including:
- Pinch-to-zoom support
- Touch-friendly controls
- Prevention of accidental browser zooming
- Responsive chart sizing
These improvements ensure users can interact directly with the data without fighting the browser or interface.
Prototypes were built using the GOV.UK Prototype Kit, enabling rapid iteration and testing with users before implementation.
Accessibility considerations
Accessibility was treated as a core requirement rather than an afterthought. The chart includes:
- ARIA labels
- Screen-reader descriptions
- Keyboard navigation
- Large touch targets
- GOV.UK-compliant typography and spacing
For users who cannot access the visual representation, a text summary communicates the key trends and current river conditions.
Technical approach
The solution combines several technologies and custom enhancements:
- Chart.js for visualisation
- Luxon for date and time handling
- Chart.js Zoom Plugin for interactive navigation
- Chart.js Annotation Plugin for contextual overlays
- Custom plugins for hover guidance and interaction feedback
- JavaScript data transformation and smoothing algorithms
Together these tools create a rich, interactive experience that goes beyond a simple chart to provide meaningful insights into river conditions.
Outcomes and impact
The project demonstrates how complex environmental datasets can be transformed into something that feels approachable and useful. Instead of asking users to interpret raw measurements, the design focuses on helping them understand what the data means, how conditions are changing and whether they should take action. By combining GOV.UK design principles with modern data visualisation techniques, the result is a chart that supports exploration, accessibility and informed decision-making.
I also applied similar government interaction design principles within the HMRC case study.GOV.UK design approach
The work followed the government interaction design principles, with a strong focus on accessibility, clarity and consistency.
Designs were developed and tested using the GOV.UK Prototype Kit, then refined through usability testing and collaboration with multidisciplinary teams.
This ensured the service met accessibility standards, aligned with established GOV.UK patterns, and worked effectively for a wide range of users.
What I learned
Designing for data-heavy government services requires balancing accuracy, usability and accessibility. This project strengthened my ability to simplify complex systems into clear, usable journeys while working within the constraints of real-world data and policy.
It also reinforced the importance of designing for both technical and non-technical users — ensuring that data is not just available, but genuinely usable.
Below are a selection of screenshots from the project work and prototype.
