Project: ScottishPower Digital bills

ScottishPower wanted to build a helpful and digital bill solution for their customers.


Customers did not understand how their account balance was calculated. Bills drove the highest volume of call ins to customer service as the customer believed a verbal explanation was clearer than the bill design.


The audience was online ScottishPower customers looking to reference their statements.

My role

I was the sole UX and UI designer for the research and initial wireframe and design stages of the project.

Stakeholder meeting

I met with stakeholders to learn about the problem and goals to provide a better online digital bill experience and to alleviate calls into the customer care centre. We talked about the user flows and reviewed features that needed to be included in the solution.


I went through any existing user feedback I could find as there wasn’t budget or time for new user research.

Some insightful feedback included that the copy was too technical for users to understand and that it’s not designed for an easy read- the information the user wants and needs isn’t easily comprehended.

This feedback helped me solidify the problems to solve.

I also conducted competitor analysis and went through online solutions of online bills and noted inspiration.


Next, I worked on the wireframes. There are three different payment types: bills sent every quarter, bills taken by direct debit monthly, and by prepayment cards (paying for the utilities before you use it). Not only are there 3 different payment types but it can get more complex based on variables such as if the customer has a smart meter or if they’re in debt to ScottishPower. Because of all these factors, there had to be multiple variants of the design to be able to display data to the customer in the most relevant and helpful ways. For example, if we knew their exact amount owing, I put a link that said “actual” and if not then a link that said “estimated”. Clicking or hovering over these would tell the customer what they meant exactly. They also had different call to actions, depending on their needs: if they had to enter in their own meter readings, make a payment, change their direct debit amount or request a refund.

Digital bills wireframes

I also added options that were valuable for the customer and business like switching to auto payments if they were not already and setting up an instalment plan if they owed money.

The feedback shared that customers liked feeling appreciated, with that I added a thank you message. They also wanted to learn about energy information so I added a section to share about ScottishPower's green initiatives.

One of the biggest problems was that users were calling into the customer care line a lot asking information about their bills that should have been obvious. In my design, if after they went through the digital bill page and they still didn’t understand it or had a question, I placed FAQs (specific to their payment type) near the bottom of the page along with links to get further help that would go to online help prior to a call.

I also added some nice to haves like insights on their consumption- for example sharing that their owed amount had gone up this month because it was hotter and they were using more air conditioning.

Check in

In speaking to the Product Owner, we decided to do the simplest rendition of the designs for the first release. The main aim was to give the client the information they needed in a clear and concise manner.

Mock and prototype:

I used global designs to create high fidelity designs and prototypes.

To make the view more concise, I added a “View bill” button that would expand and hide more details as to where their bill amount came from. I also added a history of their previous payments so they could see previous amounts and what they had already paid.

Digital bill mobile prototype


I worked hard to answer the main problems of creating a solution that would help the user understand their bill easily and passed this foundation to my teammates when I left.

Digital bill mobile mock