Finalized new design

This is the new design that I will present. I have showed the design to many people and have had to change it around a few times to make sure that the user understands what each button does. I had big problems with the meter button. Design after design, people that I showed could not make out what the button was for. Eventually I decided to use the ESB logo to represent the meter button. When testing the logo on people afterwards everyone got the idea of the logo.
Here are the new designs:

• Home Screen

• Heating - Home Screen

• Heating - Clock

• Heating - Temperature Screen

• Heating - On / Off

Lighting - Select a room

• Lighting - Control

• Standby Mode - On / Off

• Electricity Meter - Reading

• Gas Meter - Reading

New Home Screen Design

After testing I started to design a new home screen. This will be the base design for the rest of the App. I took a look at some different issues:

• Using more color and images
• The navigation of the App
• Usability 

I decided to change the top screen as it was badly designed and looked out of place. I made the center circle with the buttons in it smaller. I re-positioned the buttons with in the circle as they were slightly off. I also took out all the text and created images to overlay on the buttons. This makes the design look much cleaner and more pleasing on the eye. I also changed the color of the back drop from plain grey to a gradient.
While looking at the navigation of the App, I decided to add a bottom back that would let the user navigate around the app no matter what page they were on. I also added a home selection which means that I was able to do away with the back button. I think the new navigation has greatly improved the design and usability of the app.

Testing

After creating my prototype design I tested it on several different people. These are the questions that I asked:

1. Rate the usability of the App (1 - 10)

2. Rate the quality of the Graphics produced (1 - 10)

3. How did you find the navigation (1 - 10)

4. Rate the different functions that the app have to offer (1 - 10)

5. Overall idea of the App (1 - 10)

6. Any suggestions to improve the App in the last stage of development:


I asked five people to take this quick survey, here are the results:

First Person (Computer and smart phone user:

1. 10

2. 9

3. 9

4. 9

5. 10

6. Some dimensions are slightly off. However this would be resolved in the development stage.


Second Person(Mac and Iphone user):


1. 10

2. 8

3. 8

4. 8

5. 9

6. More use of color with light and heat e.g. to represent values ie red = hot / blue = cold



Third Person(Mac and Iphone user):


1. 9

2. 8

3. 8

4. 10

5. 10

6. More use of color and images.



Forth Person(Normal phone and basic computer user):


1. 9

2. No comment

3. 7

4. 9

5. 10

6. I didn't see the back button until you showed it to me.

Fifth Person(Smart phone and computer user):


1. 10

2. 8

3. 8

4. 9

5. 9

6. Looks good, add some color and clean up the designs and it will be great.



I have looked through these results taking different comments. I am now going to look at my design and try to rework it to solve the issues that the testers had with it.

Additional concept to develop the app to work with Siri

I am looking at the different concepts to have the app to work with Siri. This means that the user can control the app with their voice. They will be able to call out commands like "Turn the heating on and set it to 22 degrees". This will allow the user to turn their heating on with out having to enter into the app.

Motion Graphics run through of the GUI (Take 1)

This is the first run through of the GUI of the app. It shows how the user will progress from screen to screen and the different functions that the app has to offer. It is the first take and will be perfected over the next two weeks. This short piece will be shown to an array of people this week to get feedback before updating the design.

App Screen before they get processed in After Effects.

These are the different windows that are going to make up my app. The have been mainly designed in Photoshop with a little work done to them in Illustrator.

Opening Screen. The light bulb will animate yellow while the app is loading:

The opening window will load into this window. This window will have four options. These options are lighting, standby, heating and meter.

Lighting


The lighting screen will have the same UI as the home screen. Here the user will select the room that they want to control the lighting in.

When the user selects the room it will load into this screen.

The user just has to rub their finger up and down the wheel to turn the lighting up or down/ on or off.





Standby


This is the screen when the user selects the standby option from the home screen.

The user just has to press to button to active standby mode in the house.


Heating


This is the screen the user will be presented with when they select the heating option.

Here the user will have three options. One to allow them to turn up the heating the room that they are sitting in. If the user selects this option they will presented with the same screen again. This time they will select a room. When thy select a room they will be presented with this screen.

The user can turn up and down the temperature in each room by spinning the wheel.

The next option in the heating table is the choice to globally turn it on or off.

The user just has to push the button to turn the heating on or off.

The next option is to put the heating on timer.

The user will select the box and spin the wheel to set the time.


Meter


This is the screen the user will get when they select the meter tab.

There will be two options, one to see their reading and the other to see the unit charges. Here are the two windows.

Designs

I've started to put together a few concept designs. I am trying different techniques to see how the user will interact with them. Here is the opening screen:

While the app is opening the light bulb will glow yellow.

This is one of the first concepts for the home screen. I don't think I'll use this style as it is plain and boring:

I want to try and create something that is different than an options menu. I have been experimenting with a circular design:

This is the very basic concept of the design, the screen at the top will have all the live updates as the user interacts with the design. Down below is the wheel. This is the main area that the user will interact with. The size of the wheel will stay the same and the center of the wheel will be a button on some screens and another live update on others. The six buttons around the wheel will also change from screen to screen. As they are, each one of them is an option. They will change to sliders and other objects depending on the screen. 

The main difficulty of this design is trying to design each window of the app in a circular way.