...
The following is the 'Home' page. It is intended to provide a visually appealing introduction to the site, and offers links to every other useful page in the site. Based on heuristic feedback, we increased the clickable area of the buttons to include the entire button and not just the text. Also from our heuristic testing, we removed the slideshow and instead kept a still video.
There There was a major issue, in which the alignment of the menu bar changed drastically depending on what page was being displayed. We fixed that issue after receiving feedback and having it pointed out.
The "Budgets" page provides a representation of the user's yearly budget. The column on the left shows the amount of money available, and the amount of money allocated to projects within a particular month. The column on the right shows the months of the year. The table on the far right shows the recent projects created or updated, and is automatically edited whenever a user makes a change elsewhere on the site. Due to time constraints and the nature of this page, we decided to not have it connect to the database for user testing. The task that this page involved was only viewing it and determining if the user understood what the page was trying to convey. We added the data so that it matched the information in the table to the information in the budget graphic, this allowed to still test the user interface without having to connect the page to the backend database.
The "Building Status" page presents an overall view of projects taking place in the building. We completely redid the building status page, since we were not able to implement the original version described in our paper prototype. We chose to use a Gantt chart to display a visual representation of any number of projects and their estimated completion time. This was further motivated by the heuristic testing, when it was pointed out that the original design was a little confusing. As of the time of submission, we have not connected this page with the backend/database, but should give an idea of what it is intended to look like.
Due to time constraints and the nature of this page, we decided to not have it connect to the database for user testing. The task that this page involved was only viewing it and determining if the user understood what the page was trying to convey.
The "Projects" page presents an overview of all of the projects that have been created for the building. New projects can be created, and existing projects can be modified by clicking a row on the table. For the Projects page, we aligned the "Add New Project" form fields based on feedback received from the heuristic evaluations. We also made the table columns unresizable by the user. We made it more obvious that the table rows were clickable by having the mouse cursor change to a pointer when it hovered over the rows. Users were able to find the "Update Projects" form much more easily. The "Update Projects" page would pop up in front of the main Projects page
The 'Student Requests' page provides a view of incoming requests. The user can then choose to create a project out of any request, and clicking on the "Add Project" button takes them to an "Add New Project" form. The "Add New Project" form is automatically filled with the relevant information provided by the student. The request date becomes the start date, the request description becomes the description of the project and the floor is automatically transferred.
We provided an "About" page to enable users to identify the site creators (and contact them if necessary). Also it was intended to provide a bit of information about the website. This was added based on feedback from the heuristic evaluation.
...