Design and Implementation
Main Page
Design
The main page is the default landing page for users. It's main use is to keep track of the current active tasks.
Figure 1: An overall view of the main page.
Users are able to receive what is essentially a news feed of recent changes by looking at the "Recent Activity" column on the left. On the right, users may look up specific tasks and edit them as necessary.
Figure 2: When a task row is clicked, additional information about the task is displayed.
Figure 3: A close up of the notifications section.
Figure 4: After a task is created or edited on the Task Creation Page, that task will be highlight with a border for 5 seconds upon returning to the main page.
Figure 5: Showing off the possible filters that can be used.
Implementation
Task Creation Page
Design:
The form contains standard information that the dorm manager needs to fill out when a resident moves in or moves out of the dorm. There are two main tasks - Move In and Move Out. The information on the page changes dynamically depending on the type of the task. This page will be visited very frequently by the user, so it's designed to be efficient for filling out information. The "Useful Information" panel contains tabs which pop out buttons and search tools that help to autofill the information on the left, helping the user complete task creation quickly. One of the important decisions for this page was to fit the two panels into two separate scrolls views, so that the user can choose to scroll each panel separately without moving the whole window. This was necessary because we want to user to make good use of the auto-fill function; being able to scroll the two panes separately allows the autofilling to be done independently of the reading position of the form, something which we and users found to be simple.
Figure 1: The start new task page
Another important decision was regarding the affordances associated with the right panel. Many users mentioned that there weren't enough affordances to show the auto-fill function of the information on the right. Therefore, we have decided to temporarily auto-fill the input boxes with grayed-out text with the auto-fill information when the user hovered over that information. Figure 2 shows an example of the auto-fill functionality.
Figure 2: Auto-fill information when hover over item.
Another important feature is when the user submits the form, if there are some missing fields, the user will receive a pop up noticing them about these fields. The user can have the option to go back and fill out those missing fields or save the form any way. Figure 3 demonstrates this functionality.
Figure 3: Missing fields notification when submitting the form
In order to follow the CRUD model presented in class, we decided to let the user edit the task. The page will be pre-filled with the most recent updated information. Figure 4a and 4b demonstrates the edit task functionality of the website.
---------------> 
Figure 4: Edit Task functionality
Implementation
The back end of this page is supported by Parse. There are three objects that currently present on the server: Resident, Task, and Room (See Figure 5). Each of this object will have a reference to the other objects so that whenever one object changes, it will also change the other. After the user submitting the task to the server, a task object will be created with each attribute corresponding to a field in the form. Then, the room and the resident will also be updated on the server to reflect the task i.e if a resident Move In to a room, the room becomes occupied and remove from the available room and the resident gets added to the system.
For the updated task, we also have to make sure that we do not created duplicate object on the server since Parse doesn't automatically check for that.
Since there are three main pages sharing the same source of information, we need to make sure that changes on one page will be reflect on other pages too. For example, if a person move out, the main page will show that as a pending task and the floor plan also have to indicate that the room is now vacant. All of the information uploading to and downloading from the server are text-based, so the retrieving time is almost instantaneous which enable the user see the current update from the server at no time. In addition, to respect the anonymity of 6.813, we also use fake data for our database which introduce some inconsistency among information. However, this doesn't present any usability problem for the user.
Figure 5: The current state of the parse server.
Floor Plan Page
Design
Figure 5: The current state of the parse server.
Figure 5: The current state of the parse server.
Figure 5: The current state of the parse server.
Figure 5: The current state of the parse server. 
Figure 5: The current state of the parse server.
Implementation
Evaluation
Test User Selection
Test Briefing
Most of our users were the same ones we used for testing our paper prototype and so were already familiar with the scenario and the purpose of our interface. Nevertheless, we reminded them of the following scenario:
“You are a desk worker or dorm manager and you plan to use this interface to keep track of the progress of various tasks going on in the dorm. Right now, you’re focusing on helping residents move in and out, and keeping track of general housing information.”
Test Tasks
The following tasks were given to the user on paper. Additional prompting would given when it was observed that the user was having particular trouble completing a task.
Task 1: Document Completion of Subtask
- Background: Frances Phillips is in the process of moving out of the dorm. He has just returned his key to you.
- Task Detail: Update the system appropriately.
Task 2: Determine Information about a Floor
- Background: The house master is curious about how many vacant rooms there are on the second floor.
- Task Detail: Find a way to look up number of vacant rooms on the 2nd floor.
Task 3: Start Moving a Student In
- Background: Tina Sullivan has requested to move into Next House on August 30th, 2013. You want to begin the move in process for her. Additionally, she tells you that she wants to live somewhere on the 2nd floor. Make sure all the fields are filled in and assume default subtasks.
- Task Detail: Make a new task for Tina Sullivan
Task 4: Start Moving a Student Out
- Background: Andrea Reyes wants to move out of Next House. She says she expect to move out on May 23rd, 2013. You want to begin the move out process. Make sure all the fields are filled in and assume default subtasks.
- Task Detail: Make a new task for Andrea Reyes
Task 5: Identify Resident
- Task Detail: Who currently lives in room 266?
Test Observations
User 1: Desk Worker
- Task 1:
- The user seemed surprises when he can search the tasks to find the name of the person in the main page.
- After clicking on save changes, the user was confused if it's actually save.
- Task 2:
- The users quickly figured out the stats of the floor after navigating through the floor plan
- Task 3:
- The user seems confused at the beginning when he was ask to start a move task for Tina. He thought he can search to find the person as in task 1 (but since the task is not created, it's not there yet). After thinking for 30s, he navigated to the Start New Task button.
- The user didn't pay attention to the useful information until he was stuck on finding certain information to fill out the form such as student ID, old address. He needs a reminder from the facilitator to figure out he can find those information from the useful information.
- He also had problem with the Default Task button on the right because he thinks that will clear all of the information that he has filled in so far and put in the default information for the whole page.
- Task 4:
- Since the user knew about the start new task page, he navigated to it quicker than task 3. However, he didn't use the MIT directory to auto-fill other information until the facilitator suggested him to.
- After clicking submit button, the user was taken to the main page, and was confused a bit if the information has gone through.
- Task 5:
- The user was confused on where to look for resident information. He tried the search function on the main page first and then follow the suggestion by the facilitator to explore other options on the page to click on Floor plan.
- User's comment:
- Overall, the user thought that the website would take a little bit of time to learn its functionality, but for the most part is intuitive
User 2: Dorm manager
- Task1:
- The user seemed confused about the filter options and need explanation on that.
- She also didn't understand what the 0/4 on the progress bar represents.
- Task 2:
- The user spent 1 minute on the main page to look for floor information, and she tried to use the search function of the main page to look this up. After the facilitator's suggestion, she navigated through floor plan and figure the stats information.
- Task 3:
- The user took a while to figure out how to start a new task. The user suggested that room assignment is handled by the rooming chair rather than the house manager.
- The user never used the auto-fill function on the right panel. She submitted the form and leave some of the options blank.
- Task 4:
- The user quickly navigated to the start new task page this time, but still don't use the auto-fill functionality.
- Task 5:
- The users tried to search for this information on the main page first. Then she clicks on floor plan after hearing the hint from the facilitator.
- User comment:
- User wants to have the room and resident information on the main page (resident centric rather than task centric) so that she can quickly look up information such as the requirement in task 5.
- Resident name should be separate into first Name and last Name.
- The user thinks having room size (in square foot) might be useful.
- The Overall reaction is positive.