Design for Truth'n'Reviews

(Project Page)

Initial Prototypes

Main Page (design A)
Main Page (design B)
Main Page (design C)
Browse Screen
Display Review
Write Review


Everyone in our group created a prototype which included the home page of the website. Each prototype included certain parts while other prototypes neglected certain parts of the website. We looked at each prototype and compared the pros and cons of each in order to decide on which aspects to keep for our final paper prototype.

Prototype A
Prototype A consists of the images "Main Page (design A)," "Browse Screen," and "Display Review." This design is simple and focuses on only the game reviews and contains no further information on the games themselves. Also, prototype A didn't consider the social aspect of the website. On the main page, the site logo, search bar, and login and create account buttons are clearly placed on the top row so users would see them immediately. There is a main horizontal navigation bar near the top which is also visible to the user. We decided to keep these two top portions of the page. Below the main navigation bar, is a second navigation bar so users can choose to browse reviews by game platforms. The main body of the home page consists of two boxes for browsing reviews by genre or rating. Then, there is a redundant link to browse all reviews on the bottom (the top link "Reviews" refers to the same link location). The very bottom bar contains links about the website, such as "About," "Contact Us," and "Site Map." We decided to keep this bottom menu bar. In the final prototype, we decided that the main menu bars (top and bottom) would stay consistent throughout all pages of the website.

Only the task of browsing game reviews is supported. After clicking on "Reviews" on the top menu bar, the user is taken to "Browse Screen," but the top menus and bottom menu bars will remain the same for consistency. In this screen, users can browse for game reviews and filter the reviews by author, platform, genre, and rating. Links to reviews are shown in a list that is labeled with the game title, date, and author of the review. The reviews can be sorted if the labels "Game Title," "Published," or "Author" are clicked on. For simplicity and consistency, all links from the home page under the sections genre, ratings, and platforms will lead to the "Browse Screen" page, just with different options pre-selected in the drop down menus. For example, if a link from the "Browse by Genre" section on the home page was selected, the "Browse Screen" page would show up with that selected genre chosen in the drop down menu used to choose the genre.

After clicking on a link to a review on the page "Browse Screen," the user would be taken to the page "Display Review." We removed the comments for the review at the bottom of the page and decided that all discussion will be held in the website forum to reduce spam comments. This page displays a written review to users. Ratings for the review are displayed in a menu on the right. We decided to keep the basic format of this page the same, but we added (instead of ratings and polls) links to the game, the forum, and other reviews for the same game in the right navigation menu

Prototype B
Prototype B consists of "Main Page (design B)." This prototype focused on the user's interest in buying and playing games. We thought that the left menu to browse reviews by platform was visible and clear and would separate it from the main top menu so we kept the left menu. Prototype B didn't have a clear and visible main navigation bar on the top like A and C did. On the main page, users can see each month's top rated reviews, top rated games, and new games. This information on the main page would by eye-catching to the user. Information on top and new games and top rated reviews are useful to the user because it meets the user's needs and interests since our users will be mostly young gamers who tend to buy games on a semi-frequent occasion.

Prototype C
Prototype C consists of "Main Page (design B)" and "Write Review." Prototype C focused on the social aspect of the website, such as adding other users as friends, sending messages, seeing if friends are online or offline, and making some reviews "Friends Only" as opposed to public. For the final prototype, we decided to not give the option of making reviews "Friends Only" and not to see if friends are offline or online because that would only add further complication and they weren't necessary. Prototype C also contains the logo and log in buttons and a top menu bar on top for easy navigation. The main page is presented on a more personal level (where the user edit their profile information) rather than showing a general public view of the website.

The task of writing a review is supported by this prototype. The page "Write Review" would show up after clicking on the link "Write A Review" on the main profile page ("Main Page (design C). The user would select the game by choosing the game's box art, give a name to their review, and edit their review in the text area with a wiki-like tool bar and editing space. The editing space creates the correct mental model for writing a review because it's similar to other text editing tools. Some games don't have box art, so we decided that the user would select the game by name instead and the user would see the game's box art (if it had any) become displayed next to where they select the game from a drop down menu.

The tasks or parts that were not included in the prototypes were the forum page and a profile page for a logged in user that is seen by the public (where users can add each other as friends).

Final Prototypes

Main Page

This is the design of the main page. It includes a top section which has the site title, a search bar (with advanced search), login information, and a few links to the most important locations: home, browse reviews, browse games, and forums. The left sidebar contains three dropdown menus, browse by platform, older platforms, and mobile, all of which allows a user to browse games of those specific categories and have easy access to the information they most want. The bottom just has some links to about/contact info/help, as well as language features. These three bars will consistently appear in every page of the site.

Of the content of the main page, we decided that it was most important to display the top reviews, top games, and new games in this area. We wanted users new and old to see the reviews the site has to offer, as well as to see games that they might be interested in, so the main page reflects that by posting the best reviews that the site has to offer. Top reviews are based on user input as to the quality of writing of a particular review, while top games are just the best-reviewed or best-voted games of the month. All of the games will have links below them to reviews of the game as well as its forums, while reviews will have links to the game they're reviewing as well as the forum thread for that review.

Personal Center

This is the page arrived at after logging into the site to your account. The right lists a couple of links to other pages for managing your account - dashboard (default), mail, friends, and settings. Below that are some quick links to write a review, message a friend, or log off. Your dashboard contains lists of new messages in your inbox, the reviews that you've written, and a short list of friends and a way to message them right next to their name.

Search Page

The search page is arrived at after searching for something, and it has a fairly simple design. Buttons on the left help you determine what you're searching for, whether you want to search through every aspect of the site or only through games, reviews, or forums. Below that you choose what you sort the search entries by (relevance is the default), and the bottom allows you to navigate to further pages.

Write a Review

This page is arrived at through the personal center as well as through individual game pages. It lets you filter for the game name, then select the actual game from a dropdown menu. A box picture and the platform of the game become displayed next to the game that you choose to make clear what you're writing a review for. Below that is a box for the ratings of various categories that you can select, as well as the average score which naturally updates. Finally is the text edit which has many tools for editing wikis so it's possible to add images and such.

Game Page

This is the page that describes each specific game. It has the name of the game largely at the top, as well as links to its forum, its reviews, and to write a review for it right below that title. Technical information for the game, such as its platform, developer, and release date, is displayed to the right of the title. Below that are screenshots of the game to the left and a small dialog to the right that allows each user to input their own ratings of the game. Three ratings are displayed after side by side: the average rating of reviews on the site, the average rating of users who vote on the site, and the average rating of outside critics and reviewers. Finally, there is a short description of the game followed by a short list of the best reviews for that game (and a link to all reviews for the game).

Review Page

This is the page for an individual review. The top of the page is devoted to the review title as well as information on the reviewer, including that reviewer's average review rating as well as his avatar. The ratings he gave the game are displayed in a box below that, followed by the review itself. The right sidebar helps with navigation through reviews by displaying the game name and forum link for the game, and then allowing you to go to all other reviews for that game or just go directly to the next one. Below that is where the user votes on what they thought of the review based on categories like accuracy and depths, and at the bottom is a link to the discussion thread for the review.

Browse Reviews

This page allows the user to browse through reviews. It is arrived at through a link at the bar at the top of every page. A large title at the top makes it clear what page the user is on. The filter settings below that allow a user to display only the reviews relevant to their interests, whether it's by platform or rating or author. The display of reviews is in a tabular format, and the headings at the top of the columns allow a user to sort based on how they want the reviews are displayed. The links at the bottom let the user jump to different pages of reviews.