Design
Basic Overview
Title |
Prototype |
Final Implementation |
Comments/Description |
|---|---|---|---|
Login |
N/A |
|
We had not implemented a login screen for the prototype. The login screen allows individual desk workers to have unique usernames and passwords. The backend stores the unread vs. read messages for individual desk workers. |
Home |
|
|
We significantly redesigned our home page between iterations. Based on user feedback, we decided not to persistently display the create message pane. In the final implementation, there is a create message button that opens up the create pane. Users also mentioned that it was confusing to understand which message was shown in the read message pane when this page is first displayed. In the final implementation, the read pane initially displays an instruction to begin clicking on messages in the browse pane. We also redesigned the heading bar to make our product name CollabDesk stand out better. |
Browse Pane |
|
|
Significant design changes were also made to the browse pane. Rather than displaying unread messages at the top, we created a different tab for them. This was based on user feedback that it was unclear where unread messages moved to once they were read. We also added color to the date heading bars to make this pane easier to navigate. A third change was to add icons to messages in the browse pane. This helped maintain internal consistency with icons that were displayed in the read pane. |
Read Pane |
|
|
Since we removed the create message pane from the home page, we had more space to display the read pane. Based on user suggestions, we separated the message and each reply into separate wells. We also moved the date and time the message was created to the right side to reduce clutter on the left. Another change involved the color scheme. We chose to use blues and greens in the buttons and tags since those are the main colors of our website. Then we used red and orange in the icons to help them stand out. |
Create Pane |
|
|
The main change to the create pane was how it is accessed. Instead of being displayed on the home page, users click the "Create Message" button to open this view. We changed the "note vs. issue" option to radio buttons instead of a single button based on user feedback that the original idea was not intuitive. We also changed the placeholder text for tags to be more clear. |
Key Features
Title |
Prototype |
Final Implementation |
Comments/Description |
|---|---|---|---|
Replies |
|
|
|
Templates |
|
|
|
Unread Messages |
|
|
|
Searching by Tags |
N/A |
|
|
Implementation
CollabDesk is a web application implemented in HTML, CSS, and Javascript that utilizes both JQuery and Twitter Bootstrap. The backend was built using Parse, which saves and retrieves data asynchronously. All of the icons are from FontAwesome, which provided both a consistent look for all icons with the ability to customize their size and color.
The two-column layout of the page was custom-built, with a fixed width column (the "browse pane") on the left for browsing and searching messages, and a larger fluid column (the "read pane") on the right for reading one message (and its replies) at a time. During implementation, we decided to make the browse pane a fixed size to simplify the implementation of its internal components, such as the message previews, so we could focus on making them look nice at a single size.
A lot of smaller components utilize the Bootstrap framework. This includes the third main component of our UI, the "create modal", which we implemented with a Bootstrap modal. As well, the header, all of our buttons (and tags), the All & Unread tabs, and our Create Message and Reply forms were implemented with Bootstrap.
To represent messages and replies, we created two objects in Parse, Messags and Replies. When a reply is created, it contains a reference to its parent message and the parent message contains a list of references to each reply. We grab all of the messages at the beginning of a session and store them in a Parse Collection so we can subsequently access each message locally. A separate Collection is populated with only the current user's unread messages.
The browse pane features two tabs, 'All Messages' and 'Unread Messages', which display the contents of the two Collections described above respectively. This was to allow users to easily focus on only their unread messages at the beginning of their shifts. However, implementing these two tabs, along with the the transitions and backend updates that go along with them, proved to be the most challenging part of the implementation, and still has a couple bugs.
For example, when an unread message is clicked, it should be removed from the unread Collection and the unread count should update. However, there was a bug in trying to remove the message from the unread Collection that we could not find, so our workaround was just to update the Collection again, but this was only done in the Unread tab. Thus when selecting unread messages from the All tab, the Collection and count were not updated, resulting in confusion for the users.
As well, we had difficulty with properly sorting the messages in the browse pane by creation date the way we wanted to; users understandably found the partial sorting odd. Finally, the search feature was still a little buggy, not returning to show all messages unless the user cleared the field and pressed enter, or
Most of these implementation issues in the browse pane were the result of trying to overhaul that pane between GR5 Implementation and user testing, which in retrospect was probably inadvisable given the short time frame. Though we fixed the bugs from GR5, we did not have time to fix all the new bugs that emerged.
Evaluation
Briefing
CollabDesk is an application that simplifies the lives of desk workers at MIT. It provides an electronic location where desk workers can efficiently share information with each other by reading and writing messages for all desk workers to see. Our system extracts away from the hassle of paper logbooks and messy e-mails. Each desk worker can log in to CollabDesk with a unique username and password. Once a desk worker is logged in, the desk worker has the ability to read, create, and reply to messages. A search bar allows desk workers to efficiently search for specific messages either by text or by clicking tags.
To illustrate the benefits of CollabDesk, imagine the scenario when someone brings a lost phone to desk. Through interviews with desk workers, we discovered that desk workers currently leave sticky notes or send e-mails to notify workers in the following shifts about the lost phone. Unfortunately, through all the hectic events of the day, it is a very likely possibility that the sticky note will be overlooked or, even worse, accidentally mistaken for trash. CollabDesk stores messages in an electronic database and will not be mistaken for trash. This is only one of the many situations where CollabDesk benefits the daily operations of desk workers.
As you use CollabDesk, keep in mind that we are testing the interface, not you. There may be some aspects of the interface that make it hard to use, so please think out loud as you work on each task so we can identify any flaws in the interface. You may stop and leave at any time, and your test will be completely confidential. Do you have any questions before we begin?
User Tasks
You are a student desk worker; your shift just started and you log into CollabDesk.
First you need to get up to speed on what happened on other shifts by reading your unread messages.
Task 1: Read all of your unread messages.
A resident, Jack, comes to desk to pick up a package. You go to the back room to find his package but it appears to be missing. You reassure him that his package was probably misplaced and create a new message on CollabDesk to let other desk workers know of his missing package. You know the desk captain takes missing packages very seriously so you would also like to alert the desk captain in your message.
Task 2: Create a new message about Jack’s missing package and alert the desk captain.
Later on in your shift, another resident, Mary comes to desk looking for her lost cell phone, which is a blue Motorola. You find it behind desk, and return it to her. You find the original message on CollabDesk about her lost phone and reply to it, stating to whom it has been returned.
Task 3: Find and reply to the appropriate message about Mary’s lost cell phone.