Creating a brand new customer portal for a young energy company.

Agency

Parallax

Client

Yorkshire Energy

Skills

Vue

SWR

Laravel

To bootstrap their business, Yorkshire Energy used a number of off-the-shelf software and services to help serve their customers. I originally did the build for the marketing site as part of the work for Parallax to update the clients branding.

However, as time progressed it became clear they needed more for their customers. The area customers log in and submit their meter readings needed to reflect their brand, so I built the frontend for the portal from the ground up. Integrating with their existing ENSEK APIs.

Account Balance

As well as it looking and working well, we added E7 tariff estimation, so customers can get an accurate prediction of their tariff over the year when using an economy 7 meter. We also implement a slick renewal flow, something that customers originally had to phone up for.

All the while, this has been implemented and rolled out in a way that is seamless to the customer. Customers arrive at the new portal and log in as normal, their existing password is rehashed in our system which means no difficult re-registration woes which would risk losing customers at a crucial point.

Notable design features include a kind of thermometer that illustrates credit and debit. This is a concept that some customers struggle with, as you hover over each line item a clear up and down motion indicates which way the transaction take your balance. It also allows them to hop into an invoice right from the list.

Responsive design

Technical challenges included some of the APIs we were working working against having no reasonable QA environment. We use a VCR-like program in our integration tests to record interactions against the server using our own accounts in the production environment, to ensure that any changes to our system make the correct calls. We can also compare these recordings to future requests to see if their underlying API has changed or diverged from the published documentation.

Dashboard