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

Confirm art direction and colours

I had decided to set a color palette for my website interface design so that I can have my design element done according to the colour palette. I also had decided to narrow down the colour range which is only use one main colour to represent my website. I have chosen red/ maroon colour because it matches the concept of meat. The other colours such as grey, white, and black will be remained. Besides, red colour also can indicate the rise of temperature on earth which is representing global warming.

Colour palette 

I was also inspired by Event & Music Website that I had came across that day on Behance.net. The dominant colours of the website interface are also grey, white and black. Yellow colour is main colour website as it also symbolises certain concept/object. The overall design gives a soothing feeling to the audience when they first few because it does not contain too colourful design element yet it's not boring and it is easier to enable audience to focus on the content itself.

Besides, I had also found some icons and interface design reference from behance.net. The design of the icons are simplified and it looks neat and clean. I thought that the sample of the icons and interface design matches my website design. I am going to try to implement the art direction into my website later on.

Slider/ bar design looks sleek and elegant.

Close and tick(confirm/yes) buttons 

Integrate social media with website

I realised that nowadays most of the websites have integrated with social media such as Facebook, Twitter, Google Plus, etc... The features in the website allow users to connect with their facebook account and 'like' the particular page or article, and the article will then be published on their Facebook wall post (although user can customise and control the privacy of the post). This helps to spread and share things to their friends in Facebook. It also attracts more and more people to visit the website.
Besides, on the website there will be showing the number of people using Facebook who likes the particular page/article as well as the users' friends. This enable users to know who among their friend lists have been to or liked the website they are visiting, and this allows them to create common topic to discuss.

It is also very common to use these social media as advertising purpose in the website especially for business. There are more and more companies who create Facebook Fan page to attract more audience/ customers to their business.

Steps on integrating Facebook Connect on website
http://www.insidefacebook.com/2008/08/01/facebook-connect-overview/

Integrate social media for business/advertising purposes
http://www.entrepreneur.com/article/204490

10 ways Facebook Functionality
http://www.socialmediaexaminer.com/10-ways-to-add-facebook-functionality-to-your-website/

There is this article shows that the average media sites integrated with Facebook has seen 300% increase in referral traffic. People who sign in with Facebook in the website read 20 more pages and spent longer time reading the site. I also found something interesting which the article said,

Facebook says Like buttons get 3 to 5 times more clicks if:

• Versions that show thumbnails of friends are used.
• They allow people to add comments.
• If they appear at both the top and bottom of articles.
• If they appear near visual content like videos or graphics.

I think this can be listed in my consideration when comes to design the UI for my website as this helps to attract the audience.  http://laurelpapworth.com/statistics-why-integrate-facebook-into-your-business/

I feel that people are now rely on these social media to find out the credibility or usefulness of the website. For example, if the user see there are more 'likes' on that particular page, this makes the users think that the website is good/trustworthy and hence encourage them to continue browsing the website as well as when users are able to see thumbnails of their friends who have used/liked the website. This is probably because individual is curious about what their friends doing and wanted to know more about them. I realised that these are important in making a website in order to attract more audience to the site. For my case, my target audience who are young adults are the group of people who spend more time on the social networking sites. Therefore, social media plug-ins can be one of the ways to engage my target audience to take action after visiting my website.

I have decided to use Facebook Connect to show the interactions between the users' facebook friends and the website. I will continue brainstorming and refine the previous flowchart. The refined flowchart will be uploaded separately in another post later on. 

decision making

Mobile vs. PC?

I have not really decided on which platform to be used for final project to deliver the message. But it will most probably be a HTML5 / flash website as I can integrate more interactions. After I have done the research on media and internet usage in Malaysia, I realised that smart phones are mostly used for getting fast information for instance when your looking for the location of a restaurant, u need a map, you will probably open the google map or google the places so that you can get the address. Another example is when you are waiting for a dish to come in a restaurant, you will probably take out the phone to play game or browse through social networking site such as twitter, facebook or instagram. Smart phones are used mostly for entertainment, and I think it's not suitable for education purpose.

