NASA PAM - Responsive Web Application Design Challenge

Welcome to NASA PAM - Responsive Web Application Design Challenge. In this challenge, we are looking for your help to design the NASA PAM application that will help with the development, review, concurrence, and approval of NASA’s various agency agreements, including Space Act Agreements, Inter­Agency Agreements, and Cooperative Research and Development Agreements for NASA.

We recently completed the wireframes for this application, this should help you get started with your designs!

Really excited to see your submissions for this challenge!

Round 1

Submit your initial design for a checkpoint feedback
01 Home
02 Browse All Routing Packages
03 Create New Routing Package
04 Routing Package Details
05 Routing Templates

IMPORTANT
- You MUST upload your submission to InvisionApp so we can provide direct feedback on your designs.
- If you already have access to Topcoder InvisionApp account, then please feel free to create prototypes as required, If not please request an invite to the Topcoder InvisionApp account from the Copilot through challenge forums!

But please feel free to provide any additional screens necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client

Round 2

Your Final designs for all required use cases, with all Checkpoint Feedback, applied.
00 Navigation
01 Home
02 Browse All Routing Packages
03 Create New Routing Package
04 Routing Package Details
05 Routing Templates
06 Create New Routing Template
07 My Reviews
08 Review Details

IMPORTANT
- You MUST upload your submission to InvisionApp so we can provide direct feedback on your designs.
- If you already have access to Topcoder InvisionApp account, then please feel free to create prototypes as required, If not please request an invite to the Topcoder InvisionApp account from the Copilot through challenge forums!
- You can reuse the Invision prototype that you shared for the checkpoint

Please feel free to provide any additional screens necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client

The purpose of this challenge is to come up with designs based on the provided wireframes and improve the user experience of the overall application.

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, Inter­Agency 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.

Solution:
This challenge will help in designing a new, fresh, user ­friendly, and mobile friendly/responsive web

Design Considerations:
- For this challenge we are focused on the Desktop experience: 1366 x 768px
- We are providing wireframes to help you get started with the designs
- Do not just color the wireframes (if you do all your designs will look the same) - please make sure to follow the contents from the provided wireframes and look to improve the overall User experience.
- Please look to include the attached logo in your designs!
- Colors / fonts are open to designers - looking forward to your suggestions!

Required Screens:
We need below screens to be designed...

00 Navigation:
- Think on how the navigation need to be put up.
- This could show Home, Routing Packages, Routing Templates and My Reviews.

01 Home
Reference: Home
This page need to show the below information:
- Routing Packages for My Review (these are packages that are waiting for logged in user’s review)
- My Packages: This shows the list of packages that were created..should provide a way to filter it based on the status (Creating, In Routing, Completed) and also by the Groups
- User should be able to browse all routing packages under each group based on their status.
- Allow a user to create a new routing package
- User should be able to view the notifications.

02 Browse All Routing Packages:
Reference: Routing Packages
- This shows the list of routing packages and it’s organized by their status (draft, in progress and completed).
- Allow the user to search and filter through the list of the routing packages / please look in the wireframes for possible filter options and look to design them appropriately.
- Provide option to create a new routing package.
- Allow user to show only packages that are administered by them, think on how they will be used?

03 Create New Routing Package:
Reference: Create New Routing Package
- Below are the steps as designed in the provided wireframe / please make sure to capture design for all the contents and interactions

Step 1: Add package Details
- Routing Package Title
- Choose the group
- Comments: Allow rich textbox inputs and formatting (e.g., bold, underline, italics, indent, bullets, highlighting, and colored font).

Step 2: Add Reviewers
- Clicking on “Add Reviewers” button , user will be able to look up for reviewers by entering their last name and also the center.
- We show a list of reviewers that matches and they will be able to select one of the reviewer and select necessary actions
- Once all the reviewers has been added, we will have option to change routing sequence i.e. whether all reviewers should review the package in parallel (concurrently) or serial (one after the other) - wireframes shows this as a option button for “P and S"
- It will be good if you come up with some ideas on how this page can be improved in UI / UX.
- By default, adding reviewers one by one will be in serial routing...to change it to parallel i.e. if user decides, couple of reviewers need to do the review at the same time, then both reviewers will need to have the same sequence number, so we need a way to change the “Serial” to “Parallel” or vice versa - please see wireframes to understand this better.
- There should be an option to add an alternate reviewer for a specific reviewer, so if the assigned reviewer is not available, then alternate reviewer will be able to perform review and approve it.
- User will be able to add a new reviewer who can receive a courtesy copy (CC) under a specific reviewer.
- User will be able to delete a reviewer!

Step 3: Adding Files
- User will be able to add the file to the routing package and will be able to add a description to it.
- Come up new modern techniques for adding files (drag and drop, etc!)
- Should be able to add a revision or delete the files that were added.
- Show us how the revised file that were added need to shown? (list of revisions)

Step 4: Distribution Options:
- They should be able to add a reviewer for distribution of files
- Click on “Edit” to see the interaction and information to be captured.
- Should be able to delete the reviewer and send a manual distribution if needed.

Saving/Submitting a Routing Package:
- Users can decide whether to submit the Routing package now or later (by saving as a draft)
- If the user decides to submit it then it will start the routing of this package and an email is sent to the list of reviewers with the Routing sequence number as “1” (one).

04 Routing Package Details:
Reference: Package Details (with Agreement record)-In Concurrence
- This has the basic package details as shown in the wireframes / provide options to edit these basic package details.
- Will need to show the below (these are the same options that a user’s fills out when they create a new routing package - please see “Create New Routing Package for more details on this)
- - - Reviewers and files
- - - Distribution options
- - - History (This is a kind of log, shows all activities within this routing package).
- Provide options to edit the routing package.

05 Routing Templates:
Reference: Routing Templates
- This shows the list routing templates..
- Routing Template is nothing but a group of reviewers already organized.
- Allow the user to filter through the routing templates (please see filter options in wireframes).
- Provide options to remove routing templates
- Allow the user to create new routing package
- Clicking on a routing template will show the details of it as shown in “Template Details” page in wireframe.

06 Create New Routing Template:
Reference: Create Routing Template
- This is similar to how a user add reviewers to “Routing Package”..
- User will be able to save the list of reviewers under a routing template name, so they can be inserted into a routing package while adding reviewers.
- Should allow the routing template to be added as a draft!

07 My Reviews:
Reference: My Reviews
- This shows the list of reviews that are pending to be reviewed by the logged in user.
- User will click on “review now” to start review the files that were a part of the routing package
- They will also be able to click on the routing package name to view more details about it (this details page will be similar to the “04 Routing Package Details”).

08 Review Details Page:
Reference: Perform Review - Stand alone RP
- Follow the details from the wireframe..this allows user to know the list of reviewers who will be performing review of the routing package
- Reviewer should be able to comment and click on “I do Not Concur/approve” or “I concur/approve”...how should these be shown?
- On clicking above buttons, user will see a modal window asking for confirmation...think on how to show this view.

Reference: Perform Review - RP for HQ Partnershp Office Review
- This is same as above but just that the options on how a user will approve is different, please show on how this need to be done!

Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Focus User Experience! Focus on the navigation experience. Keeping consistent visual elements.

Target Audience:
- Users at NASA Partnership Office

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File:
Submit JPG/PNG for your submission files.
Submit/Share an Invision link as part of your submission.

Source Files:
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file!

Final Fixes:
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.