Rationale

Videos

Our videos portray three different ways that the viewer could cut down on their water wastage in the home. We chose to look at showering, washing clothes and brushing teeth as we think that they are the areas in which you could save the most water if you made a small change to your habits.
Our narrative was influenced by opening credits to thriller/horror TV shows and movies such as Dexter and Seven which consist of close-up and extreme close-up shots which emphasise small details and build tension and intrigue as the full body of the subject is not revealed until the end.
We also added to this tension with our choices of soundtracks for each video. The music we used was sinister, sad, and kept the viewer engaged in the video, while at the same time making them feel uneasy. We tried to fit our clip transitions to the beat of the music to make the music feel like it was part of the narrative.
We also used the important sounds from our footage to create ambience of the activities that were being portrayed. These sounds also backed up what the viewer could see and read.
At the end of our videos we confronted the viewers with a sudden reveal of the person they had been looking at close-up, often intimate, details of. The person was now breaking the fourth wall and staring directly at the viewers to make them feel unsettled and guilty, like their actions were being judged. Directly after this the call to action is unveiled to encourage viewers to change in order to make those feelings go away. It is almost as if the person is telling you directly to make these changes - it makes it personal.
We chose to keep the same tone throughout the entire length of the videos as we feel that the topic we are depicting will not be resolved (and therefore be happy and fun) by the viewer just making these few small changes to their habits - although any effort to make these small changes will help.
We used infographics at the start of our videos to convey alarming facts about water scarcity and wastage which grab the viewers' attention. Then the infographics change and tell the viewer how they can do their small bit to help the situation. We chose to use infographics as we feel that people will be more likely to read them than plain text as they are more visually interesting. We especially feel that this style of conveying written information will appeal to our target audience of youths as they are more visually orientated.
We purposely made the lighting in our videos a grimy, dull grey-green/grey-yellow colour to convey the idea that everything is not perfect or pristine as the issue we are portraying is ominous and gloomy - something people would rather not think about.
We made all three of our videos in the same style to make them a cohesive collection.



Website

We decided to format our website as one long webpage that viewers can scroll down or use the navigation icons on the fixed header bar to jump to key points. We felt that the information that we wanted to convey would be too disjointed on different pages and our target audience would be less likely to click through a website in order to view it all. This is because, in general, youths tend to spend less time exploring a website that requires them to go to different pages than they would to scroll down one webpage. Another reason for this layout was that we also wanted the information to be viewed in a certain order and this allowed us to control the narrative throughout site.
Narrative = Alarming information at the start - Videos and tips showing you how you can make a difference to these facts in the middle - Call-to-action that makes you want to change you habits at the end
We coded interactive navigation icons that allow our viewers to choose to jump to a certain video if they would like to focus on how they can alter their water usage regarding that activity. These icons change when hovered over to make them more interesting and encourage the user to choose a topic they want to learn about/they could save water in. We also made the page header/title change on hover and clickable to take the user back to the top. We felt that it needed to change on hover in order to be recognised as a link.
We wanted to emulate the sombre colours in our videos, so used greens, black, grey, and white for our websites' colour palette. These colours are drab, scary, worn-down, grimy, and sad which fits our theme. We continued the use of white text to link to the text in our videos. We chose to use black for the header and footer to frame the information. We alternated between two greyish greens for our content sections so that they were visually separated and could be understood as separate points.
The looping video that is constantly wasting water confronts the user when they first enter the site and is visible in various small sections continuously playing in the background. This affects the viewer by reminding them about the constant wastage of water, subliminally reinforcing the key issue that we wish to change.
The first main content section tells the viewer about the issue; what is occurring now and what could occur in the future. We use infographics to link our webpage to our videos in order to make the information seamlessly integrate between the media platforms. They also break up the body copy and therefore make the important information that we want to convey easier to read at a glance. In this section we have included several links to other appropriate, reputable websites where the viewer can find more information about the issue. This helps to reinforce/back up our issue as a real problem that is being discussed globally.
Next we showed evidence of real life scenarios caused by the scary issue of growing water scarcity through images. These support our facts and make the issue real. They also make the viewer empathise with people that they could help by making a small change.
Before the video sections and after the sobering facts, there is a blurb about how the rest of the webpage will give the viewer tips on how they can do their bit to help the situation and make it less scary.
The next three sections were our tips on the big changes that ordinary people could make that would make a difference. These were in the form of videos. We didn't want to overwhelm the videos' importance by placing too much information on their sections, instead we wanted them to speak for themselves. Therefore the only piece of text supplied with them is a small call to action statement specific to that topic about what changes the viewer could make to their habits to make an impact. Each video has its' own section as we feel that they are three separate areas where viewers could make changes. The videos start on a black screen to encourage the user to click play as they are curious about it. The videos end with the final statement still showing, meaning that once the user has completed watching the video(s), this point remains visible as they scroll back through the website.
After the videos we gave eight more small tips of what the viewer could also consider doing in their household to further conserve water.
After the videos and further tips on how to cut down on household water wastage, there is an encouraging statement about what these changes would do if you partook in implementing them into your daily life. Once again, like the tone of the videos, this statement is not exciting and happy - merely serving as a small bit of hope that if you contribute it could make a big difference.
Our call to action is reinforced by the 'Change' animation at the end of our webpage, which leaves the viewer with a sense of purpose - there is something that they can do to help.
In the footer we attribute the music to its' author and source. This source is a link just in case viewers were interested in the origins of the music.



