Final Film

This is a link to my final film for DSDN 112 PJ2 C. Only following a link will allow you to see the film as it is set specially to guard against members of the public from viewing my work.

http://www.youtube.com/watch?v=SWqoi4vnEk8

I tried to stick the design and way the film was constructed as much as I could to my precedent film. I used music which I played backwards at the beginning of the film to show that what the user is doing up until that point is backwards and if given the opportunity could be rewound to do things differently. I then introduce the interface to the audience and have the music suddenly straighten out into the correct way of playing. I did this in order to convey that if the interface is used then the user can undo the past wrongs and move forward in a more energy efficient direction. This is then affirmed by shots of the user turning off various appliances that were causing such high power usage. This then leads to shots at the end where the audience can see the application as it morphs into giving lower energy ratings as a response to the efforts made by the user.

Precedent Films

To help me pick a style I wanted to have in my film I looked up films on youtube that I liked the style of:

http://www.youtube.com/watch?v=NnHOerUP3jI : In this video I liked the music, it was earthy and calming and they style of music id like to use in my film.

http://www.youtube.com/watch?v=Ay2ly4q6fmw&feature=related : I liked the slow style and shot types in this add and would look at similar lengths in my own.

http://www.youtube.com/watch?v=rhPlruyZclQ&feature=related : This film had a huge influence on how I wanted my film to look. I wanted to use a soundtrack which slowly built up into a frenzy, I also wanted to use the tracking shots of the various relevant appliances. I also liked the black and white colours used. I was heavily inspired by this and will model my film off this.

Post-Production

Pre-Production

I brainstormed for my film INSERT PICTURES HERE

Re-Designed Final

I redesigned my final interface design for an ipad. I also changed the layout slightly in order to create a more professional look and in order to have buttons which more accessible to the user on an ipad.

Agnosco

I have decided to call my energy monitoring device "Agnosco" which means "To Know Again" in latin. I think this is appropriate for my energy device as it is informing the user about their energy usage, letting the user know which appliances are highest. The user can come back and access new information again and again leading me to choose Agnosco as the name.

Final interface in action

I used an iphone screen which I found at http://davidcann.com/iphone/ and placed screen shots of my interface in them to simulate a user experience. Iphone is not the only phone the application would work on with the target as being smart phones in general.

Artist Statement for Final Interface

I wanted to design something that people between the ages of 20-30 who lived in urban areas could use to monitor energy consuming things that were important to them.

I found out that transport, communicating and appliances in the home were the most in demand for things that they wanted to know about. Because of this my design has 5 Tabs: Home, Communications, Transport, Top 5 and Total. In Communications and Transport the user selects using the setting what the interface should be monitoring e.g. a cellphone and a laptop or what type of car they might use. In Top 5 I wanted the interface to monitor the top 5 appliances that used the most amount of energy since the last log in, I did this from the last log in so that the user can log in multiple times in the course of the day and see what appliances are being used more frequently than others and cut back.

I presented data in Watts or kilo Watts per hour as these were the most common type of unit and people understood what they were communicating. To display the data that I gathered I used animations and text. The animations were a way of graphing data, for example I used a tank animation. The tank filled up to show that it was full and each tank was worth something e.g. 1 tank = 40 watts. This gave the user a visual representation of their energy consumption for each tab.

To compliment this I displayed in simple and blatant terms the exact energy amount of energy being displayed in a tab. This meant that the user did not have to sit for a long time to calculate the data based off the graph animations. I did this as my user target is constantly on the go, hence why designed for smart phones, and can not allocate the time necessary to constantly calculate their own energy from the monitor. This would defeat its purpose.

Overall I think I achieved my goals and designed something that I would use, if it was available. It clearly and simply displays data to the user in order for them to comprehend it fast and not consume their time. It looks age appropriate and is suitable for its purpose.

Taking Shape

The Interfaces Design was starting to come together nicely as I put the finishing touches on alot of things.

Data

To make the flash interface look real I talked with my tutor and he said we needed to put data in the interface to show how it would work. When we did the energy monitoring diaries in the holidays I didn't monitor things like the car or my communications. This meant when I was calculating the data for the interface (I wanted it to be like if the user opened it up and that was the data) I had gaps. I researched what I needed from some websites such as:

For the Car:

http://www.guardian.co.uk/environment/green-living-blog/2011/jan/17/electric-car-emissions

I did this because in the future most people will have hybrid cars as fossil fuels become rarer and demand for cheaper sustainable travel increased.

For the Cellphone:

http://answers.yahoo.com/question/index?qid=20100730123650AAox0Y6

I thought this was the best data as it had been calculated by an engineer and I found it easy to read.

I combined these with the data I had gathered from the energy diary in the holidays. I did these in Watts as I wanted to know the highest power they could reach when in use. This interested me because quite often I left things plugged in and running e.g. the heater when I would leave a room. Living at home makes it easier to forget that you contribute to the energy consumption of a house because you arent the one paying the bills but having learnt what I did I had a different perspective. This is why I chose watts for my interface because I wanted the user to have the same if not similar revelation that I did.

For the total I had to convert a couple of things from kWh to Watts in order to calculate everything in the same unit of measurement. I used this conversion calculator to get an accurate calculation http://www.unitconversion.org/unit_converter/power.html. I used this again to convert the total watts into total kWh which is something the user could see and easily address and he/she can see that the power for the hour could be lowered.

Problems

I used flash in the past so I knew the basics of how it worked, I thought this was great considering it was a few years ago now. However when it came time to code the buttons I had extreme difficulty. The action scripts were different so what I knew how to do was void. I also didn't find the tutorials very helpful. This was because they were all for one button. However with many buttons it doesn't tell you how to do these and I kept coming up with errors. In the end I stumbled upon the correct code, except by this time Id wasted an entire day.

