Presentation of Design

General Approach | Page Transitions | Page Descriptions

General Approach Back Up

The process of finalizing this product contained several steps.  First, two low-fidelity prototypes were designed.  From the low-fidelity prototypes, the high-fidelity prototype was generated.  This high-fidelity prototype was tested by users.  Based on the usability test feedback on the high-fidelity prototype, the high-fidelity prototype was modified.  In addition to user feedback, additional modifications were made after re-evaluating some organizational and functionality issues of the game.  Through this process of evaluation and re-design, the high-fidelity prototype transformed in to the final product.  The final design was made in Flash and contains seven different page types.  These pages include login, about-the-game, registration, password-reminder, next level welcome, puzzle, hint, and prize-claim.

Page Transitions Back Up

Figure 1: Transition diagram for game interface

Depending on the type of user, two paths can be taken in order to arrive at the first trivia puzzle page.  Before playing a puzzle, the user must first login.  There are two different ways of logging in:  by registering as a new user or by logging in as a returning player.  After a successful login or registration, the user is brought to a welcome screen.  This welcome screen informs the user of the time decade the subsequent series of questions are set in.  Each decade contains three questions.  Upon completion of questions from one decade, a welcome screen for the next level is displayed for the next decade.  In order to win, the user must successfully complete all three questions from each of the decades (1950, 1960, 1970, and 1980).  Along the way there is a question inquiring the user’s email address.  The entered address sent a clue to help the player with a question.  Obtaining the email in the middle of the game rather than at the beginning may encourage more users to start playing since the registration page is short and no contact information is required.  After the user completes all puzzles, the user is asked to claim a prize for their participation.  Finally, the game ends by thanking the user for playing.  See Figure 1 for a more detailed diagram of the page transitions.

Page Descriptions Back Up

Figure 2: Login/Start page

The start screen is the login page (Figure 2).  The login page is divided into two sections.  The left side appeals to returning users while the right side appeals to new users.  New users are required to register for the game by clicking the Register button.  This button brings users to the registration page (Figure 3).  Users can also learn about the game by clicking the About The Game, which navigates to the about screen (Figure 4).  Returning users log in on the left side with their registered username and password.  If the password is misplaced or forgotten, the Forgot Password button is available.  This button brings users to the password-reminder page (Figure 5).  After a successful returning player login, the user is brought to the puzzle page at their last logout.

Figure 3: About page

Clicking About The Game from the login screen navigates to the about page (Figure 3).  This page gives detailed instructions and information about the game.  Clicking on Return to Login Screen from this screen brings the user back to the login screen (Figure 2).

Figure 4: New player registration page

Clicking Register from the login page navigates to the registration page (Figure 4).  The user is required to enter a username, password, and mother’s maiden name to begin playing.  Notice the registration page does not require the user to give any personal information such as name, email address, or street address.  This change was made based on feedback from the usability tests.  Several people were hesitant about giving out contact information over the internet, so to attract more users, the steps to starting the game requires no such information.  The user’s mother’s maiden name acts as a security question.  This security question and answer is used in the password-reminder page (Figure 5).  All entered information is stored in an online database.  On a successful registration, clicking Start Your Game brings the user to the first welcome screen (Figure 6).   A successful registration is one where a unique username is entered, both passwords match, and some non-empty string is entered for the mother’s maiden name question.  The appropriate error message appears on clicking Start Your Game.  The user also has an option to return to the login screen by clicking Return to Login Screen.

 

Figure 5: Password reminder page

Clicking Forgot Password? from the login page navigates to the password-reminder page (Figure 5).  This page is useful for returning users who forget their passwords.  However, the user must remember the registered username and mother’s maiden name.  Once a correct username and mother’s maiden name combination is entered, a popup message displays the user the registered password from the database.  After being reminded of the password, the user is returned to the login screen (Figure 2).

 

Figure 6: Welcome screen

A successful first time login brings the user to the welcome screen to the 1950s (Figure 6).  This screen informs the user which decade the questions are coming from.  Whenever the user completes all the questions from one decade, a new welcome screen appears to indicate they are moving to the next level.

 

Figure 7:  Puzzle page

Figure 8: Puzzle page with hint dialog

Clicking Let’s Play from the welcome screen navigates to a puzzle page (Figure 7).  Puzzle pages have a progress bar at the top highlighting the current decade in green.  Under the progress bar is the question to be answered.  The user must answer the question correctly and press Submit to proceed.  A correct answer brings the user to the next question or another welcome screen if all the questions in the decade are complete.  An incorrect answer results in a popup dialog that asks the user to try again.  If the user needs assistance figuring out the answer to the question, there is a Hint button.  Clicking Hint causes a dialog box to appear with the hint in the box (Figure 8).  A series of three questions appear before advancing to the next level.  A series of three levels or decades appears before the user completes the game.  Trivia questions are written about the music, fashion, news, sports, or popular books and toys from the decade.  They are aimed to exercise the memory of the users in a nostalgic, enjoyable fashion.  See Appendix C for trivia questions.  Lastly, the user has the option to logout by pressing Logout.  This action saves the users’ progress into the database allowing the user to begin at the last question upon logout.

Figure 9: Claim prize screen

Once the user completes the required puzzles, the claim-prize screen appears (Figure 9).  Hitting the Claim Your Prize button sends the user’s information to AARP.  In turn, AARP verifies the user information.  A popup dialog also appears informing users that an email notification will be sent to the entered email address with further details on receiving the prize.  The email sent suggests the winner to pick up the prize at the nearest AARP office.  The closest office is based on the user entered zip code.

Figure 10: Thanks page

Clicking Claim Your Prize from the claim-prize screen navigates to the thanks page (Figure 10).  This page is the official ending page of the game.  Users may click Return to Login Screen to return to the main page.