Target Audience

Our webpage and integrated videos are aimed mainly at a young adult audiences in flatting situations because we feel that this group are more likely to waste water showering and not running full loads in a washing machine as they might wash their clothes separately. Our final webpage and videos, however, do cater to all adults who might wish to view them/are interested in the issue. We think that the sinister/thriller-movie-like tone of our videos will appeal to a youth audience as these types of movies engage and interest younger adults.



Kaitiakitanga

Our project confronts the viewer on how they are using a valuable and vital resource. It makes them consider whether their habits need changing through making them feel unsettled and guilty about the moral consequences of their routines. It encourages the viewer to think about a resource that they take for granted. It aims to scare the viewer into considering the balance between the natural environment and people. It makes them think about the many small changes they could make in their daily lives that would collectively make a big difference and impact to the growing issue.



Programmes

We used five different programmes throughout the process of making our videos and website. These were:

- Adobe Premiere Pro for video editing, rendering, and exporting
- Adobe Illustrator for creating infographics
- Brackets for creating/coding our webpage
- Adobe After Effects to create our animation where the tap drips
- Adobe Photoshop for editing images



NB: Our videos only play in Safari, not Chrome, on our laptops as Chrome apparently doesn't support MP4's anymore on some computers - if the videos aren't playing for you please try the webpage in Safari!

Final Refining of Website and Videos

Reconsidering Light Green Section Colour:

We want to change the light green background colour slightly so that the white text on it is easier to read.
This colour is getting close to what we want, but it is still a bit too yellow for our tastes and we feel it isn't harmonious with the other green used in the background of other sections.

We feel that this colour works best.
It is dark enough for the white text to be easily read on it but it still feels cohesive with the videos and the other colours on the website.

Header Change On Hover:

The header of the page now inverts when the mouse hovers over it so that the viewer definitely knows that it is clickable.

CSS 

HTML

Videos End On Text Not Black:

We took the fade-to-black off of the end of our videos. This means that they end on text so when the viewer is scrolling through the website after viewing the videos they will see this text instead of a empty black box.

Infographic Changed In Tooth Brushing Video:

