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:
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
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.
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.
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.
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.
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.
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.
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.
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.
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.