UX / UI

Severn Trent

Transforming the digital experience of the existing website into a new responsive site, helping customers to self-serve better.

Overview

Severn Trent (FTSE 100) is a major water company in the UK. They supply freshwater and treat sewage for around 8 million people living in the Midlands of England and also a small area of Wales. The purpose of the project was to transform the old website into a new responsive site that improves customer self-service and reduces the number of calls to the call center. The new system would also be built on Adobe Experience Manager, allowing the client to create and manage content easier. The project involved a discovery phase of 6 weeks and a delivery phase of ten 2-week sprints.

Team

Me – UX / Visual Design

Tanya – Lead UX Design

Amrit – Lead Visual Design

Estelle – UX Design

Mark – UX Design

 

Discovery phase

The 6 week discovery phase focused on 5 key user journeys:

  1. Setting up an account
  2. Paying a bill
  3. Submitting a meter reading
  4. Moving house
  5. Reporting a problem

User research with the client and customers was carried out to understand business and user needs. The insights from this research were synthesised to create personas, empathy maps and cognitive models that would inform design.

Empathy mapping
User need statements

Gaining further empathy

We were able to gain a good level of understanding about the issues users faced with the current site but sometimes it is hard to really appreciate the frustration or anxiety customers have during an interview. We decided to spend a day in the customer service center to speak with call center staff and listen in on calls. We were able to hear first-hand the problems customers have and observe how the staff tried to resolve these problems.

The key problem customers called in about were:

  1. Help with bills or payments
  2. Reporting an issue with their water
  3. Moving home
Call centre listening

Personas

3 personas were created from data collected from the research phase, each with varying wants and needs.

Personas

Each sprint involved understanding customer pain points, evaluating how the existing system currently served customers’ goals, concept creation and rapidly testing prototypes. We worked closely with the client to co-create new solutions that were aligned with the business goals and customer desirability.

As-is evaluations
As is evaluations

Key research insights

  1. As-is report a problem
  2. Meter reading fault
  3. Lack of clarity around works in progress

Wireframing

We started by sketching out initial designs ideating around the key issues we identified. These were then progressed into lo-fidelity wireframes for the end to end journeys.

Wireframes

Prototyping and Testing (as-is and to-be)

Functional prototypes were developed for the to-be solutions and tested against the as-is system. The client hired an external company to conduct the usability testing, with the team sitting in to note take.

Eye tracking user tests

Findings from the testing were fed back into the design process and helped us to iterate and make design improvements that were human-centered. Some of the key findings included:

  • Language can be difficult to understand. Unclear on what’s required from the user
  • Clarify why different payments are due on initial and subsequent months
  • Provide a monthly payment schedule
  • Clarify how the monthly payment figure was devised
  • Participants were not confident about reading and entering water meter readings
  • Most participants entered a water meter reading incorrectly

Developing the designs

We were particularly interested in the struggle that people had with reading and entering water meter readings. The current site, along with most competitor websites used a plain textfield, with no front-end validation, and let you enter any length of alpha-numeric input. There were often instructions on how to read and enter a meter reading (as shown in the following images) but this often left customers quite confused.

As-is and initial new designs for meter readings

We summarised key observations for entering a water meter reading:

  •  Some participants weren’t sure if they needed to include the leading zero
  • Some participants entered the whole reading including the red numbers
  • Most of the participants read the instructions but then went on to enter the numbers incorrectly
  • Some participants didn’t read the instructions
  • Most participants took around 1 minute to enter a reading

We found that we could not rely on instructions alone for getting people to enter data correctly. Instructions can also be missed or not understood. The lack of online validation meant that customers continued to enter numbers in hope that this would be more accurate.

Web forms that require user input should map to how people think and behave. They should help guide them naturally, in context, and should accommodate for human error.

The concept of using the camera on a phone to scan a meter reading was discussed, however it was not technically feasible to implement at this stage. We still needed a universal way of doing it. We explored multiple concepts.

Meter reading ideation

The solution

Use restricted keyboard input to not allow text or symbols to be entered, only numbers. After five numbers (max.) had been entered, if the user tries to enter a 6th number, then a decimal point is added (.) and it makes all numbers after this red. Only three red numbers can be entered (maximum of 5 black and 3 red). If a user enters less than four black numbers, it displays a message telling the user what they need to do. If a user enters less than 5 numbers then they are reminded to check if their reading begins with a zero and it does then they should include this too.

New meter reading solution

Delivery

The delivery was split into two phases, where phase one was concentrated on the pre-authenticated areas of the site and phase two was focused on self-service. During the delivery phase, the team was co-located within the client’s head office to keep agile ways of working with the business, performing daily stand ups and weekly playbacks.