Challenge Overview
Welcome to NASA PAM - Responsive Web Application UI Prototype Challenge. In this challenge, we are looking for your help build the frontend for NASA PAM application that will help with the development, review, concurrence, and approval of NASA’s various agency agreements, including Space Act Agreements, InterAgency Agreements, and Cooperative Research and Development Agreements for NASA.
We recently completed the design challenge for this application and we now want to convert them into a UI prototype.
The Problem:
The NASA Partnership Office manages an enterprise agency run routing concurrence system that is in need of an updated user experience. The system is for the development, review, concurrence, and approval of NASA’s various agency agreements, including Space Act Agreements, InterAgency Agreements, and Cooperative Research and Development Agreements. The current interface is mainly text based and form driven, and is outdated and requires multiple steps for users to navigate. Since the interface is mainly form driven, there is a need to provide drag and drop capabilities and rich text box editing to allow for better navigation for the user.
Target Audience:
- Users at the NASA Partnership Office
Notes:
- The objective of this challenge is to produce front end that should be easily integrated within view component of Microsoft’s Model-View-Controller (MVC) framework. The presentation technologies that can/should be used are (Razor view engine, HTML 5, Bootstrap, CSS 3, JQuery UI)
- Desktop Size: 1366 x 768px
- Should be resizeable to function on a tablet (iPad, other), so please consider responsiveness while designing your solution.
Supporting Documents:
- Winning Designs for app
KEY CONSIDERATIONS
- The prototype must be responsive and built using technologies mentioned above
- 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.
- 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.
- Your HTML code must be valid HTML5 and follow best practices
- 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.
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.
Browser Requirements
Desktop (latest versions)
- Chrome
- Safari
- Firefox
- IE11
Screen-wise Requirements
There are some screens which are duplicates (e.g. packages originating from GSFC). For such screens, please keep a flag in a config file e.g. gsfc to control whether to show this screen or not.
01 Home
* This is the default landing screen
01_01 Home
* This shows filtering based on Status and Group dropdowns
02 Routing Packages
* Clicking ‘Browse All Routing Packages’ on previous screen brings the user here
* Shows ‘Draft’ routing packages
* Table should allow sorting based on the shown columns
* Pagination must be supported as shown
02_01 Routing Packages
* Shows the Filter operations
* Reset should clear all filters
02_02 Routing Packages
* Shows option to switch filter between Partner Name & Agreement No.
02_03 Routing Packages
* Shows ‘In Routing’ packages
02_04 Routing Packages
* Shows available actions for ‘In Routing’ packages
02_04_01 Routing Packages
* Shows available actions for ‘In Routing’ packages
* Shows one package as ‘On Hold’
03 Create New Routing Package
* Use an open-source library (GPL/MIT/ Apache) for HTML text editor for Comments
03_01 Create New Routing Package
* Breadcrumb highlighting should change as shown
03_01_01 Create New Routing Package
* Same as 03_01 except shows the message for packages originating from GSFC
03_02 Create New Routing Package
* Add Reviewer modal
03_03 Create New Routing Package
* Clicking ‘Directory Lookup’ shows the results
03_04 Create New Routing Package
* Clicking ‘Manual Entry’ shows this modal
03_05 Create New Routing Package
* Shows the page with reviewer data populated
03_06 Create New Routing Package
* Implement as shown
03_06_01 Create New Routing Package
* Same as 03_06_01 except shows the message for packages originating from GSFC
03_07 Create New Routing Package
* Same as 03_02 except shows the message for packages originating from GSFC
03_08 Create New Routing Package
* Same as 03_03 except shows the message for packages originating from GSFC
03_09 Create New Routing Package
* Same as 03_05 except shows the message for packages originating from GSFC
03_10 Create New Routing Package
* Same as 03_06 except shows the message for packages originating from GSFC
03_11 Create New Routing Package
* Same as 03_02, label is different
03_12 Create New Routing Package
* Same as 03_03, label is different
03_13 Create New Routing Package
* Same as 03_04, label is different
03_14 Create New Routing Package
* Same as 03_05, label is different
03_15 Create New Routing Package
* Add comments for reviewer
03_16 Create New Routing Package
* Clicking ‘Add Routing Template’ opens this modal
03_16_1 Create New Routing Package
* Allows user to choose template from various options
03_17 Create New Routing Package
* Allows user to specify template name & whether this is a Group Level Template
03_18 Create New Routing Package
* Should support drag and drop in the shown areas
* Clicking ‘x’ in Uploaded files should remove the file. Clicking ‘x’ on file must remove all versions while clicking ‘x’ on a specific version should remove only that version
03_19 Create New Routing Package
* This is the last step for Create New Routing Package
03_20 Create New Routing Package
* Clicking ‘Add Person to Distribution’ opens this modal
03_21 Create New Routing Package
* Clicking ‘Next’ on the previous screen brings the user to this screen where they can review and submit the routing package as shown
03_21_1 Create New Routing Package
* Same as 03_20 except shows the message for packages originating from GSFC
04 Routing Package Details
* Shows the Routing Package Details -> Reviewers & Files as shown
04_00 Routing Package Details
* Shows the Routing Package Details -> Reviewers & Files as shown
* Shows one item on hold
04_01 Routing Package Details
* Should allow drag & drop
* Clicking ‘x’ in Uploaded files should remove the file. Clicking ‘x’ on file must remove all versions while clicking ‘x’ on a specific version should remove only that version
04_02 Routing Package Details
* Shows the Routing Package Details -> Distribution Options as shown
04_03 Routing Package Details
* Clicking ‘Add Person to Distribution’ opens this modal
04_04 Routing Package Details
* Shows History
05 Routing Templates
* Shows the Routing Templates -> Group Templates list
06 Create New Routing Template
* Shows the info needed to create new routing template
06_1 Create New Routing Template
* Shows info with reviewer information added
07 Shows list of my reviews
* Shows info with reviewer information added
08 Review Details
* Shows the information available as part of review details
08_00 Review Details
* Same as 08 except shows one item as ‘On Hold’
08_01 Review Details
* Confirmation modal
08_02 Review Details
* Allows user to submit review
- After a user submits review for screens 08_02.
If an "ok to proceed" is selected the comment is recorded for the reviewer and the routing continues for reviews in the next routing sequence number. If the reviewer is the last routing sequence number then the routing moved to completed and the sender is notified of the completion.
If "Do Not proceed" is selected, the comment is recorded for the reviewer and there is logic to either add the original person in routing sequence 1 or a add a routing template to the end of the list of the reviewers. The logic is based on the NASA center.
If "Final Do Not Proceed" is selected the behavior is the same as the "ok to proceed" option. The reviewer is expected to input comments that support the selection of the "Final Do Not Proceed".
Final Submission Guidelines
- All pages of the UI prototype developed according to the provided design as described above- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip