Friday, 7 February 2014

App Design

App Design

I would use the power guidelines for their branding as they use these colours and font around all the publicity.  On their App I can see the hierarchy that they use and how they use their colours.
http://www.npower.com/home/help-and-support/managing-your-account-online/our-smartphone-app/
http://www.npower.com/home/MyNpowerAnonym/Benefits/





They don't use their logo in the App, only on Login.  I think they use their branding colours and also they has limitation with the use of their logo, it might be just for print but it is not clear.




Colour





Typography

I tried different fonts to find the one that it is used in the power App.  The first one Helvetica Neue it is the most similar.







I found this site useful to design my own hierarchy 
http://niklausgerber.com/blog/designing-for-iphone4/


Icons


IOS







Android









Almost Flat Design

I would continuing exploring Almost Flat design, as I believe totally flat can cause some usability problems when the user i starting to use the App. Some ideas.
The gradient is just there


Again a soft gradient and a subtle separator




I'm not quiet sure about the stroke around the box but I like the x.
Also there are three trends: Square, Rounded squared and Rounded ends.





Grid

http://dribbble.com/shots/865767-iPhone-5-Grid



App design progress

I used this grid.


Register page with Facebook or email. I wanted a simple process to register.


Learning process the App would use the location to get a postcode, then the App ask for a house number and then would download information about the house from Zoopla and Land registry.  Al so this would be the learning process where the App would start filling a Home Energy Survey with the help of the user.




The user would receive notification the first weeks or when a change is detected, in order to teach the App.


 Tracker page.



This layout looks to busy I'll need to simplify.



 The App should show the information that the user would be looking at the most. The user wants to know how much energy they are using at that moment. Also, It needs a link to friend and challenges. Look at this examples, the measure is show BIG.

I refine the tracker page with the information that the user would track everyday





Here It can be appreciate how the warning colours would work.







I like the clean look of this, also I found Feed more relevant that top league







Friends page List of friends with their saving. The user can add more friends.


Data page The user can check previous data, and also future estimate of energy consumption.  Also can see the Awards received for energy saved and See what activities in the house are consuming most energy.




Challenge page 





Notification page 

The App notify the user if it is a unusual energy demand at home, even when they are away.

Feed page 


No comments:

Post a Comment