Design

Basic Overview

Key Features

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:

• 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.
• 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. 
• The search feature was still a little buggy, not returning to show all messages unless the user pressed "esc" or cleared the field and pressed enter. However, no one found the shortcut. 
• Sometimes searches would miss certain matches; this seemed to be linked to search queries that began with an uppercase letter and were only present in messages starting with an uppercase letter. We implemented all queries using Parse's built-in query functionality, and there was no way to specify case sensitivity or insensitivity, so we never figured out the root of this misbehavior. 

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 most of the bugs from GR5, we did not have time to fix all the new bugs that emerged.

Evaluation

Users Tested

We selected our users from three dorms at MIT: Bexley, McCormick, and Burton Conner. All three users were regular desk workers and familiar with the everyday tasks of their job. We feel that these users are representative of our target population because our application is designed to simplify the lives of desk workers at MIT. We did not provide a demo for our users but provided them with the briefing and tasks described below.

Briefing

CollabDesk is an application that simplifies the lives of desk workers at MIT. It is a website 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 as well as search existing messages.

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 database so they persist between shifts without the possibility of being misplaced. 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.

Usability problems found:

Browse Pane

1. Number of Unread Messages does not update when reading them from "All Messages" Tab (Visibility)
   1. The number of unread messages (on the top of the "Unread Messages" Tab) does not properly update when reading unread messages are read from the "All Messages" tab, though it does update when read from the "Unread Messages" tab. This is a bug.
   2. Recommended Action: Update the counter every time an unread message is read, regardless of which tab it is read from.
2. Messages are not displayed in proper order (Consistency)
   1. Messages are supposed to be grouped by dates and sorted with the most recent date first, but some days are out of order. This is a bug.
   2. Recommended Action: Ensure messages are being stored in appropriate order in the back-end and that they are pulled in the same order
3. No auto-complete for search (Learnability, Efficiency)
   1. There are no recommended search results or way to access what was previously searched
   2. Recommended Action: Implement Auto-Complete, Save previously saved searches and recommend them based on relevance and frequency
4. Search Bar has no visible shortcut to clear it (Efficiency, Visibility)
   1. Although pressing the "escape" key will clear the search bar and clear the search results, the affordances of this shortcut are lacking
   2. Recommended Action: Have a visible shortcut ("x" button) or add affordance/help for the escape key shortcut (possibly with hover text)
5. "Unread Messages" Tab lacks visibility
   1. Multiple users did not see the "Unread Messages" Tab, suggesting that the tabbed interface was not visible enough
   2. Recommended Action: Improve visibility of tabs by outlining tabs with more defined lines around it and/or make unread tab open upon log in

Read Pane

1. Can't add tags to message by replying (functionality)
   1. There is a bug where the tags users create in the reply are not being added to the message where the reply is attached to until refreshed
   2. Recommended Action: Fix bug (the back end is being updated, but it needs to trigger a proper update of the view)
2. Functionality of Advanced Settings not clear (Help and Documentation)
   1. The purpose of advanced features such as "Alert Desk Captain" and "Notes vs Issue" is not clear and there is no help users can access to figure out its use
   2. Recommended Action: Since all desk workers are trained in the systems used at desk, we intended these features to be taught to them. However, even if this were the case, we could alleviate the problem by adding a help/about section to CollabDesk, or having available help dialog specific to Advanced Settings. 
3. Reply does not appear right away, there is a delay (Visibility, Feedback)
   1. Read Pane view does not update immediately after adding reply. This happens because it creates and saves a new Reply object before displaying it, which incurs variable delays since it has to access the Parse servers. Sometimes the delay is longer than a few hundred milliseconds, so the user does not see feedback of adding reply immediately and does not know whether it was successful or not.
   2. Recommended Action: Instead of waiting for the object to successfully be saved on Parse's servers before displaying it, we could display it right after it is created (though this assumes that the save will be successful). Another option is to add a spinner where the reply would be shown before it is ready to be displayed, and then replace that with the actual reply when it is ready.

Create Message/Reply

1. "Create New Message" dialog box does not scale (Put User In Control)
   1. Dialog that pops up to create a new message cannot be scaled, so part of the box may not be visible to users with certain screen sizes
   2. Recommended Action: Shrink default size of "Create New Message" and make it such that the box size is changeable.
2. No recommendations when creating new tags (Learnability, Efficiency)
   1. There is no efficient way to access a list of relevant previously created tags
   2. Recommended Action: Though templates fill in at least one tag by default, we could suggest additional tags based on what frequently gets added to certain templates, and/or have auto-complete when user types in tag

Reflection

We learned about the iterative, user-centered design process which was a concept foreign to all of us before taking 6.813. It was great to have the opportunity to put the concepts about need finding, prototyping, user testing, etc. into practice through GR1 - GR6. In the early stages of the project we tried hard not to think about or discuss implementation since a user interface is useless if it does not have users who find the interface usable and useful. If we did not learn the concepts of prototyping and user testing then our interface would have lacked several essential features that would make our project undesirable for desk workers to use, such as providing desk workers with customized templates.

Design Stage - Reflecting back to the decisions we made during the design stage, we feel that we could have viewed our ideas with a more critical eye. Every team member came together with their own unique ideas and we presented them during studio. After receiving feedback in studio, we sat down to discuss the ideas and simply picked the idea that received the most positive feedback. If we were to go back to the design stage, when considering different design choices we would have tried to think several stages ahead. For example, we were initially set on displaying all the messages linearly with the unread messages in a separate section at the top. However, we later realized that tabs for "All" messages and "Unread" messages better facilitated learnability of our interface. At that point, we realized other designs in the design phase had a variant of this feature; had we thought ahead during the design phase to the lower level interactions with the interface and been more critical, we may have caught some of these problems earlier. 

Implementation to User Testing Stage - Between the implementation stage and the user testing state, we attempted to make ambitious changes, such as adding tabs for "Unread" and "All" messages. Our existing framework did not favor such a large change, which fixed some problems but led to even more bugs. We realize now that this was a bad choice given the short time frame. We should have focused on fixing the bugs at hand instead of adding or changing features. 

We agree that the iterative, user-centered design process is very successful at helping identify user's needs. However, one of the most prominent bottlenecks for our group was the implementation. All members of our group came from a background that involved no web programming skills. The problem sets and tutorial sessions facilitated our ability to learn the HTML and CSS. However, incorporating a backend for our data to persist was difficult, particularly in the allotted time. Since the class is only a semester-long class we sometimes struggled to focus more on the usability problems since our attention was often diverted to implementation issues. If we were to work on building a user-interface without the time constraints of a class, we feel that our focus would have been more on adding or polishing features that could increase efficiency and learnability and less on implementation bugs (especially with the experience gained from working on this project).