GR2 - Designs

Scenario

Kevin Durant is a freshman starting his first year at MIT. He has been an avid basketball player throughout high school and hopes to continue playing in college. After being directed to the Zesiger Center, Kevin has already played a few pick-up basketball games here. He starts to notice a regular crowd of people playing at the Z-Center, but is frustrated that there is not much of a system for coordinating games. Sometimes it's very easy for him to find a rewarding game, at other times, he shows up to an empty court. As a prospective Couse 6 student, he thinks that there should be a way to solve this problem using the web. One of the people he has been playing with, George Karl, recommends PickFind to Kevin. Kevin's eyes are opened.

The first thing Kevin does is register with PickFind. He quickly fills out a profile with some of his basic information. Now Kevin gets started searching for some games to play in. His classes don't start until noon on Fridays, so he looks for a late game on Thursday night. Kevin is pleased to find a game at the Z-Center courts on Thursday night that was created by George Karl. The aggregate skill level of the game promises that there will be a high level of competition. He quickly adds himself to the game so he appears on the roster and the time shows up on his schedule. Kevin navigates over to George's profile to find out a little more about his new friend. He realizes that George is about the same skill level and also tends to play on weeknights at the Z-Center. As a result, Kevin adds George to his list of buddies. On Thursday night, Kevin shows up the court and gets a great game started right away.

Designs

Design 1

When Kevin first visits the website, he finds the home page displaying a list of the upcoming games in his city. He can change the city, filter games, search for games of a particular property (eg. keyword, organizer, date, time, location, rank) via a dropdown list, and sort the games by similar properties via a dropdown list. He can click see more for more games to append themselves to the games list. Because he does not have an account, he cannot see details of the games. Kevin can log in or register to gain more access to the system

Kevin clicks on the register button and is presented with the registration page. He fills out the information required and creates his account. The information will populate his public profile.

After registration, Kevin is met with his home page. It is similar to the one when he hadn’t logged in, except this time he can see game details and join/leave games. In addition, on the right side of the pane Kevin is presented with a list of his game schedule and buddy activities. At this point, these lists are still blank. There is a Create Game button on the pane that allows easy access to game creation. On the top right corner of the page, Kevin’s icon picture, name, rank, and location are displayed. If Kevin presses the drop-down arrow next to his name, he will be presented with options to go to his Profile, Account Settings, and Logout.

Meanwhile, George is logged in to his own account and is creating a new game. The location field provides auto-completion. When he chooses a date, he can click on the calendar icon and a mini-calendar shows up under the arrow. George can then click on a date in the calendar to set the field. When he gets to the Court field, he can click on the question mark for more information. A window will pop up showing the basketball courts configuration of the particular gym as well as their associated numbers so that players know which court to meet at. When George wants to edit a game, a page similar to the Create Game page will appear.
Notice that while George creates his game, his right side pane has not changed from the home page’s right side pane. Because George has many games on his schedule and many buddy activities, he can choose to see more, in which case the ride side pane will extend longer to accommodate more entries.
He can easily leave and edit games under his schedule as indicated by the icons and words. Clicking on a game overview entry will redirect George to that game’s details page. Hovering over entries with an arrow on the right side pane will produce a glow on that entry. Similarly, hovering on game entries in the main pane will make that entry glow.

Kevin searches games by location for games that are only in the z-center. Because he has free time on Thursday nights, he decides to use the filter function to filter down the search results to Thursday nights with George Karl as the organizer. He clicks on the filter link and a box appears over the main window. Kevin chooses the choices he desires. When he clicks OK, the filter applies the changes. If he clicked the X on the top right corner of the box, the changes would have been canceled.

The filtered result gave Kevin one game. He decides to click on the game details to learn more. The page includes information about the game, as well as a Join button for Kevin to easily join. When he clicks on join, a dropdown list presents him with options to join as a player, referee, casual interloper, or observer. After Kevin clicks one of the options, the Leave button will replace the Join button. The right side pane changes to a list of all the participants of the game. Clicking on a participant entry will send Kevin to that person’s profile page.

After joining the game, Kevin decides to look at George’s profile. He clicks on George’s name in the games list and comes across Geroge’s profile page. The profile page includes George’s personal information as well as a list of his future games and past games. Near George’s name is an Add Buddy button which Kevin clicks. (Side note: When Kevin views his own profile, the Edit Profile button replaces the Add Buddy button). The right side pane displays all of George’s buddies. Clicking on a buddy will redirect Kevin to that buddy’s profile page.

Analysis

Good Points:

• Information is presented in a simple manner on the homepage.
• The design provides commonly-seen affordances such as glow-on-mouse-hover for entries in lists, buttons, icons with links (join, leave), drop-down arrows, and side-arrows that indicate “details”
• Joining and leaving games require very little clicks, making the design efficient for these tasks.
• Creating a game is efficient when on the homepage.
• Design allows for searching and filtering.

Bad Points:

