Supporting Files

Mockup of the animated sequence

Colour Scheme for the circuit app

iPhone Mockups

Mockup to show the Circuit logo within iOS7.

This is the mockup of our chosen logo placed within an iOS7 app icon template. We decided to use the circle motif to strengthen the notion of a circuit - its latin roots being similar to that of a circle. We chose to add the gradation to add visual interest to the logo and we feel adds movement to the design. 

The iOS icon is an important context as we have initially chosen to display our app on the iPhone platform. 

Below is a mockup of our logo as a splash screen as a user loads our app in location

Circuit and Logo Ideas

When we developed the logo we chose to keep an electrical theme and adopted an electrical diagram approach. We thought this would reflect the simplicity and ease of use that we aim to design our app to have. We chose the name circuit because it is a homonym for electricity, playing well for the energy efficient side of our app, and connectivity - again reflecting the network aspect of our app. 

Competition & Inspiration Overview

I had a few ideas that I wanted to contribute to the design of our wifi controlled energy app, but its important to consider the design elements of any existing solutions so I can compare aesthetics and also make sure the design of our app is better, in our opinion.

ube: Control your Lights from your Smartphone.

ube is a central app that controls lights, plug sockets and dimmer switches. ube also produce electrical components like the dimmer switched and plug sockets to use with the app. 

Our primary focus with the Ube app is that is be simple, intuitive and not get in the way of controlling your lights. That’s why we created a whole new way to interact with the app. We take full advantage of the touchscreen nature of smart phones to make our app gesture based. Slide your thumb up to raise the lights and down to lower the lights. 

Considering ube's mission statement to make the user interface simple and intuitive, as well as their clean crisply designed website and branding - the ACTUAL UI is quite convoluted and crowded.

This is the Scene configuration window. Users use this to set up rooms or scenes.

The skeumorphic design of the sliders and controls is confusing and boring to look at. It seems quite labour-intensive to set up, I feel like this would be less of a chore with a more friendly user interface.

This is the Energy Reporting window, here ube displays economic information to the user.

This window concept is something that could be useful for our app. The bar graph is a good way of showing the savings that the ube interfaces help make. ube also sends reminders and notifications to users when energy consumption rises substantially - this is a useful way 

of communicating data to the user.

This is the main control window. Users can dim or brighten lights and select which light to use.

The design off the whole app really lets the concept down. In this over-cluttered window users can switch between which scene they want to control and then dim the lights with the slider. I dont like this design of the buttons - it is blocky and overcomplicated and takes up more screen space than is needed. I imagine they are easy to use as they will have a large selective area, perhaps this was the company's main priority instead of the visual aesthetic of the app.

WeMo Case Study

This post is a study into the design of an already existing app, WeMo. WeMo allows users to turn on a light from another room, or turn it off from across town. You can put your home on a schedule—living room lights go on in the evening, kids’ TV goes off at bedtime. You can check to make sure you turned the iron off, after you’ve already left. This is a similar outcome to that we are hoping to produce, so it is important for us to study the existing apps to make sure ours can improve on their design.

My first criticism is the visual confusion created by the decision to use skeumorphic design aesthetics. It makes the home page seem dark and cluttered, not something that makes the user want to explore the possibilities of remote control energy monitoring. 


The grey and white colour scheme does allow the odd splash of green to pop form out of the screen, green is an important colour choice based on the environmental nature of the app ( it is also the colour of money in the US of course) However I feel that the choice of grey with this skeumorphic approach only darkens the navigation bar and the interface feels quite claustrophobic.



I appreciate the icon design within WeMo. The icons for the clock are very easily recognisable and suitably minimalist in approach. The email or SMS icon is also very similar to that of the iOS mail app and therefore fits in well to the operating system's motifs. As i previously mentioned, the green is a good and important touch, there is also an added visual gratification in the applied gradient to the green, giving the colour shape and form. However, the skeumorphic design has also encroached upon this area as the icons have been embellished with drop shadows. I understand the principal of making the icons look more like real buttons by adding depth to the design but I feel it is an unnecessary cluttering of the interface. But perhaps thats just my Bauhaus-ian palette kicking in.

energy saving recommended logo

This is awarded to devices that are deemed to be efficient appliances. Its basic layout and clean colour scheme help it to be both easily recognisable and also relatable to conservation of energy. Also the spherical emblem could also resemble the earth, thus promoting the logo's conservational roots. 

The shape may be an issue fitting it into designs that are more grid based as it does not have a conventional form - however - the simplicity and clean lines will help it to remain legible when shrunken down to fit on smaller products.

From this logo the colour scheme and flat design are important to its success.

Saving Money

I've been doing a bit of research into just how much money regularly switching off appliances can save.

Seeing as this is one of the main principles of our app - it was helpful and reassuring to see just how much it can decrease your bill. I got the following information form howstuffworks.com

Firstly I was introduced to this notion of "phantom power" which Beth Brindle describes as;

"Also called phantom energy, phantom load, standby power, idle current and vampire power, phantom power is the energy used by appliances and electronics when they are turned off but still plugged in to a power outlet [source: Energy Star]. According to the Lawrence Berkeley National Laboratory (LBL), the average home contains 40 products constantly drawing power. Individually, the electricity flowing to a TV that's been turned off or a coffeemaker programmed to brew in the morning is extremely small, but together, these sleeping devices may account for as much as 10 percent of household energy use [source: Lawrence Berkeley National Laboratory]."

From this, its important to infer the amount of energy is being spent on devices that lay idle around the house ` especially as many people now have mobile phones, tablet devices and laptops to power and are often left on charge over night.

But what is the actual economics of all this accumulative phantom power? Brindle continues with;

"According to the Energy Star Web site, the average U.S. household spends more than $100 each year to power devices that are turned off. Nationally, phantom power accounts for more than 100 billion kWh and more than $10 billion in energy costs each year. Now when you think of leaving that VCR plugged in all this time just to display a blinking "12:00" on its digital clock, you probably want to kick yourself."

These figures and concepts really give context to our app, reaffirming its validity and usefulness to the user.

Developing an Energy Saving App

Developing an Energy Saving App

After receiving our Energy Consumption brief we decided to develop a wifi-based central control hub for household energy usage. The app will control usage of the devices through previously installed monitoring devices attached to the appliances and will be able to turn them on and off from a remote location. The app will also be able to monitor household energy usage, paying specific attention to electricity and gas usage.

At their heart, all energy conservation apps are about one thing, saving the users money. Easing global warming and saving the polar ice caps is a nice addition but everyones priority is the conservation of their own bank balance. After a brief look at other energy conscious technology, such as solar panels or wind farms, there seems to be an initial economic investment that then starts to slowly reward the investor - these devices are very much designed to be used for the long run, not a one week fad. 

As well as saving money, eventually, they also reduce usage. This is the second factor we must address in the design of our app. The ability to turn off devices such as showers, heating and electrical outlets, from remote locations will save energy, time and money for the user and the ability to do this all from one central hub will dramatically increase the savings. 

So our app is aimed at an affluent but money conscious demographic, and with the initial installation of the monitoring devices that the app controls it might be wise to aim the app at property developers that install the devices when constructing or renovating buildings.

As you can see from this example of an existing app wifiplug, that controls energy flow to a previously installed electrical outlet plug, most existing designs are skeumorphic and in turn, look dated within the confines of new operating systems like iOS7 and Windows phone. Our design shall be a flat, clean aesthetic that is easy to navigate and function. It shall also work as a central hub that allows the user controls over many devices in one place.

Hello, this is a blog for my Level 2 Digital Media work, here I will be showcasing research and development  of our Interface Concept Development Task.