You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 18 Next »

GR2 - Design

Stephen Chang, Sarah Han, Samvaran Sharma

Scenario

Larry, Curly, and Moe work in an office together. One day, they have a heated argument about who is the best at table tennis. After 30 minutes of whacking one another on the head with pliers, they decide the best way to determine who is indeed the best is to create a tournament between everyone in the office. Although methods for keeping track of such events exist (such as using Google Docs, or simple pen-and-paper with email), these approaches are tedious, and typically require a large amount of work and organization - both skills that the Three Stooges lack. 

Fortunately, Moe has an idea. He has used a tournament organizer, called "BrackeTracker," in the past. He suggests to the others that this website would be the perfect way of organizing the table tennis tournament between everyone in the office, and will involve very little effort. Larry likes the idea and decides to create an account and set up the tournament on the website. 

Larry
Since he has volunteered to set up the tournament, and invite everyone in the office to participate. 
He begins by:

  • Creating an account and logging in
  • Navigating to the page that enables him to create a new tournament
  • Adds the tournament name, description, etc. to create the tournament
  • Sends out invites to others already using the site (like Moe), as well as through email
    He waits for people to join during the "join period". Once this period is over, he closes the tournament registration, and the site automatically generates the initial bracket. (Note that he is himself participating in the tournament, in addition to managing it.) 
    A few days into the tournament, however, Larry finds out he needs to make a business trip, and will be away for a few days. Before he leaves, he adds Curly as another admin on the tournament page, so that Curly can take care of any problems while he is away.

Curly
After a few hours of being unproductive at his desk, Curly receives an email from Larry's BrackeTracker account with a link to create an account and join the tournament. His tasks now include:

  • Clicking on the email link to get to the BrackeTracker site
  • Creating an account on the site
  • Accepting Larry's invitation to join the ping pong tournament within the join period
  • Waiting for the tournament to start
    Once the tournament starts, his tasks include
  • Playing his matches, and updating the scores
  • Approving score updates from his opponents for completed matches
  • Viewing the progress of the tournament and the leaderboards 
    After a few days, Larry tells him that he needs to go on a business trip, and makes him an administrator for the tournament. This doesn't involve much work, since the site is so automated. However, one day he has to deal with an office member who has neglected to play any of his games and shows no interest in participating in the tournament. Using his administrative power, he boots the player from the tournament in order to keep everything running smoothly.

Moe
Moe is the only one in the office not new to BrackeTracker, and already has an existing account, and is participating in many different tournaments concurrently. As it turns out, Larry had forgotten to include him when he sent out the invites, so Moe has to manually add the tournament to his account. His tasks are:

  • (Getting the tournament name and password from one of his co-workers)
  • Searching for the tournament by name on BrackeTracker
  • Joining the tournament by entering the password
  • Waiting for the tournament to start
  • He enjoys using BrackeTracker, because it allows him to keep track of the many different tournaments he's participating in in a simple, organized manner.

Designs

Listed below are three different design approaches to accomplish the tasks faced in the scenario.

DESIGN #1

Task

Screenshot

Story

Learnability

Efficiency

Safety

(Home Screen)

 

This is the launching point for many of the tasks one would want to accomplish. Once a user has logged in, this is their home screen. From here, at one glance, the user can determine what tournaments they are a part of, view a list of all their friends on the site, and take care of any notifications that may pop up. 

Additionally, at the bottom of each of these three columns are buttons that a user may use to a) Create a New Tournament, b) Add a Friend, and c) Send a Message to someone. 

At the top is a bar that is ever-present and includes things like the user's username, a logout button, and a settings button.

The Home screen is unique in that it displays a lot of relevant information while still remaining fairly simple and learnable for new users. The three columns have clear, bold headings, and the search boxes next to them display a strong external consistency with other search boxes common on the internet. The magnifying glass icon also demonstrates an affordance that leads a users to treat the text box as a search box. 

Furthermore, all boxes representing tournaments, people, or notifications are clickable, and change color when moused over, in addition to the pointer itself changing into a pointing hand symbol, encouraging users to click, and therefor learn by doing.

Efficiency is accomplished in two ways - using individual search boxes in each column, and by making every entity a big, clickable box. Combined, these features make navigating the interface a breeze.

The first two columns are extraordinarily safe, since there is no modification that can be done to the entities there. Searching is a simple process displays search results in the column itself, and deleting the search term resets the column to its original state.

The only column in which safety might be an issue is the Notifications column, since one is modifying the state of objects - most importantly confirming score updates. In order to combat this, a popup dialog box is used, asking the user to confirm the action. Although this sacrifices some efficiency, it adds to safety greatly. Additionally, players can contact the admin of the tournament and ask him or her to reset that game's score, just in case the incorrect score is confirmed.

Create a Tournament

 

This is where Larry would create the ping-pong tournament. By clicking on "New Tournament" on the home screen, a new competition is created, and Larry can now set it up for the whole office to use.

Larry first adds the Tournament Name and Description, via editable text boxes, and then proceeds to label the tournament type as a simple elimination tourney from a drop-down list. He can also set the sport or activity being done (in this case, ping pong) by text box. 

