CSE463 Module 2 (Part B) – Prototype Website Creation Portion Solution

For this portion of the assignment, you are expected to create a prototype website using Axure. The website will rely on the skills you learned in the tutorials as well as a bit of your own innovation.
The website needs to consist of five (5) web pages. None of the pages have to look exactly like the example application; however, they must provide the core functionality. An example of the five pages is in the figure below:

Your website will be graded based on the criteria at the end of this document.
Login Page

This will be the entry page. None of the other pages will be accessible until the user has logged in. The login must allow at least the following users test1, test2, and test3 all of which will have the password test. The login does not need to worry about the upper case or lower case.

The text fields will need a hint for each box. When the login button is clicked the user will be taken to the Photos page.
If the user enters an invalid login an error message will display notifying the user.

Master Navigation
Every page other than the login page must have master navigation. The navigation should appear in the same location on each page. It should have a format similar to the one used on the demo site, but it does not have to be the exact same. However, it does need to rely on buttons and the appropriate events and actions. Please note that the site map that is created automatically does not meet this requirement.
Photos Page

The photos page will use a dynamic panel to display different images. This page can use the images from the demo site or any other tasteful images. The page should load an initial picture and then change the picture when any of the thumbnail images are clicked.







Profile Page
The profile page is just a page where it will allow the user to enter name and address and then click the save button. It does not need to do anything with the data just allow it to be entered. The page should use a state drop down the list and it should be populated the abbreviated name of the states. Several lists of abbreviations come up after a Google search. See the example below.

Ramblings Page

The ramblings page will have an article or blog look to it. It must include at least 2 postings. The format of the postings should be similar. See the example below.

Calculator Page
The calculator page just displays a simple calculator. The numbers and operations need to be buttons and it needs a text field. However, it does not need to actually work.

Grading Rubric

Login Page
Description Data Expected Result Pass/Fail
User tries to click on Photos from the site list The login page is displayed (maybe after a quick flicker)
The user enters an invalid username and password foo/bar An error message appears
The user enters a valid username and password test1/test The user is taken to the Photo page
Entered username is displayed on top right of the screen
User clicks logout The user is taken to the login screen
The text fields will need a hint for each box. The text fields disappear on click








Master
Description Data Expected Result Pass/Fail
Navigate to photos, profile, ramblings, calculator
The same navigation and username appears on each page and in the same location
The Photos button is clicked The photos page is loaded
The profile button is clicked The profile page is loaded
The ramblings button is clicked The ramblings page is loaded
The calculator button is clicked The calculator page is loaded

Photo Page



Description Data Expected Result Pass/Fail
The photos page is loaded The first image is loaded by default
User clicks on the 1st thumbnail A larger version of the image is displayed
User clicks on the 2nd thumbnail A larger version of the image is displayed
User clicks on the 3rd thumbnail A larger version of the image is displayed

Profile Page



Description Data Expected Result Pass/Fail
The profile page is loaded The page has all the name and address fields
All the fields are aligned and laid
out in a logical way
The text is easy to read
Dropdown works
The save button is clicked Option 1: nothing happens
Option 2: fields are cleared
Option 3: fields are cleared and
entered data displayed









Ramblings Page
Description Data Expected Result Pass/Fail
The ramblings page is loaded The page has at least 2 entries
The entries are aligned with one another
The text is easy to read
The text on the page is readable



Calculator Page
Description Data Expected Result Pass/Fail
The calculator page is loaded The page displays a calculator with buttons for numbers, operations, and clear
All the buttons are aligned with a
clean layout
All the text is easy to read



Notes

Here are some additional step-by-step instructions that might help:
http://www.axure.com/learn/basic/interactions/show-hidden-widget-tutorial http://www.axure.com/ecommerce-tutorial