DESIGN

Here is a screen shot of the Marauder's Map main page.

Marauder's Map is a way for users to see where their friends are and what they are up to.

It stands out from other location oriented websites because it sports several features to help with organizing, displaying, and interacting with friends.

The rounded markers on the map represent different friends that are online, while the gold star represents the current user.

These markers are placed dynamically by geotracking the user's IP address.

The colors of the marker correlates with the mood that each friend has set.

A mood must be chosen at login, but it can be changed at the top of the main page.

There are three moods: "Adventurous", "Relaxed", and "Studious."

Friends can be organized into different groups. These groups are displayed as tabs in a sidebar on the right of the screen. 

The tabs control the visibility of markers on the map: if an online friend is not in a group when its tab is clicked, their marker becomes transparent.

This can be seen below:

The tab that is currently selected is the "All Friends" group. It has Mason, Tamika, and Xiaoji in it.

Tamika is offline so she is not on the map. Mason is adventurous, which is represented as a red icon by his name in the sidebar and a red marker on the map. Xiaoji is relaxed, so her colors are blue.
When the "Study Buddies" group is selected, Mason's marker becomes transparent, because he is not a member of that group.

Groups are managed by the two bottom tabs. The "+" tab opens an add group dialog, and the "-" tab opens a delete group dialog.

The "-" tab was added later in the design process. Because these two tabs manage the other tabs, they are separate from the main tabs.

The add group dialog has a field where the user can type the name of a new group.

The delete group dialog displays all of the created groups in a drop down menu. The user can select any group and remove it.

When a tab is selected and a group is displayed, the friends in this group are displayed.

Each friend is described by their name, photo, status, and status message. 

The other icons by each friend are the "Chat With" and "Hide From" icons.

The Chat With icon opens an instant messaging session with the corresponding friend,

while the Hide From icon makes the main user invisible to that friend (the main user shows up as offline to that friend).

These buttons were initially hidden from view in the "V" button, but have since been draw out to increase visibility and efficiency.

The only button that remains hidden in the "V" button is the "Delete This Friend" button. 

This design choice was made to prevent users from accidentally deleting friends.

The hiding from icon has the added feature of displaying the hiding state between the main user and the friend:

When the eye is open, the main user is not hiding from that friend. If the eye is closed however, then the main user is.

The Hiding From state is also displayed in the bottom bar under the hiding from section.It is shown here as well so that the main user can constantly see who he or she

is hiding from-- even if a different tab is selected.

In the initial stages of the design, the bottom bar was a droppable area that images of friends needed to be dropped into.

This was not intuitive to users in user testing. Now, the bottom bar just holds the names of a user after the corresponding

Hiding From button has been clicked.

 
The "All Friends" tab is a tab that cannot be deleted. It is different from the other tabs. It shows all of the friends a user has.

Friend requests are located at the bottom of the tab.

At the bottom of the user-created tabs, is the hyperlink "Manage Friends."

This link opens a dialog with all of the main user's friends. The friends that are already in the group appear with checkmarks by their photos.

The user can check or uncheck boxes in this dialog to add or remove friends to the group.

This was a major design improvement from initial designs. Where in the past a confusing drag and drop method was depended on,

this method is simple, clear, and to the point.

IMPLEMENTATION

EVALUATION

Method

We conducted our testing using the same briefing and tasks from GR3 Paper Prototyping. Throughout GR4 and GR5 the intended purpose of our application and it's features did not change, so we decided that the same briefing and tasks would still be suitable and sufficient to test our finished implementation. 

During pilot and user testing our users were given the briefing and then began completing the tasks one by one, which were dictated to them. There was no demo given since our testing involved tasks that highlighted every main feature of the application. Therefore, any sort of demo would have caused us to bias user performance on some of our tasks. We opted to have more thorough testing with all of the nine original user tasks, rather than give a demo and have to omit some of the tasks from the testing process.

In addition to the briefing, during our actual user testing, users were given instructions to think out loud, to not worry about how quickly they completed the tasks, and to feel free to give up and ask for the solution to a task if they got frustrated. 

In both situations our users were completely representative our our target audience, as they were all current MIT students.

Pilot Testing Results

Pilot testing was conducted on four 6.813 / 6.831 students on Demo Day. All four users had no trouble completing each of the 9 tasks but provided feedback that brought to light the issues detailed below. More important however, our pilot testing assured us that our testing method was clear and concise enough to be used for our final user testing.

1. Cosmetic (graphic design): Two users pointed out that the add/delete group button looks too similar to the Google maps navigation buttons. 

    Buttons for adding and deleting a group attached along the sidebar

This issue did not affect their ability to figure out what the buttons were for, so it was deemed cosmetic. To alleviate this issue, we could have affordances for those buttons other than a ' + '  and ' - '. For example, the button for adding a group could read ' + Group ' instead of just ' + '. 
2. <B>Minor (visibility)</B>: One user initially thought the status text field was for searching. 

Two of the users took significantly longer to complete the task "Create a group called Study Buddies" than any other task, and one user opted to be told how to do it. All three users commented that they thought the ' + ' and ' - ' signs meant that the buttons were meant for zoom functionality on the map. One user also commented that it did not help that the buttons were separated from the group tabs, as opposed to just being right below the last tab. This issue was acknowledged in pilot testing and originally deemed a cosmetic graphic design issue. However, the fact that our test users had significantly more trouble with the task, plus one user having to ask how to complete the task, we now consider this issue a major learnability issue. The solution to this issue remains the same as previously described in our pilot testing results.

REFLECTION

GroupsGroups