• Some tasks are not visible. For example, editing profile will require the user to first click on the dropdown menu next to his name at the top right corner, select Profile, and then select Edit Profile. Another example is that to create a game, the user needs to be on the home page to click the Create Game button. Not only are these steps and preconditions unobvious, they also require the user to use recall to complete the tasks.
• The design does not allow for much flexibility because it mostly uses forms, buttons, and lists.
• Games are only presented as entries, and each entry displays fixed information. This makes visibility difficult because there is no calendar view for users who care most about date or ways for users to pick entries to display only information the user cares about.
• The filter box cannot be viewed at the same time as the main window, decreasing visibility.

Design 2

When Kevin arrives on the home page he is greeted with an array of active games for him to join. They appear in large boxes arranged in a three column array. To show more rows, Kevin can press the button labeled "Show more games" that will set off a javascript action. To search through the different games, Kevin enters the location he would like to play at and the time at which he would like to play. He can set a minimum Player Count to filter out games that aren't heavily populated. Using a sliding range arrows, Kevin can set an upper and lower bound on the range of Skill levels he would prefer to play with. Clicking on one of the boxes will bring up a game details page.

Kevin registers with the website and creates a profile for himself. He enters his name, gender, age, location, and self-assessed skill level. He includes a picture for his profile and short blurb about himself. He includes contact information so that he can be reached by the people he is playing with. Kevin's profile page also lists the buddies that he has made through PickFind. The first five are shown as pic icons and the rest can be expanded by clicking the link indicating additional buddies. There is also a game history included on his profile so others may see where and when Kevin typically plays. The nav bar on the left hand side of the page will highlight the profile tab to indicate which tab the user is currently viewing.

Kevin views the details of the game created by George Karl. He can see the location and time as well as a map of where the court is. The average skill level is indicated by a bar graphic and the first five players are shown by their profile pic icons. We can sort the list of currently added players so that the five most relevant players are shown to Kevin. Now that Kevin is registered and logged in, he can see his profile pic on the left along with a logout icon. Kevin clicks the Join button to add himself to the game. He now appears on the game roster and the time has been slotted into his schedule.

The boxes on the home page make the games very visible. Given that the core functionality of the site is to connect players with games that they would be interested in, this design decision makes sense. The parameters are laid out logically to enable good learnability. If we use javascript on the filter selections, then the user would be able to figure out the implications of each option with great immediacy. However, some efficiency is sacrificed with the design. Many games cannot be viewed at once when the games take up large screen area. It wouldn't make sense from a speed standpoint to load all available games at once so a button must be clicked to display additional games. An expert user might rather have a large list of games without the box interface to assimilate more information quickly. The drop downs on the time option and the slide bars on the skill range will help limit error prevention. If we can implement a standard list of valid locations we can also do some error prevention on the location criterion.

Design 3

This design uses simple lists to display all the information. This design mostly relies on text to convey the information. Lists are sortable, and the list of games is searchable through filters. 

Storyboard

Task: Register

Kevin makes his way to the Pickfind site, and he encounters the login page. He must first login or create a new account in order to view the game listings. Kevin registers for an account by clicking on the “Register” link. To register, Kevin is led to the “Profile Page”, where he is asked to fill in his personal information and preference in order to create his profile.

Task: Create Game

Kevin’s friend, George Karl, creates a new game so that others can join. He fills in all the necessary fields, and creates it so that the game can be found on the public listings. 

Task: Search/Filter for Game

After Kevin registers, he is directed to the main page, where has can see a list of all available games at his location and has the option of creating and joining games. The menu bar on the left allows the user to access their profile, buddy list, game history and also to create a new game. Kevin uses the search filters to find the game created by George Karl. Wanting to get more information about the game before joining, so he clicks the “Details” arrow. 

Task: Join Game

Kevin browses details about the game, and finds that it is a good match for him. He sees that his friends are playing, so he decides to join. 

Task: Add buddies

Kevin then decides to add the other players signed up in George Karl’s game to his buddy list. After adding them, he goes to see his entire list of friends by clicking the “My buddies” link on the left menu. 

Task: Edit Public Profile

Kevin, thinking he should put up a little message/note to introduce himself on his public profile, goes back to his profile page to update his information.

Kevin goes through the main listings and joins a few more games he’s interested in. Before closing the PickFind window, Kevin does a quick check on the status of his games. He clicks “My Games” on the left menu, and sees a list of games he has joined. Happy with what he sees, he closes PickFind, and goes to study for a looming mid-term. 

Design Analysis

Pros:

-          The left menu allowing access to the user’s profile, buddy list, game history and game creation is continuously visible and easily assessable.

-          Representing information with lists makes the UI more organized, easily sortable and selectable.

-          The view is compact, easily understandable, and fairly simple.

-          The design scales well to large data sets (ex. a large number of games).

Cons:

-          Not a very visual design - users need to read through lots of text for each listing. The compact displaying of information may make the site harder for a user to process and manipulate information.

-          Design has very little direct manipulation and is not very flexible.