|
mockupMilestone2
Mockups design for Milestone 2
Table of Contents
IntroductionThis page provides access to the current state of the mockup designs for Milestone 2. For this milestone, the following design assumptions hold:
Monday, September 6, 2010 (2010-09-06)This snapshot illustrates the state of the system during early September. Students are in the dorm, meters are installed and data is being gathered, but the competition has not started yet. home
The home page design includes the following elements:
Note that there are two types of users in the system, regular participants and administrators. Due to the limitations of Balsamiq, instead of a single "Login" link which would appear in the real system, the mockups display a "User" and an "Admin" link that allow navigation to an example user and an example administrator page after appropriate authentication and authorization. Resources 09/06/2010
This page provides users with a brief overview of a Dorm Energy Competition. There are videos which will allow individuals to browse through several videos pertaining to Dorm Energy. There is a section where an individual can view other Dorm Energy competition that were done by other schools. On the far right of the page there is a section where people can retrieve resources on how begin their own competition (e.g Tips from students at Duke University and energy meter dashboard by Lucid Design group).
This page provides energy information(energy basics, energy situation and renewable energy sources) for the state of Hawaii. Since this section will have scrolling capabilities, it is possible to fit several resource material through out the entire section. There is a clean energy news section on the page that users can browse and become updated on local and world energy new. The section below the new, there are links that provide users with information on how they can get involve with events, activities that are sponsored by local energy conservation organizations.
While there will be a lot of information offered to users in the other resource pages, this page is where users can test their energy literacy while still having fun answering trivial energy questions and playing a game "energyville". TODO: Design this mockup, which will illustrate the user interface to resources. In general, a page like this should be able to contain 30-40 different resources. You need to think about all the different types of possible resources, categorize them, think about how to present them, and decide whether resources are presented differently before the competition than during it. energy dataTake a look at the mockups for this particular day for the energy data tab of Septeber 6, 2010 http://code.google.com/p/uh-dorm-energy-competition/wiki/DataPresentation?ts=1267926815&updated=DataPresentation#9/6/10 kukui cup
This page presents the user with information about the competition. Because the competition has not yet started the information display is very general and meant for education purposes only. The information provided includes an overall description of the competition, the prizes of the competition and how to win the prizes. Hopefully this information will motivate students to compete as well as provide non-competition users with an overall feel of the competition. billboard
This is the billboard page which will be displayed on a tv or monitor in a common area. Students will be able to get information about the Kukui Cup at a glance. Before the competition, students would need to know some important things like the date and the rules of the competition. They would also probably be the most interested in the prizes that they can win. There is a scrolling ticker tape with tips that students may find helpful in the competition. TODO: Design this mockup, which provides information appropriate for display in a large screen monitor in the entryway to dorms. What information is appropriate to display prior to the competition? help
This page allows a user to learn more about the Manoa Dorm Energy website in general and the Kukui Cup Competition. TODO: Design this mockup, which enables an interested viewer to learn more about the Manoa Dorm Energy site and the Kukui Cup Competition. maileUsers will not be allowed to log into their my energy page before the competition because there will be incomplete pages (i.e. no events, activities, etc.) and be an inaccurate representation of what the user energy pages will look like during the competition. There should also be no reason why a user would need to log in before the competition starts. rbrewer
This is the main admin page where the admin is given a choice of what to edit or approve. Admins have the option to edit the content of any page so that weekly updates can be done or so that content can be changed according to the phase that the competition is currently in. Admins also have the option to add or subtract users, approve kukui nuts to users, approve user submitted tips and commitments as well as assigning kukui nuts to those who attended various events. However this current mockup has everything but the edit page options disabled since it is before the competition. Once the competition starts then all the other options will become available.
On this page the admin can edit each of the pages. On this page an image of the page the admin wishes to edit will be displayed. The admin is then able to click on a title and a popup box will appear prompting the admin to input changes. Once the admin has made the changes them simply hit change or they can hit cancel and no changes will be made to the page.
Here the admin is able to edit what the featured video is by simply inputting a link to the new video that they wished to be featured.
On this page the admin is editing the about us section of the page. Here all the admin has to do is add or delete text then hit the change button to update the page.
The Featured News box is actually a graph about the competition so in order to change this the admin must provide a new link to a graph or chart. Again when the change button is hit, the page will update accordingly.
Like the previous pages the slideshow is simply a link to an external site providing the slide show. So all the admin has to do is provide the link to where the slideshow is being hosted and then hit the change button.
Here the admin has the choice to either add or delete an event. If the admin wants to add an event then they have to provide the date and the event name then hit the add event button. If the admin wishes to delete an event they can go down, select the events that they wish to delete then hit the delete button. Monday, October 4, 2010 (2010-10-04)Resources 10/04/2010
This page is basically the same design as the resource mockup for the previous date, This page should rarely change as it provide general information about Dorm Energy competitions to the general public.
The energy hub page has a slightly different design of what is features on the page. As It is the start of the Kukui Cup Competition information on the page is more localized, giving students more energy content on which they can relate to since they are residing in Hawaii. Also to right of the page, features Energy terminology which students can reference if they are unfamiliar with certain terms throughout the competition.
This page shows how a video is presented to users if they click on a link in the clean energy updates container.
This page showcases how a user can use the drop-down menu to access energy news that is out of the context of Hawaii.
A place where users can relax and exercise their energy literacy. energydataThe energy data page on the day of October 4, 2010 is explained in the energy data wiki. billboard
This is the billboard page that will be shown in common areas when the Kukui Cup is being held. At the top there is the date and a slideshow of pictures of sustainability around UH. At the left there are tips on how to save energy. Hopefully students will pass by and catch one or two and implement it into their habits since they see how easy it can be. In the middle is probably what will be the most interesting to the students, the current standings. They will be able to see who is winning and the margins that they need to make up to beat the other dorms. On the right is the upcoming events. The events will be displayed along with the Kukui Nuts that they can earn by attending each event. This page gives more data about the competition. It includes real time stats of the energy usage in the dorm. This will allow students to check on the status of the competition without logging in to the site.
This page displays more tips for the students to save energy
This page has upcoming events that may interest the students. It also has a photo slideshow of things that UH is doing to conserve energy.
This page has the current rankings along with a live updating feed of the activities that other students are doing. help
This help page will not change during the competition. I have added contact information to the page which should also be on the previous mockup. maile2
The updates tab shows current updates about other students to motivate the user to participate in similar activities.
The activities tab shows group and individual activities a user can partake in.
If an activity is selected, the box will expand to show more information about that activity and allow users to choose to attend that activity or get their Kukui Nuts after completition.
While attending the event, student will be given confirmation codes which they will enter on this page to get their Kukui Nuts.
If the activity requires the student to submit a worksheet they will be able to do so on this page to receive their Kukui Nuts.
The commitments tab allows users to select up to 5 commitments for the duration of one week. Users can also choose to add their own commitment with an administrators approval.
Users can choose which commitments they want to perform during the current week. Under each commitment shows the number of people who also chose that commitment to give it a social aspect.
If the user clicks on the link of users, it will expand and show the names of each user in a Facebook like behavior. link link link
After a user submits their own commitment, an administrator must approve of it to make sure it is appropriate. Until the approval is received, the commitment will not be able to be selected.
The goals tab shows the users floor goals. Each floor has their own set of goals to accomplish in the short term.
Once a goal has been completed, the user who selected the goal submits a verification of completition such as event verification codes given out to every participant at an event.
Users can vote for which goals the floor will commit to the following week. The can also suggest new goals not listed.
A user can edit his or her profile by uploading a profile picture and adjusting the notification settings. home2
The home pages layout stays the same throughout the entire competition, however updates can be done to the page (preferably weekly) so therefore the video content, picture slide show, events as well as the graph of the current leaders (should actually change daily) will change often. rbrewer2
Since this is the start of the active phase of the competition all of the admin options will be available.
On this page the admin has the option to either add or remove users from the competition. The reason for this is that user might transfer to a different dorm or on the flip side users might transfer into a competition dorm.
On the event approval page, the admin has the option to either acknowledge that a user attended an event they committed to or they can cancel their commitment if the user failed to show up to the event. Within the approval box there will be a header for each of the events that have passed where the admin still needs to acknowledge that users attended. Once the event has no more users the header will vanish.
On this page the admin has the ability to approve commitments and actions that have been completed. If the admin chooses to approve the action or commitment then a headline will show up in the users home page and also the user will be awarded the appropriate kukui nuts. If the admin chooses to reject the action of commitment then nothing will be displayed on the users profile and they will recieve a notice of rejection.
This page lists out all of the tips that users have submitted for admin approval. At this point if the admin approves the tip then the commitment will be added to a list which stores all of the weekly tips and possibly kukui nuts will be given to the user. If the admin chooses the reject the event then nothing will show up in the users profile and the user will not be sent a notice.
This page lists out all of the current goals submitted by dorm floors. These goals are created by the floor and must be submitted to admin for approval. Upon approval from the admin the goal will show up in each of the users home page on the floor approved. Monday, October 11, 2010 (2010-10-11)Resources 10/11/2010
Again, the purpose of this page is provide general information about a Dorm Energy Competition particularly at UH Manoa to users.
Since this mockup resembles about a week into the competition, the content will change slightly. The most significant change is the panel on the right side of the page, featuring the top five energy saving tips. In addition to tips this page could potentially provide insight to energy facts (e.g. Did you Know..).
This page showcases our ability to assist users with unfamiliar energy terms. Users are able to click on the link shown above, which a tooltip with appear with the definition to the particular term.
If a user would like to access more energy tips either to become more energy literate or get ahead of the Kukui Cup competition they can see more tips when they click on the see more tips link.
This page shows how a user can navigate to updates which are unique to the University. If they click on one of the links they are presented with additional information about the event.
Similar to the mockup above if a user want to engage in and contribute to sustainable living in their community, they can click on one of the links to receive more information about the particular organization. There is a link in the tooltip, which users can click on and get redirected to the organizations home website.
Again, there is a page that is dedicated to leisure users while exercising the information they have acquired from the other webpages. energy data 10-11-10The energy data page on the day of October 11, 2010 is explained in the energy data wiki. billboard
These are facts that may help students to save more energy. They are interesting so they may catch their attention and easy so that it would be easy for them to incorporate into their daily lives.
This page has probably the most important thing to the students, the prizes. Hopefully this will catch their attention
This page gives the dorm a overall savings figure. It also displays a dollar amount saved so that the students can relate to the information better. Billboard option 2
This first page is devoted to giving students the bare basics of the competition. This way students have easy access to see who is winning as well as an upcoming event that they can attend.
The second page is devoted to kukui nuts and will show the weekly as well as the overall leaders. This way it should hopefully motivate students to commit or attend more events in order to raise their scores to win prizes.
The third page is devoted to showing what other people in the dorms have committed to doing. In this way hopefully other students will get motivated to take the same actions to commit to some other actions.
The fourth page as the same purpose as the third page but on a floor level instead of an individual level. Again hopefully this page will motivate people to get together as a floor to committed to energy saving goals.
This page allows students to see the tip of the day without having to go to the website. This allows students to be exposed to energy literacy without having to do anything at all.
Lastly this page will display the current days energy usage. This should allow students to see when is a good time of the day to use certain appliances and also give students and idea of how much energy a dorm really consumes. maile3
The updates tab shows current updates about other students to motivate the user to participate in similar activities.
The activities tab shows group and individual activities a user can partake in.
If an activity is selected, the box will expand to show more information about that activity and allow users to choose to attend that activity or get their Kukui Nuts after completition.
There is a page for each activity where students can confirm their participation and receive their Kukui Nuts. More examples: link link link link link link
The commitments tab allows users to select up to 5 commitments for the duration of one week. Users can also choose to add their own commitment with an administrators approval.
Users can choose which commitments they want to perform during the current week. Under each commitment shows the number of people who also chose that commitment to give it a social aspect.
If the user clicks on the link of users, it will expand and show the names of each user in a Facebook like behavior.
The goals tab shows the users floor goals. Each floor has their own set of goals to accomplish in the short term.
Once a goal has been completed, the user who selected the goal submits a verification of completition such as event verification codes given out to every participant at an event.
Users can vote for which goals the floor will commit to the following week. The can also suggest new goals not listed. A user can edit his or her profile by uploading a profile picture and adjusting the notification settings. home3
Since the competition is in the 2nd week, not much changes on the home page. The layout stays the same, however the content such as events, the featured video as well as the sildeshow pictures could be changed week to week depending on what the admin decides. rbrewer3The admin page layours don't change in the 2nd week of the competition. However if events or goals have yet to be approved from the previous week then they will carry over into the current week. Also the new goals, events and tips will be displayed along side the previously unapproved events, tips and goals. For the mockups of the admin pages please see the mockups from the previous time period. |
If the activity is an individual activity such as watching an energy related video on YouTube, the student must answer one randomly drawn question about the video to get their Kukui Nuts. 
► Sign in to add a comment