Doug Proctor Strategic product designer
« Back to case studies

146,000 phone calls later

E.ON Energy
My role
UX lead

The challenge

E.ON is the world’s largest private investor-owned energy supply company. But having lost the edge in a world of rapid digital transformation, they needed their own substantial programme to turn things around, and to give customers the transparency and control that they now expected from their energy supplier.

This brief was concerned with their high call centre costs, which stood at £2.4 million each year. Our design team was briefed to redesign their on-line customer self-service portal with the goal of reducing call centre costs by 7%.

How can we reduce the number of customer phone calls to the call centre by 7%?

There were many factors that would make this a difficult undertaking:

  • Heavy regulation by Ofgem
  • Siloed business functions within E.ON
  • Highly political landscape
  • Fragile, inflexible legacy technology infrastructure
  • Isolated design team (not co-located with IT)

My role

I worked solely on the E.ON account at Engine, and was the UX lead on their client E.ON’s digital transformation programme. I led our UX team of 4, overseeing the design process, output, and the user testing programme.

I also created a component library-based design delivery system, bridging the gap between the designers and developers, and helped the E.ON IT leadership find a way to bring Lean UX into their Agile process.

The solution

Completely redesigned B2C self-service portal for managing your energy account.

How we got there

Commercial strategy

I joined the project after a substantial phase of strategy had been completed. There were several key outputs from that phase that would feed directly into our design process. We had:

  • A key messaging hierarchy, which would be woven throughout the content and design of the new site
  • LADS, a user journey framework designed to ensure the inclusion of related journeys at any relevant point of a journey
Key messaging hierarchy
LADS mini-framework

Customer typology

Crucially, E.ON’s customers can be grouped according to how they prefer to (or are able to) pay for their energy usage:

  • On Demand
  • Direct Debit (fixed)
  • Direct Debit (variable)
  • Pay-as-you-go

The differences between these customers were far-reaching, and needed to be understood on a psychological, financial, and technical systems / database level.


In addition to inheriting strategic outputs, there was also prior work by the client to create a set of personas specific to the digital transformation programme.

These weren’t created in the traditional UX way by analysing usability test results, but rather from a marketing segmentation angle. Nonetheless, they provided us with a useful way to categorise our basic audience types and to refer to them often when discussing our work.

Context mapping

In order to help us understand what customers expected to see when viewing their bill, we had to build out our understanding of what their different contexts could be.

The first step was to examine the different customer types and get a clear picture of what actions and information each type is interested in.

Call centre logs
Key goals by customer type

Test-driven design

Instead of waiting until we had a design route fully fleshed out and detailed, I encouraged the team to take a much leaner test-driven approach. Since we had weekly user testing sessions that we could rely on for validating any pieces of design that we were working on that week, we were able to test a whole lot of ideas in lower fidelity. This would be much more beneficial than testing a single, well-defined route and not being able to evaluate the results comparatively.

Step 1: define the hypothesis and acceptance criteria
Step 2: sketch against the test acceptance criteria
Step 3: user testing
Step 4: test result analysis

Collaboration with content and technical teams

As a Big 6 energy company, E.ON was under stricter regulation than most companies are. This would manifest itself as one of the most important constraints that our design team had to work with: content. We collaborated with E.ON’s content teams through the design process, ensuring that our designs met Ofgem regulations, as well as E.ON’s tone and content style guides.

It was also key to understand how our designs would be implemented into E.ON’s CMS and technology stack. Working closely with Sitecore developers and architects, we built up a common understanding and vocabulary around how our “design” components would be translated into CSS components, Angular components, and Sitecore components, each of which had different data requirements.

Technical content

Interaction modelling

Once the journeys and screens were validated, we moved on detailing the responsive interaction modelling. This required a lot of input from the technical teams: any UI interaction scheme that we proposed needed to be feasible from a frontend, Sitecore and AEM point of view.

We experimented with different responsive layouts
Communicating our layouts to the tech teams

💥 We smashed the targets

Calls reduced by 30%

When the design went live, we saw a 30% reduction in calls related to the View Bill journey. This was an overall reduction in calls by 9%, saving E.ON £2.2 million per year.

60% increase in click-throughs

Part of our success was due to a 60% increase of click-throughs into the View Bill journey. We’d identified that part of the problem was that customers were not even viewing their bills on-line, and would rather phone E.ON to get the information they wanted.

And the roadmap is still years-long. With E.ON's customer-first digital transformation in full swing, expect to see ever-improving CX from E.ON. You might even want to switch your supply to them.

Let’s make something


JAMstack! This site is built with Gatsby and