I have been looking at different designs for the actual smart device. The conventional tablet shape seems to me to be the best use of the work space available. Other shapes like the nest round thermostat look like they don’t utilise the space very well.
Development
The posts from the development part of the module
Gamification Cont’d
We were given the task of creating some form of gamification aspect for our Npower App/Experience. Our first thought was to make something really simplistic like a happy house or a sad house depending on energy use but that was definately not enough. So we came up with something that would get the customer to think about the environment being in direct relationship with their energy use. First we thought about having themes like save the rainforest or prevent the icecaps from melting. THis was a bit out of my current animation skills so I tried to simplify it a little. My first idea was to link their consumption to the melting of an iceberg, So that the less energy that they use the less of the iceberg melts, we could introduce other elements like a grass growing or a tree growing ….We could then compare that household with the other Npower clients and whoever has saved the most energy/money on their bill percentage wise would win a prize…either money off a bill or some energy saving device. Here is my first attempt at animating a melting iceberg created in C4D. I am struggling with making a realistic iceberg material and shade. Any advice would be greatly appreciated.
Here are some screenshots and a link to the first draft render. https://vimeo.com/121132886
Gameification Incentive
After struggling with the idea of using a points system and the users incentive to actually use the game to save energy we thought the user could compete with all the other npower customers in their city (so newcastle) then the most efficient household at the end of each month would win a discount for their next bill. We felt this would be reasonable as it would not cost npower too much, but would make a difference to the winning customers and hopefully drive them to be efficient with their energy usage.
Energy Usage Yearly
This mockup shows how we could compare the yearly usage showing the saving or deficit from the same month the year before. Here it shows that In march last year the customer spent £87 which was a saving of £30 from the year before, In July they spent £103 which was up from the year before by £6 and in December they had a spend of £142 which was also up from the year before. This could show a difference in the central heating being used more or less from the year previous and we could then go onto give energy saving advice which would prevent an increase the next year.
Energy Usage Screen
Here is what our energy tracker could look like It shows the usage for different parts of the house in January and it shows the difference between last month and the month previous…it gives an idea of which rooms are consuming most power, and which areas have saved power or consumed more power.
Unless every electrical item in the house was a smart device it would be hard to figure out exact amounts for each device but could probably be worked out by each room.
Obviously this is an initial idea and can be altered to suit the needs of our consumer after some user testing.
This would be displayed on the smart meter and could be synced with the tablet application.
Energy Tracker Mockup
Here is a mockup of what the Energy Tracking function of our app could look like. The donut chart shows the users target spend for that quarter alongside how much they have currently spent, giving them a means to see just how much more they could use before being over target for the quarter helping the user to keep a track of their usage. Beneath that chart is an average usage chart which is used to help the user see roughly how much they will spend that quarter.
The top left shows the user how much energy they are currently using, and will change from purple for moderate to low use, to red which indicates high usage. Beneath is a breakdown of their weekly energy usage that quarter and handy tips which will help the user to keep their energy usage under control.
Energy Tracker – First Revision
![]()
One of the initial ideas we had to incorporate into the app was an ‘energy tracker’ which would allow users to set a target amount that they wished their next bill to be, and with the help of useful information, be kept on track to keep bills down. Below this will be a graph showing their average usage, and using this information there will be an icon displayed below this to let users know if they are on target for this quarter or not.
Users will be shown what their current energy output is in the top left of the screen with a graph below showing how much their bill is so far and how much they have left before they go over their target spend. There will be a quarterly breakdown of what users have used energy-wise week by week shown in both kw/h and in pounds so customers can more easily relate to their energy expenditure. Beneath this will be tips and hints on how to keep their usage and in turn money spent to a minimum (e.g try switching off appliances at the wall rather than leave them in standby etc.).
Logo Design and Colour Scheme 0.1
Whilst we are creating a new logo, we didn’t want to stray too far from powers branding so began by picking colours from the colour scheme to create swatches to refer to. We created a geometric background using colours from the npower logo to form a background to be the basis of the new logo we would be using for “My npower”. The background was created as a vector in illustrator before being sent over to photoshop for adjustments.
Next we took the existing npower logo and recreated it in illustrator as it is a strong brand and makes npower recognisable to the public. We didn’t wish to stray too far from this as the font used as we would be straying too far from the companies original branding, and created two versions:
in the first a font that somewhat resembles handwriting was used to give it a more personal and human touch as it is after all everyday people that will be using the app and we wish for them to identify with it in order to make it successful

In the second we created the letters m and y in the style of the power typeface to give the logo a better sense of consistency. The background is reminiscent of the original npower logo in that is the the same shape taken from their logo, simply recreated with a different fill as the background to give it a more contemporary look and also distinguish it as something new to customers.

We will continue to create many more versions of this logo until we create something which we find is the best possible logo we could create.
WireFrames
We want to keep the functionalities the npower app already has, such as meter readings and the users payments. These basic wireframes show the style of navigation we have chosen; simple and familiar as apps such as facebook used to use this style of navigation, it also tucks away neatly and is easily accessible from any of the pages.
The second wireframe shows how we would like our energy saving methods and their prices to be shown. An image of the method will be displayed in the middle, and at either side are the average price it would cost the user to install it into their home and the average amount of money the user can save over 3 years. We would hope that showing this could raise awareness and encourage users to install energy efficient methods into their homes.













