Ofwat – UK Government water regulator

UX + UI: redesign for the UK Government’s water regulator

the new brief

The UK Government’s water regulation authority needed a modern website, but on a restricted budget

Ofwat, which regulates water quality in England and Wales, was using an outdated propriatery CMS that was very restricted in scope and expensive to operate

They approached Certes who hired me as a consultant to help them with the initial stages of the process

What are your website goals and how will we achieve them?

  • We need a better structure for our data
  • A new content management system (WordPress preferred)
  • Better logo and branding
  • To follow UK Government accessibility guidelines
  • Follow UK Government design guidelines
  • A new, fresh design
  • Better mobile website – currently there is none (completely fails on mobile)
  • Help writing a tender document to quote for website design, build and hosting
the solution
research
consultancy
ux
testing
ui
branding

Making a Government website governable

Step 1: Analysis

We needed to know what we had before we could move forward to the gleaming future.

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 2: Research

We needed to research standard UK Government guidelines as well as look at similar websites in Oftwat’s space

Government guidelines

  1. Understand user needs. Research to develop a deep knowledge of who the service users are and what that means for the design of the service.
  2. Put a plan in place for ongoing user research and usability testing to continuously seek feedback from users to improve the service.
  3. Put in place a sustainable multidisciplinary team that can design, build and operate the service, led by a suitably skilled and senior service manager with decision-making responsibility.
  4. Build the service using the agile, iterative and user-centred methods set out in the manual.
  5. Build a service that can be iterated and improved on a frequent basis and make sure that you have the capacity, resources and technical flexibility to
    do so.
  6. Evaluate what tools and systems will be used to build, host, operate and measure the service, and how to procure them.
  7. Evaluate what user data and information the digital service will be providing or storing, and address the security level, legal responsibilities, privacy issues and risks associated with the service (consulting with experts where appropriate).
  8. Make all new source code open and reusable, and publish it under appropriate licences (or provide a convincing explanation as to why this cannot be done for specific subsets of the source code).
  9. Use open standards and common government platforms where available.
  10. Make a plan for the event of the digital service being taken temporarily offline.
  11. Create a service that is simple and intuitive enough that users succeed first time.
  12. Build a service consistent with the user experience of the rest of GOV.UK including using the design patterns and style guide.
  13. Encourage all users to use the digital service (with assisted digital support if required), alongside an appropriate plan to phase out
    non-digital channels/services.
  14. Use tools for analysis that collect performance data. Use this data to analyse the success of the service and to translate this into features and tasks for the next phase of development.
  15. Identify performance indicators for the service, including the 4 mandatory key performance indicators (KPIs) defined in the manual. Establish
    a benchmark for each metric and make a plan to enable improvements.
  16. Report performance data on the Performance Platform.
  17. Test the service from beginning to end with the minister responsible for it.
  18. Be able to test the end-to-end service in an environment identical to that of the live version, including on all common browsers and devices, and using dummy accounts and a representative sample of users.

‘Competitor’ analysis and comparison

We looked at other sites within the water industry and other UK regulators.

Step 3: UX personas and user journeys

From conversations with internal stakeholders, we created a set of personas and defined their user needs

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 4: Draft Information Architecture

Through careful parsing of the exisiting content, we designed a first draft information architecture to align with the user needs of our personas.

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 5: Testing with Treejack

We used Treejack to test our initial information architecture. Ofwat provided a good base of testers from their internal staff and external customers.

ofwat slide 3

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 6: Analyse test results, reconfigure and test again

Analyse test results, adjust information architecture, and retest

treejack results 1

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 7: Finalise information architecture

Phase 1 sitemap was created, along with with a suite of wireframes for all of the page temlates.

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 8: Create Wireframes

A new draft User Interface design was made from the wireframes and IA sitemaps. The design included a draft design for a new logo.

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 8: UI Design and brand

A new draft User Interface design was made from the wireframes and IA sitemaps. The design included a draft design for a new logo.

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

Step 9: Write tender document for website build and hosting

All the UX and UI design work was bundled into the final tender document

The tender document can be viewed here:

The website went out to a successful tender and was built in WordPress, and is currently successfully operating at ofwat.gov.uk

ofwat slide 1

The Climate Thermometer logo is a combination of the New Republic’s Antenna font with the NextGen Climate logo incorporated as a sponsor.

This solved the problem that the site had to have a bit of New Republic branding, but without using the New Republic logo itself.

summing it up

Information now flowing like water

“So much easier! Thanks for your contribution – we definitely couldn’t have done it without you.”

Angela Maher – Senior Associate Corporate Communications (Digital), Ofwat

Let’s talk





Start typing and press Enter to search