There are advantages of learning using mobile phones because it involves independent learning, more interesting, users can adjust their individual learning speed, and mobile is a familiar too/medium to them. But there are also disadvantages of mobile learning.

A result shows that high self discipline is required for mobile learning. the result also show that mobile network are suitable for learning under specific premises and in certain situations. Therefore not every subject is suitable to use mobile as a tool for education purpose, it depends.

source: http://deposit.fernuni-hagen.de/501/1/Mobile-Education.com_Kuszpa_2005.12_Online-Educa-Berlin.pdf

A journal is found online that talks about the limitations of mobile phone learning in terms of technical side, such as:
1. small screens
2. limitation of accessing to internet (not everywhere has wifi and not everyone's phone has 3G)
3. lack of standardization and compatibility (apple product users are not able to view flash website using their phones // interface and functions are different btw apple and android smartphones etc..)

researchers also mentioned that psychologically, people have not become used to mobile phone learning.

source: http://www.jaltcall.org/journal/articles/2_1_Wang.pdf

For my project, the objective is to raise awareness on meat consumption and deliver the message that meat consumption can cause global warming, the effect that brought to them is not only health but also the environment. It is more to educating and telling them to reduce the intake of meat. and my target audience will be young working adults in Malaysia (18-25). So far from my research that I have done, I found out that the age group of people that i am focusing on, use smartphone for entertainment purpose, they spend time checking mails, checking updates from friends (social websites), taking /uploading photos, communication or play games.

From my own experience, I used to abandon a game after playing for awhile as I felt boring and I tend to delete the app in my phone. Same goes to some utility applications, and hence I might forget some of the applications in terms of the content/interfaces. Only applications that have attractive visuals or interface design, unique content and good functionality will catch my attention.

Besides, I prefer to look for information using laptop as it has bigger screen and I feel more comfortable to use a laptop then a mobile to do certain work (most of the work). For example, I prefer to watch Youtube videos on a laptop than to watch on a mobile. I will only use mobile for quick information such as browse through social networking websites and send text messages to friends and family. And most of the time I use my mobile phone to play games during my free time. Laptop/Pc is actually a place/medium that for me to absorb new knowledge and information beside BOOKS.

Decision Making: Awareness Campaign vs. Smell senses interactive ?

I have to make a decision choosing between
1. creating an awareness campaign.
2. exploring smell senses using interactive project.

After consulting to the lecturer, I have a clearer direction and finally decided on which topic I am going to do for my final project. I have decided to choose to create an interactive website on the topic: raise awareness on meat consumption causes global warming. The reason why I choose this is because I am really interested in creating interactive websites or mobile applications. I like to explore and design visually attractive yet good in functionality interface designs and I also like to see that the audiences are able to interact with the artwork that I am created. Beside, I also feel that websites are more interesting to the people nowadays due to it's mobility. Not many people are interested in installation projects (they tend to experience it once or twice, and they might forgot about it) and not every people is able to experience it, so it is hard to promote my artwork to the people and really raise the issue that I wanted to show to the people. The reason why I do not choose to do smell senses project is because I find that I have less passion to do this project than the other one although both are very interesting and challenging to me. I really had a hard time on deciding which topic to do, but in the end, I would like to go for more REALISTIC project rather than an experimental project. 

Apart from that, I was also inspired by the theory: Medium is Message by Marshall McLuhan. He talks about how media such as television, websites can deliver certain message to the audience. I was inspired to explore how audience's mind can be influenced by these media and how is it affecting their behaviours and resulting social or culture changes. 

Source: 

McLuhan, M. (1994). Understanding Media: The Extensions of Man. The MIT Press: Cambridge.

Therefore, those are the reasons that lead me to choose creating an awareness campaign which can be access from internet, anywhere and anytime.