Solutions Mechanism Guide Port UI Prototype Part 2

 

Project Overview

NASA need to develop a software version of the Solution Mechanism Guide so that users can navigate a search form to a filtered subset of solution mechanisms that are a best fit for their specific needs based on the criteria they input (experience similar to finding a car rental or airline ticket online but more fun and NASA-y).

Competition Task Overview

The goal of this challenge is to complete the remaining screens and fix existing issues of the NASA SMG Prototype as outlined below.

Key Requirements

• Test in all the required browsers.
• Replicate the design of the approved Storyboards (PSD Files) for all pages.
• Your pages must match the colors and structure of the provided storyboards.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• Ensure you submission clear of HTML and CSS Validation error and warning.

Detailed Requirements

General Notes

• Hover should be implemented in all pages by following this page 02_2_Home_hover.png
• Error styling should follow styling in 12_9_Admin_Manage-Help-help-topic-added-error-overlay.png
• Loading indicator should match 03_2_Identify-Solution_Grid_loader.mov (the current prototype does not have this implemented properly, so you need to fix it)
• There are two types of header - one for regular user and one for admin.
• You must simulate the ajax calls, you can add set interval function or use mock data with server to serve the data.

Pre Login Page

• Screenshot : 01_Pre-Login.png
• File name : prelogin.html
• Everything should be editable.
• Images should be optimized for web.
• Implement hover style on button.

Help Topics Listing Page

• Screenshot : 06_1_Help-Topics.png, 06_1_Help-Topics_loader.png
• File name : help_topics_listing.html
• Hover style should be implemented for buttons.
• Clicking in the buttons should take the user to 06_2_Help-Topics_Details.png
• Loader should be properly implemented

Help Topics - Details Page

• Screenshot : 06_2_Help-Topics_Details.png, 06_2_Help-Topics_Details_loader.png
• File Name : help_topics_details.html
• Clicking on back button should take user to Help Topics listing page
• Clicking on an example in example widget should take user to example details page
• Clicking 'learn more' button in Related Topics widget should take user to the same details page as this one.

Examples Listing Page

• Screenshot : 07_1_1Examples.png
• File name : examples_listing.html
• Hover style should be implemented for buttons.
• Clicking in the buttons should take the user to 7_2_1_Examples_details.png
• Loading indicator should be implemented when opening the page. Also when user change selection in pick list, the lading indicator should be running to indicate the data are being updated.

Example Details Page

• Screenshot : 7_2_1_Examples_details.png
• File Name : example_details.html
• Clicking on back button should take user to Examples listing page
• Clicking on an example in example widget should take user to example details page

Admin - Manage Help Topics

• Screenshot : 12_1_Admin_Manage-Help_blank.png, 12_2_Admin_Manage-Help.png, 12_3_Admin_Manage-Help-help-topic.png, 12_4_Admin_Manage-Help-help-topic-added.png, 12_5_Admin_Manage-Help-help-topic-added-overlay.png, 12_6_Admin_Manage-Help-help-topic-edited.png, 12_7_Admin_Manage-Help-help-topic-edited-overlay.png, 12_8_Admin_Manage-Help-help-topic-edited-error-overlay.png, 12_9_Admin_Manage-Help-help-topic-added-error-overlay.png
• File name : admin_manage_help_topics.html
• 12_1_Admin_Manage-Help_blank.png and 12_2_Admin_Manage-Help.png :
  • Windows info modal should pop up when hover over question mark
  • The browse should open default browse file dialog (mainly for images), it should show loader indicator while loading the image (simulate that)
  • The editor is CKEditor
• 12_3_Admin_Manage-Help-help-topic.png
  • When open the tab is should play the loader
  • Buttons should only be edit and delete
  • Clicking delete should show confirming windows modal
  • Clicking Add/Edit will take user to 12_4_Admin_Manage-Help-help-topic-added.png/12_6_Admin_Manage-Help-help-topic-edited.png
  • On successful adding of Help Topic it should show the overlay 12_5_Admin_Manage-Help-help-topic-added-overlay.png
  • The editor is CkEditor in 12_6_Admin_Manage-Help-help-topic-edited.png
  • Browsing image should open default browser upload dialog, loader indicator should be displayed while loading image
  • Clicking "preview" in 12_4_Admin_Manage-Help-help-topic-added.png should show the page as in this page 12_6_Admin_Manage-Help-help-topic-edited.png
  • Error styling and hover style should be properly implemented.

Print Frindaly Pages (OUT OF SCOPE)

All Print Friendly pages should be implemented.

Issues in Existing UI Prototype

Provided in the forums a text file of the existing (minor) issues existing in the provided UI Prototype, you must fix them all in this challenge.

Specific HTML/CSS/JavaScript Requirements

• HTML5 is not allowed. MUST use HTML4.
• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the browser requirements section in both Mac and PC environments.

JavaScript Libraries/Plugins

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

• You are allowed to use the JQuery JavaScript library for this contest.

Browser Requirements

• IE8+
• FireFox Latest
• Safari  Latest
• Chrome Latest

Documentation Provided

Storyboard and UI prototype are provided in the challenge forums.

Final Submission Guidelines

Submission Deliverables

• A fully functional UI prototype with all pages outlined below, and must matches the provided storyboard.
• You must include Deployment Guide.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.