Content for "Find Out Why" page

Prepare the content/copywriting for each layer and the beginning of the page.

Beginning (Introduction)
"Meat consumption is rising rapidly, both as population increases and as people eat more meat including in Malaysia"

"During meat production, several processes take place which generates greenhouse gases that contribute to global warming."

"Let's find out how these processes generate greenhouse gases into the atmosphere"

Layer 01- Livestock production

1. Import Demand for Beef

"Beef imports into Malaysia increased during year 2009 to 2013. Beef industry in countries such as Australia, India and New Zealand are the source of beef imports in Malaysia. These countries have to increase the the amount of cattle to be raised in order to fulfil demands in Malaysia."

2. Cattle production

"With the increase of beef demand in Malaysia, the amount of cattle to be raised is also increased. More land are needed in order to raise them."

Layer 02- Deforestation
1. Destroying rainforest 

"Livestock production takes up 30% of earth's land surface which was once habitable for wildlife. Each second, an area of rainforest the size of a football field is destroyed to produce 257 hamburgers. The more livestock are produced, the larger land surface is needed."

2. Release of Carbon Dioxide

"Deforestation releases as much carbon dioxide (CO2) into the atmosphere. The amount of CO2 produced by deforestation are much higher than the average amount of CO2 produced by cars."

Layer 03- Meat processing 
1. meat slaughtering

"Cattle who survive feedlots, dairy sheds and veal farms will be transported from the producer(farmer) to the slaughterhouse."

2. Meat storage

"Once slaughtered, the meat will then be stored in a freezer and is ready for the markets."

3. Meat transportation

"After the meat is processed, it is transported to various markets. Countries such as Australia, India and New Zealand will be exporting the meat to the other countries including Malaysia."

4. Release of Carbon Dioxide

"The meat that is transported using rail and trucks consumes more than 35 billion gallons of diesel fuel, which emit 350 million metric tons of carbon dioxide into the atmosphere. The release of carbon dioxide causes the temperature of earth to increase and thus global warming is occurred."

Layer 04- Manure management
1. Digestive system 

"Cows are called ruminants as they have one big stomach with four compartments which is different from other animals, and they create gas during digestion process."

2. Collecting Manure

"On average, one cattle can produce over a hundred pounds of manure each day. The manure of cattle are collected to be disposed or used for other purposes."

3. Manure storage

"Manure is collected via washing or scraping, into the fabricated steel manure storage. The majority of manure is land applied as it provides valuable micronutrients to improve the soil."

4. Release of Methane gases

"A gas called "Methane" is released from cows' manure during the anaerobic digestion of manure. Methane gas is the second largest contributor to greenhouse gases as it is 23 times more powerful than carbon dioxide at trapping heat in the atmosphere."

"Find Out Why" page interface

Refined and tested with different design for the information "box".

When the video is paused by the users, interactions will occur such as click to read information (including little simple looping animation) and others such as drag and drop or sliding. Users will be given 3-4 second to decide whether or not to click on the button to read more detailed information. If the user ignored, the video will be continue playing. During the 3-4 seconds, an animated button(to grab users' attention) will be displayed on top of the video. When user rolls over onto the button, title of related topic and *click-to-explore* text will also be displayed hopefully with a transition to make it looks more interesting.

Flow of motion graphic

Sketches, planning and brainstorming on "find out why" page are done on papers. The sketches can be found at the link below for detailed information.
https://dl.dropbox.com/u/23409639/Sketch01.pdf

Basically, I have planned the transitions for each layer as well as the cue points for the video on each section. I also had rough sketches on plot.
After sketching out and planning, I will be start working on motion graphics using After Effects as it does have more effect presets and it is more controllable.

Changes in execution

(before studybreak)

After discussion with Kelvin and Sweii regarding "find out why" section where users are allowed to explore more related information, I have decided to remove the question for each layer/process before they proceed to read the information as the questions that will be asked are mostly fact and users might get bored after answering all the questions. From Kelvin and Sweii's opinion, they thought that it could be unnecessary to be included in that section as users might just stop using the website and leave. In addition, they have also provided me some references that contain narrative (animation) in the website.

One of the websites which is MGM Grand Hotel website inspired me to create an animation/motion graphic that shows the information of each layer/section instead of showing a static one. Besides, I also planned to include interactions within the animation so that the animation will be more engaging and interesting to the users. The interactions however need to be relavant to the information shown within each layer.

So, during the study break I will be brainstorming and planning the flow of animation as well as the interactions (include timing for each interaction). I will also research and do testing on cue points using action script (import FLV video into Flash and create cue points)

Content Planning & Restructure II

Digital Sketch of interface design

Find out why section: In order to engage more users to visit and interact with the website, the interaction between users and their friends is also quite important. Previously, my website is just allows users to explore each layer and different process to get the information. Now I had insert quiz to encourage them to participate more on the website before they start exploring. Users will able to see the correct answer of the quiz as well as the result comparison between user and their friends. 

User clicks on one of the layer to proceed. 

User will be exposed to question/quiz before proceed.
He/she is required answer. 

After the user has selected (click) on the answer,
they are able to see the result which is the
comparison between FB friends. 

User clicks "next" button to proceed. Detailed information of the answer
to the question previously will be displayed on this stage.
This is to encourage users to continue reading the website. 

Content Planning & Restructure

From the feedback that I received last week, I had changed and restructured my flow of content as well as the interface design to hopefully improve the user experience. The content and interface are changed so that the website can make use of the social media and thus to encourage more users and friends to visit the website.

Digital sketch of the interface design:

After users have answered the question, they will see the result page
straight away. And there will be two buttons on the bottom which are:
"information section" & "find out why?"

The circles represent the profile picture of users' FB friends in B&W.
When mouse over on one of the circle, colored photo will appear.
Users have to click on the circle in order to see more detail info.

User get to see the comparison of the result between him/her and friend.
Information will be displayed: Name in FB, no. of meal intake &
the percentage of CO2 produced by them. Four circles (icons)
at the bottom are the detailed information(total co2 produced per day)
 regarding each layer of process. 

When user clicks on each button (icon), they are able to see the
information in a new page with graphics and text.
The content includes the total co2 produced in this layer
per day (the day users visit the website)

I had also found a few flash website as reference as they display nice and straight forward infographics on the website to show data and information:
Florence is Green

I had planned to implement similar art direction onto my website interface design (displaying information & data)

Another website that I had found is Consumer Barometer. Although the website is scripted using HTML, but the transition and interactive design is interesting as it looks very dynamic. I would like to apply similar direction onto my website as well especially the on the Friends' Result Page.
Example of the interface design of the website:

Another website that shows interesting interaction is Work Connects Us All. The data/information is gathered and formed a globe which connected to each other under different categories. Uses are able to differentiate the categories by looking at the colour of the circle. Example:

Content // Copywriting

Collecting data and information // Planning content flow (refined version)
Did calculation for each process to get the equation

Scanned sketch and notes:
https://dl.dropbox.com/u/23409639/notecombined.pdf

Refined content flow chart version 2

Flow chart version 2 link:
https://dl.dropbox.com/u/23409639/flowchart_mmpp_v3-01.jpg

Refined content flow chart version1

I have refined my content flowchart which is focus on the information and results showing part.

Click here for full version of flowchart
https://dl.dropbox.com/u/23409639/flowchart_mmpp_refined.pdf

Refined Gantt Chart

Larger and clearer version of refined gantt chart click here:
https://dl.dropbox.com/u/23409639/flowchart_mmpp_refined-05.jpg

Gantt Chart

Link to Gantt Chart URL:
https://docs.google.com/open?id=0B1RDxqU9eEwoM21mSm5MQ1ZYZDQ

sketches of idea

Prospectus

I am required to write a prospectus in a PDF format that shows the information of my project ideas.

Those points that I have highlighted are important. By the way, the points with grey highlight is the things that I am confused. 

Flow chart diagram // activity diagram

I have created a site architecture of my website. This is the updated version. 
Also, I have created a flow chart diagram that shows how is the content going. 

 

art direction // moodboard

As the concept of my project is magnifying. The users are required to explore and find out things in the website in order to know the result. So I have planned to have a mysterious theme for my website. As the idea/content of my website = "factory" is a non-existing kind of building. therefore, i was thinking to have surrealism art direction for my website to create that kind of "mysterious" feeling.

I have looked into several photo montages artists' works and one of them who has inspired me: Jerico Santander.  I have done researched on this artist's work during my first year and I found out that most of his works create mysterious mood. He was inspired by surrealism artists to lead him to produce artworks towards surrealism. He used several pictures and combine them together to form a complete artwork. Example of his works:

source: http://www.jericosantander.com/

Beside his artworks, I also found some other photo montage artists who produce amazing and impressive artworks. Most of these artworks are towards to surrealism and hence create a mystery and fantasy mood in terms of the colour used and the design element in the particular artwork. 

source: http://www.zimbio.com/Sarolta+Kovacs/articles/bQdzZljzKBU/Surreal+Photo+Manipulations


http://www.tutorart.com/index.php/daily-inspiration-439/

Here I also found some example of factory that brings out the mysterious mood: 

source: http://www.behance.net/gallery/Mannequin-Workers/844033

Here is another example (less similar) of how the mystery mood I want to create:

source: http://www.behance.net/gallery/Mystery-Case-Files-MillionHeir/485184

http://www.behance.net/gallery/-/819113

overall mood:

 
=====================================================================

one point perspective of view.

source: quitdoingitlabs.com

source: http://www.ea.com/monopoly-hotels-ios/images/vip-guests

source: http://www.behance.net/gallery/Haunted-Mansion/784313

story / narrative draft

I did brainstorming on how social media related to the content of my website and came out with a draft of the story/ narrative of my website content.

My plan was to separate the content into two parts. For the first part, I think in order to let the audiences to feel afraid and shocked, I need to show them the effect of global warming to them, and I was planning to bring in their Facebook data such as their friends into the content and form a story. The story involves audiences' most active friend and friend's location in Facebook.

The story goes like this:
1. User will be shown a TV news with his/her facebook most active friend on the screen. The news reporter is reporting that there is a disease spread on the location (where the location of his/her facebook friend's stay) and reporting that his/her friend is one of the victim. The reporter will also mention that the cause of the disease is unclear.

Then, the TV news ended and second part begin as user is given a task/mission which is to find out the cause of the disease. (The disease is actually one of the effects of global warming, source: http://www.environmentalgraffiti.com/offbeat-news/malaria-no-longer-eradicated-thanks-to-global-warming/402) User is then brought to a farm and start interacting with the objects surrounding them, user will also interact with the character to find out more on the cause of disease. This part of the content will separated into 3 smaller parts, which the user will find out 1. what kind of animals are ruminant (which they have four compartment stomachs and their digestive system is different from others). 2. What is methane and nitro oxide gases (their cause and effect)
3. comparison between carbon dioxide and greenhouse gases and the effect to global warming.

There is a similar example of what am I proposing for the content of my website:

http://www.talktofrank.com/cocaine-basement
It is an interactive platform where it allows users to experience the how cocaine affects human.
User is given a scene where he/she is allowed to explore the things within the base room. User is allowed to click each section and to further explore the content. I think this website is visually interesting as it looks real and user can immerse into the content and really experience it. I believe that the user experience for this website is scary and they want users to avoid taking cocaine after they have read the effects and consequences.

Mindmap & Final Decision Making

The above is the mind map that I have done after all the research. It is also a summary of what I've found from the research and my ideas, and problems. From this, I have finally made a decision for my final project.

Motive:
The motive of creating this awareness campaign is to see how audience are able to receive the message and what are their responses towards the message.

Aim:
The aim of choosing this topic is to raise awareness on meat consumption causes global warming to the public as the amount of meat intake is increasing. The public have to be told about the seriousness of this matter.

Mission / Message:
To educate them on how actually meat consumption can cause global warming and also health issue. Beside, this project is also to encourage them to reduce consuming meat in their eating habit in order to slow down the rate of climate change.

Delivery Platform:
This project is going to be an interactive website which allows users to interact with the content while they learn about the matter. It is an online website where users can access through internet and from any place, any time.

Technical specification:
In order to increase the mobility of the artefact (which means users are able to view it anytime and anywhere), I have decided to create the website using HTML5. As apple products users are not allow to view Flash image/website from their devices, therefore by using HTML5, it helps to wider the range of people that able to view it. It also helps to promote the website/ campaign.

Content:
This artefact will be showing the information about how different live stocks emit different kind of green house gases and how these gases can pollute the environment. It will be a narrative that explaining the process of meat production and the seriousness of the matter as the objective is to raise awareness on how actually meat consumption can cause global warming to the public.

Genre:
Therefore, it will be an education yet entertaining interactive website.

Target Audience:
this project will be targeting age group of (18-25 years old) Malaysians who are young adults that are exposed to many digital devices nowadays. From the research, I found that this age group of people actually consume more meat than the others in their eating pattern and therefore the need to educate these people are higher.

Working Timeline

I have roughly planned a working timeline in order for me to follow and carry on with the works later on for this Semester. There will be 14 weeks in this semester and contains 2 assignments. The assignment due date is on the last week of semester (week 14). Starts from week 7 until week 11, I will be researching and planning on the content of my final project.