GR6 - User Testing

Design

The purpose of PickFind is to facilitate the process of finding worthwhile games of pick-up basketball to participate in. With this in mind, we ultimately chose to focus the design of our interface around the master list of pick-up games. Overall, we tried to keep our design minimalist, employing a white background and a simple color scheme with sufficient contrast.

INTRO/LOG-IN The first page that the user sees is the login/intro page. There are two outlined boxes that fill the center of the page. The first is a quick description introducing the user to PickFind. The second is a member login that allows the user to enter his/her username and password to access their personal version of the site. We include a link to register for users needing a new account.

REGISTER The user is asked to enter a set of information to identify themselves to the rest of the community. We indicate that required information is marked with a red star next to the corresponding field. The Gender entry is a pair of radio buttons that can only be selected one at a time for either Male or Female. The self-assessed Skill rating is a slider from 1-9. We chose the slider for simple visual comprehension and immediate graphical feedback. We include a tooltip over the question mark to explain the meaning of skill to the user.

MAIN The main page of the site focuses on the list of games that are available to the user. There are options for filtering, searching, and clicking for further details. A sidebar includes the user's personal schedule and news feed for following activity. The core functions of the site are delineated by location, position, color, and in some cases, borders. In order to avoid inundating the user with details, we minimize some pieces of the site that can be expanded upon use.

GAMES The available games are displayed as individual boxes on the main page of the site. Primary attributes are all formatted consistently in the same size, location, and color across all games. The boxes themselves are colored according to the user's role in the game. We chose to design the boxes in this way so that users will be able to quickly visually distinguish between his/her different roles in each game. We include large buttons for adjust the game itself or the user's participation in the game.

FILTER Games may be filtered according to several desire parameters. When the site is first loaded, the filters box is minimized so the user is not confronted with too much information. Clicking on Show Filters expands the box and allows the user to choose which games to display. The filter works using AJAX to keep the displayed games up to date as the user sets controls.

SHOW MORE Once the user scrolls down to the bottom of the list of displayed games, he/she can click on Show More Games to display additional games that fit the filter parameters. This button saves the page from having to load excessive information and allows the user to choose how much to display.

SIDEBAR The side bar includes a schedule of games that the user is participating in and a news feed for following activity. An abbreviated set of game information is provided for each entry. Game name links can be clicked to pop-up a more detailed game box.

DETAILS Game names with blue links can be clicked to pop up a complete game box with full details. The remainder of the page is shaded to reduce visually conflicting information.

USER The upper right corner shows which user is currently logged in. Mousing over the name drops down a menu with which the user can use to view profile, change password, or logout. All of these tasks were grouped for similar functionality. The search bar allows the user to search through all established profiles.

PROFILE User fills in relevant personal information to create a profile viewable by the community. Large icons indicate capabilities to edit profile and change profile picture.

FOLLOWING List of other users that you are currently following. Users are displayed by profile picture. Clicking on the picture links to their profile page. The total number of users displayed is capped, but can be expanded using a link. Search bar allows user to sort the people you are following.

UPCOMING Upcoming games are displayed using the same game box structure as in the main page. Game history for past games also uses the box structure.

Implementation

Evaluation

We conducted our user test on three basketball players who regularly play pick-up games at MIT. They represent three different skill levels and are from diverse subsets of the MIT community. Our users all volunteered to participate in our evaluation. They were briefed with an overview of PickFind and then were presented with a series of tasks to accomplish. We chose not to include a demo so that we would be able to test the initial learnability of our interface. Response was generally positive, and users were curious to see how PickFind would work.

Briefing:

"Thank you for agreeing to test out our 6.813 project, PickFind. Your feedback and our observations will be vitally useful to our design process. PickFind is a website designed to facilitate the process of finding pick-up basketball games to participate in. As things currently stand, pick-up games are not guaranteed. People may show up at a court looking to participate in a game, but there might not be anyone else there. If there are other players, there is no guarantee that they will be of similar skill level, or even that they are interested in participating. By creating a system that organizes the creation, and joining of pick-up games in a community, we hope to bring people together to make more enjoyable games occur more often. We will now ask you to complete a series of tasks that cover the breadth of functionality of our website. Do your best with each task, but there are no wrong answers. Please feel free to ask us questions, but we will only answer ones that help clarify the tasks at hand. If you're ready, we'll get started now."

Tasks:

1. Login to PickFind. Register for a new account if you need one.
2. Create a game for others to participate in.
3. Filter available games to find one that meets your criteria.
4. Join or Watch a few games that you would like to participate in.
5. Leave or Stop Watching some games that you are no longer interested in.
6. View/Edit your profile.
7. Search for the user named tonystark.
8. Follow tonystark and then follow some of the people he follows.
9. View the details of a game on your Schedule.
10. Logout of PickFind.

Problems discovered and possible Solutions:

Reflection

It was extremely valuable for our group to carry through an iterative design process from beginning to end. We learned a great deal about the strengths of rapid-prototyping and constant user evaluation. In most of the Course VI classes we take at MIT, there is usually some process, but it is never as deliberate or as user-centered as the iterative design we performed for this project. For example, none of us had paper-prototyped before, but we'll all likely use this tactic at least once more in the future. The idea of using quick, low-fidelity early prototypes is not exactly novel, but the implementation was an eye-opening experience for us. Involving the users at each iteration really helped to focus our group on improving the design for usability. Our final implementation has come a long way from our first brainstorming session in the basement of Stata.

We initially came up with the idea for PickFind as an online planner for basketball games. We knew that we wanted to solve the problem of inefficiency in pick-up basketball organization. A good decision we made at this step in the process was not to become too attached to any single idea. As we were brainstorming, we just threw features up on the board to get things going. The beginnings of a website started to coalesce, but we didn't not rule anything out either. At this point, we had several decent ideas to build on in parallel.

Once we got to storyboarding, we put together our ideas into cohesive outlines. Each of us took ownership for a few ideas and incorporated them into one of three storyboards. If we could do it again, we would have made a better effort to come up with our storyboards independently before we shared our ideas. By pulling from the same pool of ideas, we didn't take full advantage of three different minds with three different creative abilities. In the future, we would try to think of unique ideas before consulting with each other so that our own perspectives would each be brought to the table undiluted.

In the prototyping stage, we started with a paper model, then moved on to a computer mock-up. The paper prototype surprisingly took a while to put together although it was by no means a high fidelity prototype. During user testing, it was difficult to simulate the full functionality of our site, especially the tricks we wanted to pull with javascript and AJAX techniques. Next time, we might use a smaller paper prototype to speed up the iterative process so that we could make more changes on the fly. Nonetheless, we received good feedback from our testers that we were able to reflect in our computer prototyping. With our computer prototype we were able to implement a lot more of the features that made our site more intuitive. We added several tooltips so that users could clarify the intent of forms and fields on our website. The one major challenge with the computer prototype was that we didn't have a true back end supporting all of our data manipulation.

With our final design, our group really felt like we were able to accomplish most of the design objectives that we set out to achieve. Logistically, we underestimated the code complexity of our site. If we could do it again, we would definitely use a SVN repository for our version control. Throughout the process, our observations helped guide our design to be focused on the user experience. Our group's philosophy was to try to balance the severity of the user feedback with the feasibility of the implementation. In the end, we are very satisfied with PickFind and have already started to refer some of our friends to try it out.