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.

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.

Usability problems found:

Reflection