We are going to use this fact; "An average New Zealand family uses 250-300 litres of water per person per day" (from http://www.nrc.govt.nz/Environment/Water/Take-action/Saving-water/), to reword our '95% of household water goes down the drain' infographic.

Working out new wording:
Average NZer uses 300 litres of water per day
95% of 300L is 285L
The average New Zealander wastes 285 litres of water per day
The average person wastes 285L of water per day
Average household is four people, therefore 285x4=1140L
Over 1000L of household water goes down the drain
Over 1000L of household water is wasted each day

Putting the new infographic created on Illustrator into the video

Changing Music To Upbeat:

It was suggested to us that we could change the tone at the end of our videos in order to create a happy conclusion, uplifting people and positively encouraging them to change their habits.

We feel that changing the music to a more upbeat, happy tune at the point in the videos where the infographics change from telling you about the issue to telling you what you could do to help would detract from the tone that we are trying to achieve. Instead of encouraging people to make these changes by saying it will be fun or rewarding, we are trying to scare them with the facts of what will happen if they don't. This is because we feel that the small changes we are asking people to make are not changes that anyone will notice people personally doing, nor are these changes exciting or fun - they just are small alterations people need to make to their daily habits in order to make a difference.

Jo's Final Critique

- The header could change on hover so that viewers definitely know it's clickable and so that it emulates the navigation icons.

- Light green background colour on some panels needs reconsidered as the white text/body copy doesn't stand out from it.

- Make the videos end on text (not fade to black) so that this info is always visible once you have completed watching the video(s) but are still scrolling through the website.

- Change the '95% Down Drain' infographic in the Tooth Brushing video as it is already in the Showering video and the viewer wants to see new information.

- Could consider making the music more uplifting at the end of the videos to make the viewer feel motivated to do something.

More Website Developing

Adding more information about water shortage/wastage worldwide and its' effects

Adding further ideas about how to conserve water at home

Adding images in their own section

We altered the colour of the map on Photoshop to reflect the colours we've used on our webpage, but the text on the image was too small and hard to read

We made the text bigger and therefore easier to read

We made the images into one long image bar on Illustrator so that it would be easy to set the left & right margins for the image to auto in our code. Therefore the browser can be any size and the images will always be in the middle. We also made the max width of the image 100% so that the image will scale down small when the browser is smaller instead of getting cut off the page.

Targeting only the link in the footer to be grey

Making the other links light green normally and dark green on hover to match our colour scheme

Moving the images to underneath the scary information section as that is what they relate to so they are more impactful there

Adding another catch-phrase after the videos to enhance our call-to-action. We placed it in the gap that we had already made (in order to see the background video through) and made this gap a bit wider to emphasise it.

Looking at using hazardous/warning colours in our background - yellow

Looking at using hazardous/warning colours in our background - orange.
We decided that these colours were too garish, bright, and fun for our topic. They don't convey the sad, drab, slightly frightening feeling that our green colours do.

More Information for Our Website

While the amount of freshwater on the planet remains constant over time—continually recycled through the atmosphere—the human population has rapidly expanded. This means that every year there is more competition for a constant, clean supply of water.

Water scarcity is an abstract concept to many and a stark reality for others.

Due to geography, climate, and competition for resources, some regions seem relatively flush with freshwater, while others face drought and debilitating pollution. In much of the developing world, clean water is either hard to come by or a commodity that requires laborious work or significant currency to obtain.

The challenge we face now is how to effectively conserve the water we have.

This webpage encourages you to explore the ways you can change how you use water and make a difference by reducing your water wastage.

Paraphrased from: http://environment.nationalgeographic.com/environment/freshwater/freshwater-crisis/



More tips on how to conserve water in your home...

1. Check taps, pipes, and toilets for leaks, as they can waste hundreds of litres of water each year.

2. Don't use the toilet to flush rubbish like tissues - every flush uses 20 litres of water.

3. Put a brick or a weighted plastic bottle in your toilet tank to cut down on the amount of water used each flush.

4. Put some water in the sink to rinse your razor when shaving instead of running the tap.

5. Always fill the dishwasher to capacity before running a load.

6. When washing dishes by hand, don't leave the water running for rinsing.

7. Don't let the tap run while you clean vegetables - just plug the sink to rinse them or use a bowl of clean water.

8. Keep a bottle of drinking water in the fridge - running the tap to cool the water for drinking is wasteful.

Paraphrased from: http://eartheasy.com/live_water_saving.htm

Pages to Link to from Website

http://downtoearth.danone.com/2015/03/23/water-and-sustainable-development-the-issue-at-the-heart-of-world-water-day-2015/ - About long term issues of water wastages/shortages

http://thewaterproject.org/water_scarcity - About water scarcity

https://www.worldwildlife.org/threats/water-scarcity - About both topics

Images We Might Use On Our Website

http://followgreenliving.com/water-scarcity-causes/

http://news.bbc.co.uk/1/hi/8188409.stm

http://www.un.org/waterforlifedecade/scarcity.shtml

http://www.globalresearch.ca/top-ten-countries-at-risk-of-water-shortages/19996

http://waterandchange.blogspot.co.nz/2010/11/environmental-and-human-factors.html

An Interactive Water Wastage Website

http://everylastdrop.co.uk

Further Website Developing

Hannah made this infographic of our call-to-action phrase to put at the end of the webpage

We put the newly revised showering video in

We made our call-to-action phrase an animation in Adobe After Effects (a drop of water falls out of the tap) 

We exported this clip as an H.264 so that it would be an MP4, allowing us to embed it in our webpage

We placed the animation in our coding and made sure that it was looped

We had to centre it and give it some padding

We filmed water going down the drain of Hannah's bath and exported it from Premiere Pro as a short clip that we could have continuously looping at the top of our webpage

The looping background video placed in our webpage

We separated both the information section and the footer section from the video sections by making little gaps between the block that allowed the video behind to show through

We worked out how to make our header a link that would take you back to the top of the page when clicked

Adding more text after the videos that includes more of a call to action

Revised Shower Video

We re-worded the infographic that our viewers were finding hard to understand:

Website Developing

Navigation icons change when you hover over them

Before - Text is in a small column with video floating to the right

After - Text is underneath video

(Georgia) - While Hannah was away I worked out how to centre the text + also set the left & right margins to auto so that the browser can be any size and the text content will always be in the middle

(Georgia) - I also worked out how to set the left & right margins to auto for the infographics too so that the browser can be any size and the infographic content will always be in the middle
+
I worked out how to make the body copy white

(Georgia) - I then worked out how to set the left & right margins to auto for our topic videos too so that the browser can be any size and the video content will always be in the middle

More Website Inspiration

While on the internet I found the Skype website (http://www.skype.com/en/), which has a very similar layout to what we are trying to achieve.
This includes it's header, the video at the top of the page that autoplays and loops, and it's scroll-down, segmented style of layout. It may be a good resource for coding, or just as a visual example of the sort of website we are aiming for.

The image of the people is a video that loops behind the text

The header bar follows you down the page

The website is divided into segments by colour blocks of white and blue

Finished Videos

Showering:

Washing Clothes:

Brushing Teeth:

Starting our Website

We used 'Template 3' from Stream as a starting point to build our webpage on top of: