Marauder's Map - GR3 Paper Prototyping

BRIEFING

On a lively campus such as MIT, students aim to meet up with each other all the time for many reasons, most of which fit into three categories:

1. Studying: Working on a problem set, or studying for an exam.

2. Relaxing: Looking for someone to relax with, have lunch with, or watch a movie at home with.

3. Exploring: Going out to an event, a party, a bar, an afternoon, an evening, or night out.

Currently, students tend to facilitate these interactions through emails or texts. More often then not, they only have a vague idea of when their friends are free, or what they feel like doing. As a result, further communication must be initiated to develop a plan.

This application is meant to optimize this communication process by providing viewers with a constantly updated view of what their friends are up to. When logged on, M.I.T Marauders Map allows the user to see where his/her friends are on a map of the MIT campus and surrounding areas, as well as their moods and statuses. The user’s friends, in turn, can see the user’s location, mood, and status.

When viewing the map, tagging options allow the user to organize friends into groups and toggle which friends are visible on a map.  The user also has the ability to control who they are visible to with the application’s hiding options. Interaction between friends is facilitated via the built-in instant messaging client.

TASKS - FIRST PROTOTYPE 

Task 1.
Direction given: Log into the website
Expected user action: Type in user name and password, then select one of the three moods.

Task 2.
Direction given: Update your status message
Expected user action: Click the text field labeled Status and type in message, then hit return.

Task 3.
Direction given: Add “Mason” to your friend list
Expected user action: Click in the search bar, type “mason”, find Mason in search result then click the Add button after his name.

Task 4.
Direction given: Create group “Study Buddies”
Expected user action: Click the Add Group icon, type “Study Buddies” in the popup dialog then click ‘Add’.

Task 5.
Direction given: Add “Mason” to “Study Buddies”
Expected user action: Drag Mason’s name from the map or “All Friends” list to the “Study Buddies” tab.

Task 6.
Direction given: View only people in “Study Buddies” on the map
Expected user action: Click “Study Buddies” icon to bring the tab to front.

Task 7.
Direction given: Make yourself invisible to “Monica”
Expected user action: Drag Monica’s name from the map or friend list to “I’m hiding from” field in the bottom.

Task 8.
Direction given: Browse statuses. Find who is working on the 6.813 pset.
Expected user action: Click “All Friends” tab to see all statuses, or click on each name on the map to bring up his/her ‘detailed info’ window.

Task 9.
Direction given: Message person found in Task #8.
Expected user action: Drag Tamika’s name from the map or friend list to “I’m chatting with” field in the bottom.

OBSERVATIONS - FIRST PROTOTYPE

We presented our first prototype to 3 users. All users could finish task 1, 2, 4, 5, 6 and 8 without difficulty. We observed two major usability issues from the test: 

1. Friend Finder Search Bar: 

When the user is asked to "Add 'Mason' to your friend list," the user completely misses the Friend Finder Search Bar. Instead, the user tries to find an "Add Friend" button in the tabs. When the user cannot find the button, the user searches the map next-- still not thinking to use the Friend Finder Search Bar. It is unclear to the user what the search bar does. When the user does use the Friend Finder Search Bar, further trouble arises because it is not clear if the Friend Finder Search Bar is searching in the user's pool of accumulated friends, or the site's entire user database.

Modifications applied to prototype: 

• Modifications can be see in the images under "2nd Prototype." They are outlined in purple.
• The modifications inspired by this group of observations are the ones labeled "1", "2", "3", and "4".

Modification 1: The label "Friend Finder" is added above the search bar to imply its functionality to the user.

Modification 2: An "Add Friend" button is included to the bottom of the "All Friends" tab. When it is pressed, the Friend Finder Search Bar flashes, indicating to the user that the Friend Finder Search Bar should be used.

Modification 3: The Friend Finder Search Bar is outlined in bright red to attract user attention when they are scanning the interface.

Modification 4: When a name is typed and submitted in the Friend Finder Search Bar, search results from site's user database are shown and then a line is drawn. Below the line are the tabs that are regularly in view when the Friend Finder Search Bar is empty.

2. "Hiding From" and "Chat With" drag and drop design not intuitive:

When the user is asked to "Make Yourself Invisible to Monica," the user confuses the "Hiding From" section on the interface for a text box, and tries to type "Monica" into it. When this does not work, the user tries to find the command by either clicking on "Monica" in the tag menu, or clicking on "Monica" on the map. When neither of these choices lead to a "Hide From" option, the user does not know how to proceed. It is not clear to the user that the image must be dragged into the "Hiding From" box.

A similar problem arises when the user is asked to "Message person found in Task #8." In this case, the person tries to type "Tamika" into the "Chat With" section (again, confusing this box for a text box).  Because this function is not available, the user tries to click on the user on the map. Luckily, this function opens up a window that has a "Chat With" button.

Modifications applied to prototype: 

• Modifications can be see in the images under "2nd Prototype." They are outlined in purple.
• The modifications inspired by this group of observations are the ones labeled "5" and "6".

Modification 5: The "Hide From" and "Chat With" sections are no longer text-box looking rectangles. They consist of dashed squares that match the size of a user's profile picture, to indicate that pictures can be placed into these positions.

Modification 6: An alternative route to "Hide From" a person is made.  When a user clicks on a friend on the map, the window that pops up includes both a "Chat With" and "Hide From" button.

OBSERVATIONS - SECOND PROTOTYPE

We presented our second prototype to 3 new users. As with our first prototype, our users completed tasks 1, 2, 4, 5, 6 and 8 without much hassle. This was expected so we paid special attention to the task the users had problems with in the first prototype -- adding a friend, making yourself invisible to a friend, and starting a chat with a friend. We observed the following improvements with our second prototype.

1. Adding a friend

With the new labeled "Friend Finder" search bar and "Add more friends" button, our users either noticed the "Friend Finder" and went straight to searching for "Mason", or they clicked the "Add more friends" button and noticed the search bar when the button click highlighted the "Friend Finder" red.

2. Making yourself invisible to a friend & messaging a friend

As a result of Modification 5, the fact that both these tasks could be achieved by dragging and dropping a friend's icon into the respective area at the bottom of the screen was now more apparent for our users. However, users were more likely to click on the friend first, and then notice the new "Hide from" & "Message" buttons in the friend status window that appears.

Our observations from our second prototype showed that we made progress in increasing visibility as our users had a much easier time with the tasks that had caused confusion in previous users. We believe this might be a result of having multiple ways to complete a task and tailoring them to the different intuitions we noticed our first round users tended to have.