This week I our group continued to work on mockups. However we have moved to the next stage of the competition and we began to design mockups that were meant to be displayed while the dorm competition is going on. Additionally I went back and completed edits to the pre-competition wiki as well as the repository, as I had made pages available that weren't appropriate for the pre-competition page.
Admin Editing:
During this week I continued to design pages for the admin. The major design modifications this week included the way the admin was able to edit the other pages as well as the addition of a goals approval page.
Last week I proposed that the admin would edit the HTML of the page itself in order to edit such things as links, videos as well as text content. However this proved to be an inefficient design that not only required the admin to have an advanced knowledge of HTML but also as Prof. Johnson pointed out, this design was error prone as one wrong change to the HTML could destroy the entire page. Also there was no way to revert back to an older state in case of an error. To fix this flaw I followed the design of how CMS' allow users to edit their pages. Now all the admin has to do is click on a header that they want to edit, then a pop up box will appear and prompt the user to enter a new link if they are editing a video, edit text if they are editing a text area, add or delete events if they are editing events on the home page, change links to various slideshows, change the file from which the tips displayed in the ticker tape are drawn from or lastly change the link to the current dorm standings graph. This design stays true for all pages that the admin has the option to edit.
During these revisions it was brought up that the admin doesn't have to approve kukui nuts for commitments since they would be worth a marginal amount. Because of this there was no need for a kukui nut approval page so that was deleted and instead a page for approving goals was added. Previous we deemed that goals were too close to commitments so we decided to do without them. However this week Prof. Johnson redefined what goals and commitments were which then required me to design a page to accommodate these changes. The layout of the page is the same as any of the other approval pages. Inside a box the admin can see the tower and the floor which submitted the goal, the goal itself and lastly a approve and reject check box. At the bottom there is an approve and reject all button which should save the admin time if there are lots of goals that all have been deemed legitimate.
Next Up:
I believe in this upcoming week I will have to work to refine the goal approval page as well as refining the way that admins are able to edit pages, specifically the resources page as it has many editable regions as well as a few sub-pages.
Tuesday, February 23, 2010
Tuesday, February 16, 2010
Pre-Competition Design
This week we received feedback regarding our design from milestone one. Because of some confusion we were given a one site layout and this week we began to fill in these blank lay out pages. The presentation tomorrow will contain a rough version of the site with the modifications from the first milestone incorporated.
Pre-Competition:
This week I was responsible for creating the pre-competition kukui nut page. This page was to contain basic information. So I decided to have a top box that spanned the page and contained a description of the competition. Underneath that I decided to have 3 sections, one section devoted to describing the prizes that could be won from this competition, a picture of the dorms where the competition would be held and lastly a description of the scoring system of the competition. Hopefully this page will give people a feel of what the competition is all about and how to compete.
Admin 1.0:
The modifications to our milestone 1 site included a requirement for an admin page. The requirements for this page was that the admin should be able to edit any of the other pages as well as approve kukui nuts, commitments, events as well as user submitted tips. In order to do this efficiently I created a home admin page with all the editable options (all pages, kukui nuts, tips ect..) having its own link.
When the admin wants to edit a page, then he selects the page and the HTML code will pop up in a box where the admin can make changes to a page. I designed it this way since the admin most likely won't make structural changes to a site, but more likely weekly updates as well as additional links to movies or external sites.
When the admin clicks on the approve kukui nuts link he is taken to a page that contains a list of users and the actions and commitments they have completed. The admin then has the option to approve or reject the actions or commitments. If the action or commitment is approved then the action or commitment will show up in the users profile as well as the addition of kukui nuts to their current total. If the action or commitment is rejected then nothing will be displayed in the users profile and they will receive a notice of disapproval.
When the admin clicks on the approve commitments or approve user tips then they will be sent to a page that is similar to the approve kukui nuts page. Here the admin will have a listing of the user as well as the commitment or tip that they submitted. Again the admin has the choice to approve or reject these commitments or tips. If the commitments are approved then they will be displayed in the users profile. If the tip is approved then it will be added to the list that contains the weekly tips. Also kukui nuts may be awarded to the user. If the commitment is rejected then the user will receive a notification.
The admin also has the option to add or delete users from the competition. This is setup just in case if a user transfers from a competition dorm to a non-competition dorm or if a user moves in from a non-competition dorm to a competition dorm.
Lastly there is a page where the admin can edit those who will receive kukui nuts for attending certain events. On this page there is a header which describes the event, then underneath that the users will be displayed. The users displayed are then compared to a list of users that attended the event and the admin then approves or rejects users according to their attendance. On this page all of the past events that still have users waiting for approval will be displayed. Once an event has all of the users verified or rejected, then the header for that event will disappear.
Pre-Competition:
This week I was responsible for creating the pre-competition kukui nut page. This page was to contain basic information. So I decided to have a top box that spanned the page and contained a description of the competition. Underneath that I decided to have 3 sections, one section devoted to describing the prizes that could be won from this competition, a picture of the dorms where the competition would be held and lastly a description of the scoring system of the competition. Hopefully this page will give people a feel of what the competition is all about and how to compete.
Admin 1.0:
The modifications to our milestone 1 site included a requirement for an admin page. The requirements for this page was that the admin should be able to edit any of the other pages as well as approve kukui nuts, commitments, events as well as user submitted tips. In order to do this efficiently I created a home admin page with all the editable options (all pages, kukui nuts, tips ect..) having its own link.
When the admin wants to edit a page, then he selects the page and the HTML code will pop up in a box where the admin can make changes to a page. I designed it this way since the admin most likely won't make structural changes to a site, but more likely weekly updates as well as additional links to movies or external sites.
When the admin clicks on the approve kukui nuts link he is taken to a page that contains a list of users and the actions and commitments they have completed. The admin then has the option to approve or reject the actions or commitments. If the action or commitment is approved then the action or commitment will show up in the users profile as well as the addition of kukui nuts to their current total. If the action or commitment is rejected then nothing will be displayed in the users profile and they will receive a notice of disapproval.
When the admin clicks on the approve commitments or approve user tips then they will be sent to a page that is similar to the approve kukui nuts page. Here the admin will have a listing of the user as well as the commitment or tip that they submitted. Again the admin has the choice to approve or reject these commitments or tips. If the commitments are approved then they will be displayed in the users profile. If the tip is approved then it will be added to the list that contains the weekly tips. Also kukui nuts may be awarded to the user. If the commitment is rejected then the user will receive a notification.
The admin also has the option to add or delete users from the competition. This is setup just in case if a user transfers from a competition dorm to a non-competition dorm or if a user moves in from a non-competition dorm to a competition dorm.
Lastly there is a page where the admin can edit those who will receive kukui nuts for attending certain events. On this page there is a header which describes the event, then underneath that the users will be displayed. The users displayed are then compared to a list of users that attended the event and the admin then approves or rejects users according to their attendance. On this page all of the past events that still have users waiting for approval will be displayed. Once an event has all of the users verified or rejected, then the header for that event will disappear.
Monday, February 8, 2010
Milestone 1
This week we decided on layout for our webpage as well as a basic layout for it. After debating between using 1 website or 2 websites we decided that it would be the most effective solution to use one webpage but slim down the content and make it more simple and intuitive to use. In order to complete the desired layout by the milestone we decided that it would be most efficient for the website to be divided among all group members then joined together on the Monday before the milestone. For this portion I was in charge of designing the home page as well as the home page that is displayed once a user has logged in.
Home Spec.
We decided that the home page needed the following on it:
- An app that rotates various pictures from the competition
- A graph of the current dorm standings
- A video box for providing a video introduction to the competition
- A box that contained writings about the competition
- A ticker tape that displayed various energy consumption tips
- A box that listed out the upcoming events for the competition
At first it was hard to fit all of the data into the website, but after lots of rearranging I manged to fit all of the information onto the page while making it as simple and user friendly as possible. A image of the layout can be found here. Like my previous layouts, this one displays (and contains a link to) how much UH has saved for the competition to date.
Competition Spec.
We decided that the competition page needed to have the following requirements:
- A profile picture
- Current amount of kukui nuts that the user has as well as the amount that the kukui nut leader has
- A box that contains tabs for events and commitments
- A box that contains tabs for updates, current commitments as well as a graph
I found the idea of a profile picture a nice feature as it made the site more like a social networking site. At first I suggested that we used tabs to separate the data within a box, however I realized that having tabs within tabs from our main page layout just looked bad, so I moved all the of the boxes that were to be tabbed into one box with buttons to switch between each of the options. Also I included the current goals list at the bottom of the page instead of in the above box with the rest of the data. My original lay outs can be found here: Home, commitments and goals. The update button would display a selections of graphs through ajax and I was unsure on how to display that so there is no layout for that page.
Revisions:
After today's team meeting we decided that the home page, pre-competition page, post-competition page, resources and contact pages should stay the same. However the during-competition page needed to be changed. During today's meeting we decided to keep my general layout, however we combined elements from Anthony's layouts which provided some nice features to our site. We also decided that commitments and goals were too similar, so we eliminated the goals from our project. The final product can be found here: Updates, Activities, Commitments and Stats. The stats page might be a little confusing so I will explain it. When the user clicks on this button a pop up will appear with a near real time graph (10 sec delay)of the current power usage. This will allow students to see the impacts of their actions almost instantaneously.
Wiki:
The wiki for our layout for milestone 1 can be found here.
Home Spec.
We decided that the home page needed the following on it:
- An app that rotates various pictures from the competition
- A graph of the current dorm standings
- A video box for providing a video introduction to the competition
- A box that contained writings about the competition
- A ticker tape that displayed various energy consumption tips
- A box that listed out the upcoming events for the competition
At first it was hard to fit all of the data into the website, but after lots of rearranging I manged to fit all of the information onto the page while making it as simple and user friendly as possible. A image of the layout can be found here. Like my previous layouts, this one displays (and contains a link to) how much UH has saved for the competition to date.
Competition Spec.
We decided that the competition page needed to have the following requirements:
- A profile picture
- Current amount of kukui nuts that the user has as well as the amount that the kukui nut leader has
- A box that contains tabs for events and commitments
- A box that contains tabs for updates, current commitments as well as a graph
I found the idea of a profile picture a nice feature as it made the site more like a social networking site. At first I suggested that we used tabs to separate the data within a box, however I realized that having tabs within tabs from our main page layout just looked bad, so I moved all the of the boxes that were to be tabbed into one box with buttons to switch between each of the options. Also I included the current goals list at the bottom of the page instead of in the above box with the rest of the data. My original lay outs can be found here: Home, commitments and goals. The update button would display a selections of graphs through ajax and I was unsure on how to display that so there is no layout for that page.
Revisions:
After today's team meeting we decided that the home page, pre-competition page, post-competition page, resources and contact pages should stay the same. However the during-competition page needed to be changed. During today's meeting we decided to keep my general layout, however we combined elements from Anthony's layouts which provided some nice features to our site. We also decided that commitments and goals were too similar, so we eliminated the goals from our project. The final product can be found here: Updates, Activities, Commitments and Stats. The stats page might be a little confusing so I will explain it. When the user clicks on this button a pop up will appear with a near real time graph (10 sec delay)of the current power usage. This will allow students to see the impacts of their actions almost instantaneously.
Wiki:
The wiki for our layout for milestone 1 can be found here.
Tuesday, February 2, 2010
Split Decisions
This week in our group meeting we decided that we should have the following included in a possible interface that would be set up in the lobby of the dorms:
1. Showing weekly results for each tower (includes floor leaders, energy consumption).
2. Show the energy consumption in relational terms, such as money.
By displaying this data we hope that we can encourage a spirit of competition within the towers as well as giving the students a tangible way to learn about energy consumption.
Site Battle:
We also continued to design the user interface. However we are in the process of either using one website to hold all of the data or using two sites to display the data (one site of the competition and the other for education). Currently I am in charge of developing the two site approach. I currently have a rough layout of the sites which can be found here. My sites are distinguished from the others with the heading of Resources_*, or by author (smichaelwong).
Additional Goals:
Also this week we decided that there would be 4 additional groups. Anthony is in charge of creating the mockups for the one website approach, Kelli is in charge of forming focus groups and assessing the RA's reaction to the competition proposals, John is in charge of gathering energy consumption and energy saving resources which will be used to educate people and lastly Wing is in charge of putting together Google charts and visualizations which aid in presenting the energy consumption data to the students.
At the Milestone:
At the milestone we will have the following completed:
1. Either the one site approach or the two site approach will be decided on as the final interface.
2. The resources will be completely gathered and will be ready to be processed.
3. The charts will be finalized (what data will be displayed and how).
4. The questions for the RA's will be designed and implemented after the milestone when the interface is decided on.
1. Showing weekly results for each tower (includes floor leaders, energy consumption).
2. Show the energy consumption in relational terms, such as money.
By displaying this data we hope that we can encourage a spirit of competition within the towers as well as giving the students a tangible way to learn about energy consumption.
Site Battle:
We also continued to design the user interface. However we are in the process of either using one website to hold all of the data or using two sites to display the data (one site of the competition and the other for education). Currently I am in charge of developing the two site approach. I currently have a rough layout of the sites which can be found here. My sites are distinguished from the others with the heading of Resources_*, or by author (smichaelwong).
Additional Goals:
Also this week we decided that there would be 4 additional groups. Anthony is in charge of creating the mockups for the one website approach, Kelli is in charge of forming focus groups and assessing the RA's reaction to the competition proposals, John is in charge of gathering energy consumption and energy saving resources which will be used to educate people and lastly Wing is in charge of putting together Google charts and visualizations which aid in presenting the energy consumption data to the students.
At the Milestone:
At the milestone we will have the following completed:
1. Either the one site approach or the two site approach will be decided on as the final interface.
2. The resources will be completely gathered and will be ready to be processed.
3. The charts will be finalized (what data will be displayed and how).
4. The questions for the RA's will be designed and implemented after the milestone when the interface is decided on.
Subscribe to:
Posts (Atom)