The purpose of this challenge is to come up with wireframes to plan / rethink the existing flow, user experience for a web application.
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.
This challenge will help in designing a new, fresh, user friendly, and mobile friendly/responsive web design for the GUI of PAM (Partnership Agreement Maker).
- Please pay attention to the GUI requirements mentioned below, they are looking for your help to enhance their existing application, improve the user experience based on these and you are not limited to these, feel free to suggest your ideas
- Please have your wireframe screens of size 1024 / 1280 px width and height as required.
- Please keep in mind that ultimately we will be building a responsive web application.
We have attached the pptx (as well as have a copy of it in below link) of the existing screens for reference - please do not copy as we are looking your help to change the flow, user experience!
1. Provide the GUI controls to query NASA personnel database by search criteria such as First name, Last name, and center; and populate routing entries based on search results,
2. Allow the user to create individual and shared routing templates.
3. Allow rich textbox inputs and formatting (e.g., bold, underline, italics, indent, bullets, highlighting, and colored font)
4. Provide drag and drop file uploading
5. Provide control of a standard workflow capability allowing parallel and serial workflow setups, which include the ability to:
a. capture multiple comment sections and resolution dialogue between workflow owners and reviewers,
b. allow select reviewers the ability to revise or add new documents to workflow,
c. add alternate workflow reviewers and courtesy copy reviews,
d. allow emailing of system generated links to notify reviewers when their review is needed,
e. allow users to lookup records directly in the system,
f. log and date stamp reviews and comments,
g. provide read only access for users allowing them to view workflows without altering them,
h. create templates of reviewers on a workflow that can be used for future workflows,
i. allow saving of a workflow to a pdf file when completed.
We need below screens to be captured but in the process of improving the user experience if it requires more screens, feel free to add them to the wireframes.
- User will login into the app using single sign on
- Don’t focus much on this, this is just for wireframe purpose.
- Provide a navigation to browse all routing packages, create new routing package
- We are looking for your thoughts on what can be shown in homepage, please take a look at the screens below and come up with ideas on what to be shown!
- Will it be useful to show the notifications here (messages / comments that were received from reviewers?) anything the user need to act upon!
03 Navigation Screen into list of Routing Packages:
Reference: Page 27 in Attachment 3 - Routing Package Manual.pptx
- Provide a navigation to view the multiple groups a user may have access to browse all routing packages, create new routing package
04 Browse All Routing Packages:
- Provide a way for the search through the list of all routing packages
- Users should be able to view all packages in routing, all that were created, all completed, etc
- Do you think providing a way to filter through the results will help in improving user experience?
- View a list of routing packages, would it be good to show a notification per routing package? Looking for your thoughts.
- Once Routing has started, we need to display its status / completion?
05 Create New Routing Package:
Reference: Page 4 in Attachment 3 - Routing Package Manual.pptx
- You can see the existing app screen and we need below details to be captured:
- - - Routing Package Title
- - - Choose the group
- - - Comments - Allow rich textbox inputs and formatting (e.g., bold, underline, italics, indent, bullets, highlighting, and colored font).
- - - Add Reviewers (please see below)
- - - Add Files (please see below)
Add Reviewers (refer page 6 in Attachment 3 - Routing Package Manual.pptx)
- User will be able to look up for reviewers by entering their last name and also the center.
- User will be able to view the reviewer details from the results, after which they will be added as a reviewer.
- 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 or serial (one after the other).
- 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...current method of changing this looks complex (please see page 12 in pptx) - if you have better ideas on how this can be done, feel free to suggest!
- User will be able to delete a reviewer!
- 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 have option to delete the for the alternate reviewer. Also there should be an option on whether the alternate reviewer will receive automatic email notification when the specific reviewer is notified for review or if a manual notification is needed by the user when appropriate (see page 23 in pptx)
- 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 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)
Saving/Submitting a Routing Package:
- Users can decide whether to submit the Routing package now or later, think on how to improve this?
- 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).
06 Monitor/Change Routing Package while in Concurrence:
Reference: Page 16 in Attachment 3 - Routing Package Manual.pptx
- User will be able to monitor routing package while in concurrence and have similar options as when the routing package is being created for inserting new reviewers/alternates/courtesy copy reviewers.
- User will be able to add responses to comments from reviewers (Page 19 in Attachment 3 - Routing Package Manual.pptx)
-User will be able to manage files just listed for packages in the review state.
07 Creating/Editing Routing Templates:
Pages 31-35 in Attachment 3 - Routing Package Manual.pptx
- User will be able create/edit/remove routing templates they created and if they have elevated rights to the group they can create/edit/remove routing templates for the whole group.
08 Routing Distribution Options:
Reference: Page 28-30 in Attachment 3 - Routing Package Manual.pptx
- User will be able to setup and manage distribution messages and links to reviewers on the routing.
09 Routing Package Reviewer Screen:
Reference: Page 15 in Attachment 3 - Routing Package Manual.pptx
- When appropriate reviewers/alternates/courtesy copy reviewers will be notified for action within the review. There may be specific questions or files based on the type of routing
package and what the review is for.
- While the reviewers are reviewing the screen should will be similar to the screens for creating and monitor routing packages with limited options for reviewing files, entering comments and concurring (agree).
- The screen should also list all the reviewers showing their comments and review date stamps.
- They should not have any options to alter the workflow. If indicated when adding the reviewer, they may have an option to add revisions to the routing package from the review screen.
NOTE: You are welcome to add additional screens or combine some of these screens if you feel it will improve the user experience. We are open to your creative ideas around how to plan this platform.
- Users at NASA Partnership Office
New to Axure? Here are some quick tutorials to help you get started.
- User Experience of the application/portal
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent user flow
Submission & Source Files
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.
Wireframes should be built in HTML or Axure
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
As part of the final fixes phase you may be asked to modify content or user click paths.