There were 8 pages in the View and Understand Bill journey. It was needlessly complicated, and users were understandably confused.
We spoke with a panel of eight customers to understand their behaviours and needs around viewing their bill.
1. The most popular user action was to download a copy of their bill. This is probably more due to this being the most prominent call to action on the page. We should be servicing this bill information clearly online, over providing a pdf download.
2. ‘View your paper bill’ was second most popular but had a high bounce rate, implying this section was confusing.
3. The ‘Pay your bill’ CTA is so hidden that only 0.6% of users manage to navigate to it.
1. This bill detail page is lacking a natural journey flow. Most users end up navigating back to the previous page.
2. Users are so confused by the navigation structure that they’re frequently trying to navigate from here to the page they’re already on.
3. The payment section is the logical next step, but these tasks have a very low click through since they are hidden in the side nav.
The current journey is designed to navigate complex business regulation and documentation, not user needs. As a result, customers are suffering from an information overload. Our solution: a complete journey re-work from the ground up.
The introduction of a card pattern helped to the multitude of different bill scenarios depending a user’s account type.
The tile pattern for key user needs was later harnessed for the updated design of the account page. The overcomplicated menu was stripped back into a a smart grid that shifted the key calls to action based on the user’s account status. Even better, this page no longer needed to be hidden behind a login wall.
The account section pages for the UK site were beginning to come together, and we had the beginnings of a small but robust pattern library. However, at this point in the project E.ON global decided to go through a company brand refresh, and all that entailed for the our progress on the site build.
The brand application could not be a simple reskin. Title alignment, sizes and colours had changed drastically. Conventional web patterns were out. Tiles were now considered ‘old brand’ by the client and not desirable. We had to throe web convention on its head.
The account page went through a huge number of iterations.
To apply the brand appropriately to the billing journey without harming usability, the page needed to be redone from scratch.
Early page designs on large desktop combined static image ‘mood’ panels with scrolling text content as a first stab brand application. This was later ruled out due to template complexity and scroll bar rendering on older browsers.
The left hand panel gave the bill context. The right hand side of the panel directed the user to their next best action, from paying a bill, managing their direct debit payments, giving a meter reading, or simply doing nothing at all - everything’s on track.
The most challenging aspect of the mobile experience was ensuring all the key messaging sat within the visible screen area on even the smallest smartphone.
Development work is still in progress, but early results are promising. Since the account update, customers managing to pay their bill online is up by 383%. The primary call to action for Direct Debit customers is to manage their debit payments, which was up by 615%.