Transforming the digital experience of the existing website into a new responsive site, helping customers to self-serve better.
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.
Me – UX / Visual Design
Tanya – Lead UX Design
Amrit – Lead Visual Design
Estelle – UX Design
Mark – UX Design
The 6 week discovery phase focused on 5 key user journeys:
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.
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:
3 personas were created from data collected from the research phase, each with varying wants and needs.
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.
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.
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.
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:
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.
We summarised key observations for entering a water meter 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.
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.
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.
