Content Planning & Restructure

on Wednesday, 19 December 2012
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:

0 comments:

Post a Comment