Inverting

I decided that black made the blue seem less calming than white. The white also gave the impression of a sleeker feel which as I was targeting 20-30 year olds in urban areas I liked better. I also consulted with some people outside the design school between the ages of 20-30 who liked the white background better. They felt that it would be easier to see data and that it would be bright and cheerier than the black.

Development

After looking at all these precedents and images I started to change my design and interface to reflect the things I had found out. I liked the progress and the new design was starting to look really nice and loose the amateur/powerpoint feel. The images where I learnt about colour and line have really come in handy especially in terms of how to present data in an easy to read but cohesive manor.

LInes

I decided to look at blue lines and find inspiration for the design.

http://www.flickr.com/photos/lomokev/3257067983/

http://www.wallpapers-room.com/2540/filter/popular/author-357/4/

http://anco81.deviantart.com/art/Blue-Lines-XP-150067343

The fade in ZM

I was listening to the radio today and I saw an interesting way to use a fade as a background when combined with an image. It was for the ZM radio stations Listen Live page. I have images in my present design yet I haven't found a cohesive way to put them into the interface without them seeming like clip art or becoming tacky.

The ZM page showed me that I could use an image as long as it was not dominating the data/text of the screen.

Precedents and Research

I realized I hadn't really looked at many other energy monitoring interfaces and that doing this would help me with how to layout my design in a more appealing way that reflected what I wanted to show, who I wanted to target and didn't look so amateur and boring.

I began looking at websites such as http://visualization.geblogs.com/visualization/kitchen/

I liked the way this website had used its tabs. It has a clearly defined label and you could tell thanks to the arrow which data you were looking at. I want to incorporate this into my design as I think it gives a sleek and modern feel.

I also looked at http://flowingdata.com/2011/09/16/world-population-densities-mapped/

In this website I liked the way that colour and different types of the same colour range were used to emphasize certain things. The blue fade down the bottom also looks very nice and would work well in my design.

I also looked at

http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf

I liked this website because it introduced a different way of viewing colours. For example in the first image it used a fade and 3D to show data. It also contrasted this with just a regular bar graph. The data in the image i've shown was a lot easier to read, it was better to look at and it looked modern. This leads me to the conclusion that abstract ways of presenting data are better than traditional as long as the data makes sense. The second image also showcases how faded/withdrawing the colour out of a hue made them easier or nicer to view. I will take these into account with my colours and their uses in my project.

Feedback

I showed my tutor and peers and the feedback was pretty similar. They did not like the icons and they weren't very impressed with the design. I agree, the icons make the interface look tacky and cheap and the background and design give off an amateur/powerpoint ish feel.

Home Revamp

I decided the Home Page was a bit underwhelming so I began designing a new one which looked like this:

Beginning

This is what my interface looks like now. The Icons are clip art with the tanks animating into a full or half full mode.

No Go

The new design was rejected and I was told that I should stick with my original. I understand that the Energy Emissions Crisis is something to be worried about now and will target my work on this however I was disappointed that a different energy crisis was not allowed to beexplored. Human Energy is a huge crisis with more and more people frequently becoming

obese as they consume more energy through food than they expend and therefore gain weight.

I've decided to stick with my original idea, just change the layout. For example I will no longer use the hour glass backdrop. I've also decided to use the layout I would have used for the Human Energy interface in the current one. The colour scheme will remain unchanged. I redrafted some buttons and quickly sketched out what types of animations I wanted.

The New Design

I was very happy with the results of my re-designing and came up with a completely new concept. I believe that this concept will target both men and women 20-30 and urban. People are becoming more health and exercise conscious and I decided that a type of energy is food and food consumption and that I would design an interface to reflect this. I was happy with my final plan.

The new plan is listed below:

Re-Design

I started to create the basics for my interface when I realized I did not like the design. I wanted to design for corporates 20-30, urban and mostly male. However the design for this did not reflect the target range. I decided I needed to re-design and began drafting out new ideas and concepts.

Colour or Kuler

Before I started on the physical construction of the interface I needed to know which colours I would be using. For this I enlisted the help of Adobe website Kuler which I had been shown in DSDN142. I decided on a colour scheme involving blue/grey for a sleek grown up feel given my target group was 20-30 males.

After this I drafted a 'Colour Log'. This was a place where I allocated a colour from the scheme to a particular function in the design e.g. text, buttons or animations. I thought this would be helpful as it provides me with a reference guide and enables consistency.

Artists Statement

I want to create an application which displays information gathered throughout the users day in a clear and unique way. The user would be carry on their personage something which wireless reads the amount of energy an appliance/object is using. This then transmits this to the application through the internet. The user will have the application pre-loaded onto their electronic device e.g smartphone, tablet or personal computer/laptop. The application will use an hour glass shaped image which will have a moving middle point. The middle point represents a pre-defined threshold of energy usage and anything above this is plotted according above the point. This means that if there is more data over the threshold the top of the hourglass is bigger, it gives it a look like its going to tip over. It is also symbolic of high energy use being equal to high amounts of pollution and green house gases which rise upwards.

The application will use this method to display the data it reads from one day and everything it reads from under a tab titled ‘today’. It will also be able to show the total energy usage for one day for everyday of the week in the ‘week’ tab. This is also displayed for the entire month in the ‘month’ tab. When I was recording my energy usage the one thing I was curios about was how my usage measured with me peers. So my application will have a tab titled ‘friends’ which automatically shows the days energy from the users friends. A total spent tab will also display the amount the user has spent on energy for either the day, week or month as well as a list of websites the user can view for more info.

Application StoryBoard

These are my final designs for my interface.