Developing my solution to npower’s developer challenge


At some point in June 2013, I received an email from one of our tutors that let us know about npower’s developer challenge. The challenge was to create a working prototype of an online application that would run in desktop, mobile or tablet and help UK consumers view and control their energy use. It seemed interesting, and to be honest I liked the thought of winning first prize, so I thought I would create an application and enter.
The final application can be seen in this page

First Steps

The first thing I did in developing this application was reading the expectations and specifications and having a look at the dummy data provided by npower. There were 3 XML files – one had data on device wattage, another had power tariffs for each region and the other had energy consumption data for several postcodes. After inspecting the XML files, the next thing to do, was of course to be able to read and manipulate them – I wrote some functions to search XML files per attributes and their values that would be useful to me. I also created a sample web page that I tested them on. At this point, I was able to find the energy consumption of a specific postcode, and also compare it with the second XML file to get the cost of said consumption.

Building the UI – Energy consumption per postcode

Of course, I needed a prettier way to present this Information to the user. Enter Google Charts, a javascript API that allows you to chart data in many different ways. I used a column chart to present how much energy was used each month of the year.
Desktop view

The problem was that although the chart looked pretty, it didn’t fit well in small screens. In order to make the app fully responsive, I reduced the number of months of data shown depending on the screen resolution. Additionally, I changed the type of chart used depending on the screen orientation: if the width was greater than the height (desktop screens and landscape orientation) I used the vertical column chart, while on a portrait orientation, I used the horizontal bar chart.
‘Landscape’ view
‘Portrait’ view

Building the UI- device wattage

For this part of the application, I wanted to present the various devices that exist in a household along with the percent each device used. I thought that the best way to do this would be a pie chart.


The user could add devices from a select element and the pie chart was populated with that information.


I later improved the functionality by setting my own colours for the various pie ‘slices’ so that I could display a legend to the user in a different part of the page, which also allowed them to remove devices (slices).

Additionally, when the user added more than a number of devices ( that depended on the screen size ), smaller ones would be grouped under ‘other’. If you clicked ‘other’, you would see the remaining devices



Using External APIs

Having done about everything I could with these dummy APIs I wanted to do a little more. I searched for relevant things and I found some energy use per middle layer super output area (MSOA) data. Unfortunately, most people don’t know what their MSOA is, so I had to find an API that mapped postcodes to MSOA. At first, I used Map It, which was great help, but I later switched to other government sources I eventually found. I was inspired to use maps similar to the ones in that tool though: I wanted to present the MSOA area to the user so they had an idea on how big/small it was and which places it included. I found MSOA boundary data in another government site – that data wasn’t in a format I could use though, so I had to import it into a program and then export it to JSON, which was perfectly usable.
We can see the boundaries of the MSOA illustrated in blue in the map

Another problem I faced was that while the postcode-to-MSOA database I had found worked for England and Wales postcodes, it didn’t quite work for Scottish ones, since Scotland used a different kind of zone. I had to search in yet two other government sites to get the equivalent information for Scotland, but fortunately it had a similar format with the other databases, so it was easy enough to implement.

Generally, the challenge here was finding the right sources to use, and then adapting them to what the user was expected to know ( their input ) and to what the user was expecting to see ( output that made sense ot them ).

In a more detailed view of the APIs used, I use MLSOA and LLSOA electricity and gas estimates to get the energy use per MSOA, ONSPD May 2013 and ONSPD May 2011 from the office of national statistics to convert postcodes into MSOAs for England and Wales, Middle layer super output area boundaries 2011 for England and Wales (Full Extend) from the same site, SIMD 2012 postcode lookup and Data Zone Lookup to convert postcodes into MSOAs for Scotland and the Scottish MSOA boundaries from Scottish Neighbourhood Statistics
Even more detailed information, including links to the resources I used can be seen in my application’s documentation
Of course, the energy use data itself, was displayed using another bar chart:
Here we see Google Charts in action again
Having to search for all these APIs was something entirely new for me, and a good experience.


In general, irrespective of the results (which are yet to be announced, but I will post an update once they are), I learned a lot from developing this application – from javascript tricks and google chart APIs to how to hunt for data and the right APIs to use in an application that needs them

One thought on “Developing my solution to npower’s developer challenge

  1. Hi Errietta,
    I came across your npower developer challenge entry while doing some research on Energy markets.

    Would love to have a chat with you to understand more about your challenge entry.


Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.