UK Power Networks

UK Power Networks


An all new customer facing website. UK Power Networks provide and maintain the electricity network in the south of England.

Project
Power cuts and domestic services

00.

The challenge

Power cuts and new services

Two key challenges were undertaken. Firstly, power cuts. Business issues included high call volumes, especially under extreme weather conditions and the user experience was inconsistent on and offline. Secondly, there was a lack of brand awareness and confusion around business services and responsibilities. An increasing range of consumer services, such as electric vehicle charge points, meant the entire website needed reworking from the ground up to cater for novice users.

01.

Discovery sessions

Listening and learning about the business challenges and targets

A number of client workshops were held with key stakeholders in different areas of the business; service personal, telesales, customer service and more. Some took place in the studio and others where based on-site giving access to the real working environment. The format was an open discussion where stakeholders would be free to air their thoughts and flag any barriers that held them back.

02.

Personas

Establishing a common ground

We knew the website needed to cater for everyone. However some key users where identified and consistently raised in conversations with the stakeholders.

 

This prompted a set of personas to be created which allowed for a better understanding when talking about issues across different areas of the business. The personas where kept simple so they quickly became top-of-mind and covered all types of demographics from the property developer to the retired.

Personas
Personas
Personas

03.

Journeys

Mapping customer experiences with digital touch points

It became clear that users interacted with UKPN in a variety of ways, and that the experience wasn’t always joined up. Users would quickly move between mobile browsing, to calling and checking social media.

 

In an effort to clarify the various touch points and highlight the users emotions, a number of journeys were mapped out. These also included the existing systems that UKPN had in place to keep a check on technology and ultimately feasibility.

 

These not only helped align the stakeholders thinking, but made it clear where we should focus our attention to make the biggest gains in user experience.

User Journeys
User Journeys

04.

Content audit

Questioning legacy content and prompting a new way of thinking

The existing site and all its content was broken down and critiqued. Issues we faced included orphaned pages, content repetition and lack of clear next-steps. Mobile specific issues included inaccessible content, heavy page loads and poor signposting.

 

Client workshops were held to establish the key, essential content going forward. From this we ran a series of quick card sorting tests to help establish a number of key content pillars.

 

Each pillar was then taken a step further as we dived deeper into secondary and tertiary content. KPIs were considered throughout, such as signing up to future alerts and registering for the priority service.

05.

IA & wireflows

Shaping the content into experiences

IA was mapped out to create a solid foundation and source of truth for creating the prototype. The core journeys were created first, but this process also helped to highlight any edge cases that might arise, and demonstrate back-end system capabilities.

 

To aid client understanding, wireflows were created as an interim step before jumping into prototyping. This allowed an insight into what the pages might feel like without getting involved in time-consuming content details.

Site flows
Information architecture
Information architecture

06.

Prototyping

Being quick and iterative to get alignment from stakeholders

Due to the rapid nature of this project, annotated wireframes were deemed too time consuming. Instead, after some initial flows, sketch work and whiteboard concepts, we jumped straight into prototyping.

 

Because the Power cut aspect of the website was focused around surfacing the specific content quickly, a number of concepts were put together and tested internally before playing back options the client. There needed to be the right balance of user input and stepped instructions. With a lot of data to display, it was important not to overload the screen, but instead carefully reveal content at the right time or when called upon.

Wireframes
Wireframes
Wireframes

07.

Testing & iterating

Sessions ran to stress-test the prototypes

Through an agency we hired users to carry out test sessions over 2 weeks, both at the London studio and outside London at the client offices.

 

A number of real-world scenarios were created. They made use of mobile and desktop prototypes including social and phone calls options. Each session was assessed live behind a screen with the client and issues were discussed on-the-fly. After each day of testing we would consider solutions and action changes when deemed necessary.

 

Each interviewee was asked to rate the prototype experience which helped us build a big picture. The success of which could be playback to the wider stakeholders to demonstrate progress and reassurance.

08.

Style Guide

Style guide created to enable rapid roll-out

An accessible style guide was created, closely aligned to the new company CI guidelines. Once the basics were in place, the page designs could begin. The more complex pages were dealt with first, to help overcome any specific UI requirements. These would then be fed back into the style guide.

 

Each design sprint was uploaded to Zeplin where the dev team could pick measurements and hex values. Zeplin was also used as a comms method making for efficient front-end development with minimal compromise. Regular scrums were held between UX/design, development and QA testing teams to ensure everything stayed on track.

09.

Design & UI

UI designs created and uploaded to Zeplin for dev