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 and increased information scent in the message previews. |
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 of toggling between note and issue was not intuitive. We also changed the placeholder text for tags to be more clear while indicating how tags are delimited. |
Key Features
Title | Prototype | Final Implementation | Comments/Description |
|---|---|---|---|
Replies | | | Originally, clicking on reply changed the create message pane into a reply pane that looked similar. This was supposed to be a way to maintain consistency because messages/replies would always be created in the same place on the screen, but the transition from New Message to Reply was not as noticeable to users as we had thought, leading to safety concerns about the visibility of system state. We received feedback in class that in-line replies would help with these concerns. Thus clicking on the reply button creates a new well underneath the existing message and replies with a simplified version of the Create Message form. |
Templates | | | We added more template choices. We also filled out the content that each template choice populates the fields (title, text, tags) with. |
Unread Messages | | | One challenge we faced was how to display unread messages once they had been clicked. Users were confused about where these messages moved to. In the final implementation, there is a different tab for unread messages. When a user clicks and views one of these messages, it becomes grayed out and faded in the unread messages tab to show that it has been read. However, it is still displayed, so that the user is not confused about where it went. Once the user moves back to the "all messages" tab, the recently read messages are removed from the "unread messages" tab. Thus the next time that the user clicks on the "unread messages" tab, they will no longer see the messages they read the previous time. |
Searching by Tags | N/A | | From user feedback, we realized that our tags looked clickable but did not actually have that functionality. In the final implementation, clicking on a tag allows users to search in the browse pane by that tag. |
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.
...
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.
...