Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

This project has been submitted to the Microsoft Imagine Cup 2008 competition and was awarded the 2nd place. This presentation was the first round concept proposal.

Published in: Design
  • Be the first to comment

  • Be the first to like this


  1. 1. Team GreenNet Jin Fan Kevin Muise
  2. 2. Introduction
  3. 3. Design Goal <ul><li>Foster a global conservation ethic and culture that leads to the public choosing to make a permanent reduction in electricity intensity. </li></ul><ul><li>Develop approaches and strategies that are holistic and targeted to specific audience (aged from 18 to 30) to help them raise the awareness of energy conservation. </li></ul><ul><li>Establish a context of why energy conservation is important, which can lead individuals to make permanent behavioral changes at work, school and home. </li></ul><ul><li>Provide the public a pleasant and engaging experience of sharing information and concerns regarding to environment protection. </li></ul>
  4. 4. Why Facebook? <ul><li>Facebook is one of the most popular social networking tool with access to over 63 million active users. This popular and powerful communication tool is able to help us to develop approaches that are holistic and targeted to our specific user group(students and young professionals). </li></ul><ul><li>The friend-orientated nature of Facebook can help in both disseminating the application and also motivate people in its continued use. </li></ul><ul><li>Facebook has over 55,000 regional, work-related, collegiate, and high school networks. The networks in Facebook provide a workable infrastructure to establish energy comparisons between networks. </li></ul><ul><li>Facebook functions as a portal that provides visitors with various functions and features through a single point of access, rather than having to browse through various websites. </li></ul>
  5. 5. Existing Products <ul><li>Before embarking on designing GreeNet, we conducted a survey of existing green social networking tools. We were surprised that there were very little application available to the public. </li></ul><ul><li>One of the available tools, Green Gift, is a Facebook application but is limited only to sending virtual gifts to a user’s friends, which may not have any impact on the user’s behavior. </li></ul><ul><li>Other available applications on Facebook mainly provide a source of entertainment for the user and are lacking a connection with the real world. </li></ul><ul><li>Our concept differs from the existing applications as it uses real world data from electrical providers and allows friends and networks to compare the amount of actual energy being consumed. </li></ul>
  6. 6. Design Process
  7. 7. Concept Development In this stage of the design process, we discussed several design concepts and ideas, identified target users, listed tasks and use scenarios. We have also interviewed some Facebook users to understand their lifestyle and listen to their concerns about the design concept.
  8. 8. Target Users / Personas <ul><li>Profiles: </li></ul><ul><li>University students and young professionals (aged from 18 to 30) who use Facebook to contact friends and share information. Some of them just started to use Facebook, but some are frequent Facebook users. </li></ul><ul><li>They are usually busy at school or work and they spend a lot of time using the Internet. </li></ul><ul><li>They feel concerned about the environment and willing to take some actions, but they also feel that they do not know enough about it. </li></ul><ul><li>Goals: </li></ul><ul><li>Use the GreeNet application on Facebook to view their networks’ energy consumption and make comparisons with their friends’. To know the most environmental-friendly organizations in the world. </li></ul><ul><li>To read news, articles, view images, comics or videos regarding to environmental issues and sustainable technologies. </li></ul><ul><li>To gain different “ Green points ” to exceed their friends’ and grow the GreeNet garden . </li></ul>
  9. 9. System Diagram Web Page Function Add Application
  10. 10. Paper Prototype The paper prototype was made of paper and post-it notes. The interface was drawn by hand. Some essential colors were applied using color pencils, which provide the user a general look and feel to the interface.
  11. 11. Usability Test The usability test involved 5 participants who were guided through several tasks using the paper prototype, such as navigating through the power consumption charts and building their GreeNet garden . Along with these tasks, we asked the participants to complete a survey and summarized the funding into usability categories.
  12. 12. <ul><li>Observation Table </li></ul><ul><li>Usability Criteria </li></ul>Performance Measurements Clear Pass (CP) Mid-Pass (MP) Fail (F) Clear Pass was given when the performance was clearly done without any problems; Mid Pass was given if the participants needed time to figure out how to accomplish the task or made mistakes before accomplishing the task; Fail was given when the participants were not able to accomplish the task. By having the three-level performance measurements, we were able to clearly see the areas of improvements needed in the interface design. <ul><ul><li>Learnability </li></ul></ul><ul><ul><li>Visibility </li></ul></ul><ul><ul><li>Feedback </li></ul></ul><ul><ul><li>Mapping </li></ul></ul><ul><ul><li>Affordance </li></ul></ul>Evaluation
  13. 13. Design Iteration & High-fidelity Prototype By gaining feedback from the users, we have created a high-fidelity prototype using Adobe Illustrator and Macromedia Flash.
  14. 14. GreeNet in Your Life (Use Scenario)
  15. 15. <ul><li>Jin is an university student. She lives in Vancouver, British Columbia, Canada. She uses Facebook frequently to contact her friends. Today, Jin logs in to her Facebook account after school. </li></ul>
  16. 16. <ul><li>As she opens her Facebook Profile page, she sees her recent added GreeNet application widget and starts to navigate. </li></ul>
  17. 17. <ul><li>She sees the comparison of electricity consumption data among her friends in different networks and she is happy to see her school’s electricity consumption in this month is the lowest among all her friends </li></ul><ul><li>She could use the change skin buttons to choose different plants in her GreeNet garden. </li></ul>
  18. 18. <ul><li>She mouse-overs to the garden status chart on the right bottom corner. The 4 essential elements (sunshine, loving care, water, chlorophyll) represent 4 aspects to grow a nice GreeNet garden . Jin has 80 points of the sun element by purchasing and receiving green gifts from the Green Market . </li></ul><ul><li>The Sun icon represents the amount of green gifts the user has received and purchased. </li></ul>
  19. 19. <ul><li>The heart icon represents the participation of the Green Quiz . Jin notices she has very few points from the love element, so she decided to take the Green Quiz later. </li></ul><ul><li>The Heart icon represents the user’s performance on the Green Quiz , where they could learn correct ways to protect the environment. </li></ul>
  20. 20. <ul><li>Jin has 97 points by posting interesting articles, pictures, comics or videos regarding to environment and advanced sustainable technology inventions. </li></ul><ul><li>The Water icon represents the amount of participation in GreeNet home page </li></ul>
  21. 21. <ul><li>Jin has 68 points of the green leaf elements, which indicates the popularity of her posted items. </li></ul><ul><li>The Leaf icon represents the popularity of the user’s posted items in GreeNet . </li></ul>
  22. 22. <ul><li>Jin decided to go to the Green Quiz page to earn more points for the love element of her garden. </li></ul>
  23. 23. <ul><li>The Green Quiz page is a place where you can test your knowledge on energy conservation and learn about how to save energy in their daily life. Jin picks an answer and clicks on Submit Answer. </li></ul><ul><li>This area could be used to display images of the most popular posted items from the GreeNet home page when there is no answer needs be displayed here. </li></ul>
  24. 24. <ul><li>As the right answer was chosen, she gets 3 points in the love element. She is also able to see how her friends do on their Green Quiz questions. The “Green Experts” lists the friends who have the highest points. </li></ul><ul><li>She clicks on Next Question. </li></ul>Next Question
  25. 25. <ul><li>She chooses an answer that she thinks is right and clicks Submit Answer . </li></ul><ul><li>This area could be used to display images of the most popular posted items from the home page. </li></ul>
  26. 26. <ul><li>The answer is wrong, but she still gets 1 point for participation. In the Answer box, it not only shows the correct answer, but also tells the user the reason behind it. </li></ul><ul><li>After answering several more questions, she gets more points and decides to go to My GreeNet page to see her garden. </li></ul>Next Question
  27. 27. <ul><li>As she gained more points in the love element, the plant in her GreeNet garden has grown bigger. </li></ul><ul><li>At the same time, she is able to see her friends’ green status as well as the green gifts she has received from her friends. </li></ul><ul><li>She clicks on Green Market. </li></ul>
  28. 28. <ul><li>In this page, Jin is able to purchase “ green gifts ”,(real environmental friendly products) for herself or her friends. </li></ul><ul><li>She views the top 3 popular green gifts. </li></ul>
  29. 29. <ul><li>The second gift in the list is the CFL light bulb which consumes up to 75% less energy. </li></ul>
  30. 30. <ul><li>She moves the mouse to one of the arrows to view more green gifts. </li></ul>
  31. 31. <ul><li>She can also read about each gift and learn how each of them can change our life. </li></ul>
  32. 32. <ul><li>As Christmas is coming soon, the Green Gift Ideas give Jin some nice gift suggestions for her and her friends to “go green” this Christmas. </li></ul>
  33. 33. <ul><li>She scrolls up and clicks Home. </li></ul>
  34. 34. <ul><li>The GreeNet home page is a space where users can share concerns or opinions on environmental topics and view daily tips of how to become “greener”. The user is able to share photos, video, comics, news and other information related to environment protection. </li></ul><ul><li>Rankings of the top 10 lowest average electricity consumption organizations in the world . The information is real data provided by the local electrical providers. </li></ul><ul><li>This information would be generated by different organizations in the world. It would also foster a competitive atmosphere and motivation on saving energy. </li></ul>
  35. 35. <ul><li>The basic Facebook features such as The Wall, Discussion Board are also included in this page for people to share concerns. </li></ul>
  36. 36. <ul><li>Jin logs out from Facebook and wants to tell her mother the Green Gifts she saw on GreeNet . </li></ul>
  37. 37. Future work Our future work will involve further usability testing with our current, flash-based, prototype. The results of the tests will inform the next stage of the design process, where we will develop a functional user-interface for our application created using Silverlight, Expression Studio.
  38. 38. Conclusion Through our user-focused design process, we have created GreeNet to be not only an informative interactive system, but also an interface that engages our audience into participating in a culture of energy conservation.