Design and Implementation
COOKIE H\bT Pa\fe 1 of 18 INNOVATIV\b SOLUTIONS\f INC.
Feasibility Analysis f or Cookie Hut\f Inc. \b- INNOVATIV\b SOLUTIONS\f INC.
Interface Design Documentation By: COOKIE H\bT Pa\fe 2 of 18 1. Home Page Functionality: The Homepage displays the standard menu that will display on all pages throughout the site:
oHome button – The Cookie Hut Home Page is displayed.
o Cookies button – The Product page is displayed which lists all the cookies available for order and allows the user to add cookies to their Shopping Cart.
o Seasonal button – The Seasonal page is displayed which lists all the seasonal cookies that are available for order.
o Packaging button – The Packaging page displays which lists all the available Packaging Options.
o Gift button – The Gift page displays which lists all the gifts that are available for purchase.
o Nutrition button – The Nutritional Information page displays which includes a link to the Nutritional Information in PDF format.
The Home page displays the standard menu in the header which will display on all pages throughout the site: oContact Us – Displays the various methods for contacting customer support.
o Locations – Displays a list of the addresses and phone numbers for all Cookie Hut locations. COOKIE H\bT Pa\fe 3 of 18 o Login – Displays until the user has logged into the site. Once the user has logged in, the user is placed into a secure session. The Login link is replaced with a Logout link once the user has logged into the site.
o Logout link – Only displays when the user is logged into the site. Once the user logouts of the site, the Logout link is replaced with the Login link.
o My Account – Only displays when a user is logged in.
o Admin – Link to the Administration and Reports section. This link only displays if the user is an Admin user.
Tool Tips:
None.
Input validation: None. Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” 2. Login Page Screen functionality: All customers will be required to create a user profile prior to placing an order.
New customers will click the Continue Checkout button. Prior to the checkout process, the new user will be required to create a user profile.
Existing users have the option of logging in when they first access the site or during the order process. Once the user logs into the site: oThe Home Page is displayed.
o The Login link in the header is replaced with a Logout link. COOKIE H\bT Pa\fe 4 of 18 o The My Account link is displayed in the header which allows users to update their user profile information.
The Login page includes “Forget Password?” and “Forget User Name?” links:
oForget Password? – User enters their User Name and Email Address and a link is emailed to them. When the user clicks the link, the user is directed to a password reset page where they are asked to enter their new password and confirm the new password.
Once they have successfully changed their password, the user is taken back to the Login page.
o Forget User Name? – User enters their Email Address and their User Name is emailed to them.
Tooltips: When the user hovers over the User Name text box with the mouse, the following message will display: “Enter User Name.” When the user hovers over the Password text box with their mouse, the following message will display: “Enter Password.” Input Validation: The system will validate that the User Name entered by the user exists in the database.
The system will validate that the Password entered by the user is the password that is stored in the database for the User Name entered.
The system will validate that the user account is active. If the account is inactive and the user is not an Admin user, the system will automatically re-activate the account and the user will be logged into the site.
Error messages:
When the user enters an invalid User Name, the following message displays:
“The User Name entered does not exist. If you do not remember your User Name, please click the “Forget User Name?” link.” When the user enters an invalid Password, the following message displays:
“The Password entered does not match the User Name entered.
If you do not remember your Password, please click the “Forget Password?” link.” When the user does not enter a User Name and Password prior to clicking the Sign In button, the system displays the following message:
“Please enter your User Name and Password prior to clicking the Sign In button.” When an Admin user attempts to login to the site and their account has been inactivated, the system displays the following message:
“Your account has been de-activated. Please contact customer support.” If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 5 of 18 3. Product Page Functionality: The Product List page displays all the products that are available for purchase.
Search – Allows users to perform keyword searches across the cookie name and the description.
Add to Cart - Users can add products to their shopping carts by clicking the Add to Cart button.
The Shopping Cart page is displayed when a user clicks on the Add to Cart button.
The Add to Cart button is disabled when the product is out of stock.
Input validation: None.
Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 6 of 18 4. Shopping Cart Page Functionality: Users can modify the Quantity and Packaging Option for each item in the Shopping Cart.
When the Shopping cart Quantity and Packaging Options are modified, the Price, Subtotal and Total fields are automatically updated.
Users can remove items from the Shopping cart by clicking the Remove button for that item.
Users can return to the Products page to continue shopping by clicking the “Continue Shopping” link.
Checkout button:
oWhen an existing user is already logged in to the site, the Shipping Addresses page is displayed.
o When an existing user is not logged in to the site, the Login page is displayed.
o For new customers that do not have an account, the create user profile page is displayed. Once the user profile is created, the Shipping Addresses page is displayed.
Tool Tips: None Input validation: None COOKIE H\bT Pa\fe \b of 18 Error messages :
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” 5. Shipping Addresses Page Functionality:
The Shipping Addresses page displays all the addresses that have been entered by the user.
The user selects the address that they wish to ship the products to.
Only one shipping address may be selected per order.
The user can also add a new address to their address list by clicking the Add New Address link.
Once the user has selected the shipping address, the user clicks the Continue button which displays the Shipping Method page.
Tool Tips: None.
Input Validation: None.
Error Messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 8 of 18 6. Shipping Method Page Functionality: The Shipping Method page allows the user to select a Shipping Service and Shipping Method.
When a value is selected from the Shipping Service dropdown, the Shipping Method dropdown is automatically updated with the shipping methods that are associated with the shipping service.
The user can return to the previous page by clicking the Back button.
Tool tips: When the user hovers over the Shipping Service dropdown with their mouse, the following tool tip is displayed: “Select the Shipping Service.” When the user hovers over the Shipping Method dropdown with their mouse, the following tool tip is displayed: “Select the Shipping Method”.
Input validation: None. Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 9 of 18 7. Payment Method Page Functionality: Only one payment method can be selected at a time.
Default Card - When this option is selected, the Add New Card and Gift card sections are collapsed.
Add New Card – W hen this option is selected, the Default Card and Gift card sections are collapsed.
Gift Card – When this option is selected, the Default Card and Add New Card sections are collapsed.
The user can return to the previous screen by clicking the Back button.
The user can cancel the order by clicking the “Cancel Order” link and the Product List page will display.
The user clicks the Continue button to continue with the checkout process and display the Submit Order page.
Tool tips: When the user hovers any of the fields in the Add New Card or Gift Card sections, the system will display the following tool tip: “Please the .” Input validation: The system will validate that all required fields have been populated when the user clicks the Continue button. COOKIE H\bT Pa\fe 10 of 18 The system will validate that the Credit Card Expiration Date is numeric and that the format is mm/yyyy.
The system will validate that the credit card information is approved.
The system will validate that the gift card information is approved.
Error messages: The following error message will display when required fields have not been populated when the user clicks the Continue button:
“The field is required.” “The field is required.” The following error message will display when the user clicks the Continue button if the credit card is not approved:
“The credit card payment was not accepted. Please verify that the credit card information is correct.” If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” 8. Submit Order Page COOKIE H\bT Pa\fe 11 of 18 F unctionality: The Submit Order page allows the user to review the order prior to submitting the order.
The user can edit the billing address by clicking the Edit link listed under the Billing Address section.
The user can edit the shipping address by clicking the Edit link listed under the Shipping Address section.
The user can edit the payment information by clicking the Edit link listed under the Payment Information section.
The user can cancel the order by clicking the Cancel Order link.
The user can edit the order by clicking the Edit Shopping Cart link.
The user can return to the previous screen by clicking the Back button.
The user can submit the order by clicking the Submit Order button.
Tool tips: None.
Input validation: None. Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 12 of 18 9. Order Confirmation Page Functionality: The Order Confirmation displays a message letting the user know that their order has been received.
The user can view a copy of their receipt by clicking on the View Receipt button.
Tool tips: None.
Input validation: None. Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 13 of 18 10. Administration and Reports Page Functionality: The Administration and Report page provides a menu for site administration functions and access to the available reports.
Tool Tips: None. Input validation: None. Error messages:
None. COOKIE H\bT Pa\fe 14 of 18 11. User Management Page Functionality: The User Management page displays a list of all the users of the site.
This page includes the basic functionality that will be the standard throughout the Admin section:
oEach column in the table is sortable in ascending or descending order.
o Navigate between the pages using the navigation buttons:
|< - display the first page of records.
< - display the previous page of records > - display the next page of records >| - display the last page of records o Modify the number of records displayed on the page by selecting from the Records Per Page dropdown box.
o The number of records and the current page number are displayed below the table.
o Add button – Displays the Add User page.
o Update link – Click on the Name link to display the Update User page.
o Back button – Return to the previous page.
Tool tips: None.
Input validation: None. Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 15 of 18 12. Add User Page – User Information Tab Functionality: Required fields are denoted with an asterisk to the left of the field name.
The user can return to the previous screen without saving their changes by clicking the Cancel button.
The user can click on any of the tabs while adding the record and the values entered on the previous tabs will be retained.
Tool tips: All fields will display a tooltip when the user hovers over the field with their mouse. The tool tip will be displayed in the following format: “Please the .” Input validation: The system will validate that all required fields have been populated prior to clicking the Save button.
The system will prevent the user from entering non-numeric values into the Zip field.
The system will include a mask in the Phone Number field to only allow numeric values to be entered in the following format: (XXX) XXX-XXXX.
The system will prevent the user from adding in more than the allowable number of characters in all text fields.
The system will verify that the User Name does not already exist in the database and is at least 6 characters in length.
Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” COOKIE H\bT Pa\fe 16 of 18 The following error message will display when required fields have not been populated when the user clicks the Save button:
“The field is required.” “The field is required.” The following message will display when the user enters a User Name that already exists in the database when the user clicks the Save button:
“The User Name you have selected already exists. Please enter a different User Name.” The following error message will display when the Password entered by the user does not adhere to the password rules:
“The Password must be at least 8 characters in length and contain 1 number and one special character.” 13. Add User Page – Billing Information Tab Functionality: Required fields are denoted with an asterisk to the left of the field name.
The user can click on any of the 3 tabs while adding the record and the values entered on the previous tabs will be retained.
Tool tips: All fields will display a tooltip when the user hovers over the field with their mouse. The tool tip will be displayed in the following format: “Please the .” COOKIE H\bT Pa\fe 1\b of 18 Input validation: The system will validate that all required fields have been populated prior to clicking the Save button.
The system will prevent the user from entering non-numeric values in the Zip field.
The system will prevent the user from entering non-numeric values in the Credit Card No. field.
The system will include a mask in the Expiration field to only allow numeric values to be entered in the following format: MM/YYYY.
The system will prevent the user from adding in more than the allowable number of characters in all text fields.
Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” The following error message will display when required fields have not been populated when the user clicks the Save button:
“The field is required.” “The field is required.”’ 14. Add User Page – Permissions Tab Functionality: Each user must belong to at least one User Group.
When the Active checkbox is checked, the user can login to the site. When the Active checkbox is not checked, the user cannot login to the site. COOKIE H\bT Pa\fe 18 of 18 Last Login field displays the last date/time the user logged into the site. The user can return to the previous screen without saving their changes by clicking the Cancel button.
The user can click on any of the tabs while adding the record and the values entered on the previous tabs will be retained.
Tool tips: The Available User Groups list will display a tooltip when the user hovers over the field with their mouse. The tool tip will be displayed in the following format: “Please select a value from the list and click the > button to add the user group.” The Selected User Groups list will display a tooltip when the user hovers over the field with their mouse. The tool tip will be displayed in the following format: “Please select a value from the list and click the < button to remove the user group.” Input validation: The system will validate that all required fields have been populated prior to clicking the Save button.
Error messages:
If the site is not available, the following message will display:
“We apologize but the site is currently unavailable.” The following error message will display when at least one User Group has not been selected when the user clicks the Save button:
“At least one User Group must be selected.”