Once he has completed all the information for the tournament, he has to send out the invitations. At the top right are two simple ways to add people to the invite list. Larry can search through his friends on the BrackeTracker, or add people's emails to an invite list. As he sends out the invites, people will receive an invitation to join BrackeTracker if they have not created an account already, and will also be given a "password" for the tournament that they have to type in for verification. This is to ensure that random people not associated with the office cannot add themselves.

Finally, as people join, Larry will be able to see their names as either "Participants" or "Watchers" for people who want to watch the progress of the tournament without participating. Since Larry is an admin (because he made the tournament), he can see buttons that allow him to add people as admins, or boot people from the tournament. Once everyone has joined the tournament, Larry can click the "start tournament" button to lock the participants in place and close the "joining period".

This is also the page that people will see when they try to view the tournament during the "joining period" (minus the "make admin" and "boot" buttons and editable text boxes if they are not admins).

 

 

 

Search/Join a Tournament

 

Searching for a tournament and joining that tournament is done in the Home page, mainly. As stated before, there are two ways that one can invite someone to join a tournament - either by sending an invite inside BrackeTracker to someone's account (which will also send them an email through the email they used to register their account), or by sending an email directly. In both scenarios, the process is almost the same for adding the tournament, exemplified by Curly's actions. Curly receives an email asking him to join the tournament. Included in the email is the tournament name and a "password" for the tournament. He follows the link to BrackeTracker's home page, which asks him to create an account. Once he does so, he sees that he has a notification asking him to join the office's table tennis tournament. He clicks on the link, enters the password for the tournament in the popup box that appears, and is then sent to the "Create a Tournament" view above, which allows him to see the state of the tournament during the "joining" period (of course, because he is not yet an admin, he cannot modify any information in this page). This process is nearly identical for someone who already has an account and receives an invitation (except that the site does not prompt him to create an account) 

Moe, however, was accidentally left out from the invite list. However, he also has no problem joining. He goes to his home page and searches for the tournament name in the "Tournament" column. Since he is not part of the tournament yet, it is not already part of the list of tournaments he is participating in. Instead, a little button asking him whether he would like to "Search All Tournaments" appears. By clicking this, the search expands to all tournaments registered on BrackeTracker. He finds the table tennis tournament, but of course, he cannot join yet, since he did not receive the invitation with the password. He asks his co-worker at the desk next to him for the password and enters it, enabling him to view the same "Create a Tournament" page that Curly does.

 

 

 

Update a Tournament

 

Updating a tournament is a task that Larry, Curly, and Moe (as well as other members of the office) do quite often. Every time they finish a game, they go to the Home page, find the table tennis tournament in their list of Tournaments, click on it, and are transported to the "View/Manage a Tournament" screen. Here, they see a full overview of the tournament represented graphically.
As they play games, they click on the boxes that represent games in which they've played, and update the scores, and mark a winner. This gets sent to their opponent for confirmation (it will show up in their notifications feed). 
Updating a tournament is a task that Larry, Curly, and Moe (as well as other members of the office) do quite often. Every time they finish a game, they go to the Home page, find the table tennis tournament in their list of Tournaments, click on it, and are transported to the "View/Manage a Tournament" screen. Here, they see a full overview of the tournament represented graphically.

As they play games, they click on the boxes that represent games in which they've played, and update the scores, and mark a winner. This gets sent to their opponent for confirmation (it will show up in their notifications feed).

 

 

 

Manage a Tournament

 

Managing a tournament is a fairly simple job, once a tournament is created. Larry does most of the work initially by setting up the tournament name and description, as well as type, but after that, it's almost fully automated, since players will themselves be updating and approving scores.

The main role of an  admin/manager is just to ensure the tournament is running smoothly. Larry is able to make other participants admins, as he does with Curly, and Curly in turn utilizes the other main function of admins - the ability to boot people from the game. This is usually just used when a participant is not following the rules of the game or is being inactive for a prolonged period of time. The only other thing a manager may do is reset a game's score (if, for instance, the players need to redo the game or if the wrong score was entered).

 

 

 

View a Tournament

 

Viewing a tournament is a fairly simple process that is accessed by clicking the tournament's link on the Home page. As stated above, it lets you see a graphical overview of the games that have played and the matchups that have yet to be contested. If you mouse over the left part of the screen, a little window scrolls out, detailing the tournament name, details, and participants. One can click on "standings" to view stats and individual rankings.

 

 

 

DESIGN #2

Task

Screenshot

Story

Learnability

Efficiency

Safety

Create a Tournament

 

 

 

 

 

Search/Join a Tournament

 

 

 

 

 

Update a Tournament

 

 

 

 

 

Manage a Tournament

 

 

 

 

 

View a Tournament

 

 

 

 

 

DESIGN #3

Task

Screenshot

Story

Learnability

Efficiency

Safety

Create a Tournament

 

 

 

 

 

Search/Join a Tournament

 

 

 

 

 

Update a Tournament

 

 

 

 

 

Manage a Tournament

 

 

 

 

 

View a Tournament

 

 

 

 

 

fin

  • No labels