Challenge Overview
Welcome to the Firefly Subpoena UI Prototype Challenge. In this challenge, we are looking for your help to create a desktop tool for an application for the Documents and Subpoena teams at an insurance company.
Firefly is an insurance company and currently they are utilizing 2 separate systems for processing Subpoenas. The Documents Team has one system and the Subpoena Team has another. A Subpoena is a legal document from the court stating that some particular documentation is required for a legal case. The Documents team receives the request and enters the necessary data into the system. They then create an assignment for the Subpoena team. The Subpoena team then goes in and sees that some of the fields have been filled out by the Documents team. They can see what the request is, for example, a person’s medical records might be needed by a certain due date. The problem is that once the Documents Team sends the request over to the Subpoena Team, they have limited visibility. They can see the documentation and information that they entered, but they can’t see who it’s been assigned to or what the status is. We would like to create 1 cohesive system.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Requirements:
The scope of this challenge is to take the UI designs we did for Subpoena App and create a frontend prototype.
Overall:
1) Dashboard (01a Dashboard.png)
This is the landing page after someone from the Documents Team logs into the app.
2) Accounts (02a Accounts.png)
This screen will be accessible only by Admin users. This is a general permissions screen, and is geared towards setting the permissions within the application. They should be able to change permissions and Enable/Disable/Remove an account.
3) Hierarchy (03a Hierarchy.png)
The admin would be able to assign users to a manager thereby creating a hierarchical structure.
4.1) New Entry (04a New Entry.png)
This is the page where new Subpoena records area created. Someone from the documents team first does a Search, if no record exists, they create a brand new one. If the record already exists, they can update and edit it as needed.
4.2) NDC (04d NDC - Last 25 Records.png)
5) Records (05a All Records.png)
This is a dedicated search page to allow someone from the Subpoena team to run a search. This is like 4.2 NDC page to some changes:
6) Records Details (06 Record Details.png)
After clicking on a record in the Subpoena Search, the person from the Subpoena team is taken here. This page shows a detailed view of a single Subpoena claim.
7) Invoice (07a Invoice List.png)
The Subpoena team needs to bill for the creation of the Subpoena Documentation.
8) Audit Trail (08 Audit Trail.png)
This screen is a log of all events. It should capture and display all changes to the entries. Shows a history of changes.
9) Assignments (09a Assignment List.png)
This page is where extra Subpoena assignments which haven’t been assigned end up, and need to be manually assigned by a manager.
10) Fee Table Matrix (10 Fee Table Matrix.png)
This page is a reference table for people on the Subpoena Team that shows the breakdown of fees charged for different types of subpoenas documentations.
11) Analytics (11 Analytics.png)
This page show analytics chart/graph to All Subpoena Records
Assets/Design
Important:
Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5:
CSS3
Javascript
Images
Web Browsers Requirements
Final Submission:
Firefly is an insurance company and currently they are utilizing 2 separate systems for processing Subpoenas. The Documents Team has one system and the Subpoena Team has another. A Subpoena is a legal document from the court stating that some particular documentation is required for a legal case. The Documents team receives the request and enters the necessary data into the system. They then create an assignment for the Subpoena team. The Subpoena team then goes in and sees that some of the fields have been filled out by the Documents team. They can see what the request is, for example, a person’s medical records might be needed by a certain due date. The problem is that once the Documents Team sends the request over to the Subpoena Team, they have limited visibility. They can see the documentation and information that they entered, but they can’t see who it’s been assigned to or what the status is. We would like to create 1 cohesive system.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Requirements:
The scope of this challenge is to take the UI designs we did for Subpoena App and create a frontend prototype.
Overall:
- All data need be loaded via JSON file
- If click in Firefly logo go to Dashboard page
- Add hover status to all links and buttons
- Username on top is deadlink
- Sign out on top is deadlink
1) Dashboard (01a Dashboard.png)
This is the landing page after someone from the Documents Team logs into the app.
- Charts need be implemented in functional, so if we change the JSON data or change range dropdown (Today, This Week, This Month, etc) will load the chart proper.
- If click in New Entry go to 4) New Entry
- If click in Manage Columns will open the side panel in right side (01e Dashboard - Manage Columns.png)
- Drag&Drop NOT need be implemented
- Able to disable/enable the column fields
- If click in Close or Cancel button will close the panel and discard the changes
- If click in the Apply button will apply the change to table
- If click on the Search button will expand the search area (01d Dashboard - Search.png):
- Search button will do the search and update the table data
- If click in Clear Search button will cleanup any filled field
- Click on Close button will discard changes and hide the search area
- Table:
- Sort need be implemented
- Pagination need be implemented
- If click in Status Comments icon will open the comments popup (01c Dashboard - Display Comments.png). If click in Close button or out from popup will close the popup.
- If click in any Record ID go to 6) Record Details
2) Accounts (02a Accounts.png)
This screen will be accessible only by Admin users. This is a general permissions screen, and is geared towards setting the permissions within the application. They should be able to change permissions and Enable/Disable/Remove an account.
- Users list:
- Show total of users in left side
- Need able to search by ID and Name
- If click in New Account button will open a clean form in right side (02d Accounts - Create New.png)
- Click on Save will add user to the list
- Click on Cancel will discard the changes and close the form
- If click in any row will load the User Account Details in right side
- Need implement the sort function
- Account Details
- All fields need be editable
- Can add/remove Associated Profiles (when click in Add button will load the Profiles modal 02b Accounts - Select Profile.png)
- Need be able to search profiles by Name
- If click on Cancel or in Close button will discard the changes and close the modal
- If click Add Selected will add profiles in Associated list
- Manage Profiles is deadlink for now
- Need to be able to add/remove Assignment Rules
3) Hierarchy (03a Hierarchy.png)
The admin would be able to assign users to a manager thereby creating a hierarchical structure.
- Team list
- Total of team in left side
- Need able to search by Manager Name
- Sort need be implemented
- If click in any row (Manage Name) will open the Team Hierarchy in right side
- If click in New Team will open Create New Team in right side (03b Hierarchy - Create New.png):
- Need select a Manager in dropdown
- Add members to Team
- Need able to search by members
- Click on Save will add Team to Manage list (in left side)
- Click on Cancel button will discard the changes and close the Create New Team panel
- Team Hierarchy
- Need able to change the Manager
- Need able to add/remove members from Team
- Click on Save button will save the changes
- Click on Cancel will discard the changes
4.1) New Entry (04a New Entry.png)
This is the page where new Subpoena records area created. Someone from the documents team first does a Search, if no record exists, they create a brand new one. If the record already exists, they can update and edit it as needed.
- Record ID is read-only
- If click in calendar icon will open date picker (we haven’t a design to this, so use close layout as possible)
- Need to be able to select a file via browser button
- After selecting a file, the file will show below in Uploaded Document (just simulate this)
- Drag&Drop file NOT need be implemented
- Clear button - Will open a popup to confirm the action (04b New Entry - Clear.png)
- Exit button - Will open a popup to confirm the action (04b New Entry - Exit.png)
- Click in Save button will back to NDC page
- Click in Last 24 records will back to NDC page
4.2) NDC (04d NDC - Last 25 Records.png)
- If click in New Record go to 4.1) New Entry page
- If click in Manage Column will open side panel to add/remove/arrange the column (04g NDC - Manage Columns.png)
- Print is deadlink
- Export is deadlink
- Search
- User able to search by any field
- If click in More search criteria will expand the search area and show more fields (04e NDC - Search (All Criteria).png)
- Click in search will update the Last 25 records accessed table
- Clear Search will cleanup all filled fields
- Table
- If click in + button will expand the row and show the record details (04f NDC - Row Expanded.png)
- Click in Close or in - button will collapse the details
- Sort need be implemented
- Pagination need be implemented
- If click on Record ID number go to Records Details page 6) Record Details
5) Records (05a All Records.png)
This is a dedicated search page to allow someone from the Subpoena team to run a search. This is like 4.2 NDC page to some changes:
- Will show all records
- Title is All Records
- No New Record button on top
6) Records Details (06 Record Details.png)
After clicking on a record in the Subpoena Search, the person from the Subpoena team is taken here. This page shows a detailed view of a single Subpoena claim.
- Need to be able to update and edit any of the details in this view (ready only field is just in blue area)
- The functionality is same like 4.1) New Entry
- Return to All Records will be dynamic and back to origin page:
- Return to All Records
- Return to Last 25 records
- Etc.
- Click in Invoices Sent go to Invoice Details Page (07d Invoice Details.png)
7) Invoice (07a Invoice List.png)
The Subpoena team needs to bill for the creation of the Subpoena Documentation.
- Receive Payment button will the Receive modal (07e Invoice - Payment.png)
- Click on Cancel, Save, Close or out from modal will close the modal
- Click in New Invoice go to New Invoice page (07c Create New Invoice.png)
- Click in Action button will show View Invoice, Void Invoice and Print Invoice
- View Invoice - Go to View Invoice placeholder page (07d Invoice Details.png)
- Void Invoice - Will show popup with confirmation (07f Invoice - Void.png)
- Print Invoice - Go to Print Preview page (07c Create New Invoice.png)
- If click in Invoice Number go to Invoice Details page (07d Invoice Details.png)
8) Audit Trail (08 Audit Trail.png)
This screen is a log of all events. It should capture and display all changes to the entries. Shows a history of changes.
- Sort need be implemented
- Pagination need be implemented
9) Assignments (09a Assignment List.png)
This page is where extra Subpoena assignments which haven’t been assigned end up, and need to be manually assigned by a manager.
- Click in Search button show the search area (similar with other pages) 09b Assignment List - Search.png
- Assign Selected Records(s) - Need button need be disabled if any record is selected.
- When click in Assign Selected Record(s) will show modal with Assignment options (09c Assignment - Assign.png)
- Need able to search by Member Name
- If select a member will be able to click in Assign Member button
10) Fee Table Matrix (10 Fee Table Matrix.png)
This page is a reference table for people on the Subpoena Team that shows the breakdown of fees charged for different types of subpoenas documentations.
- Sort need be implemented
- If click in Edit button the row change to edit mode
- Need able to edit all values
- When click in Done will save changes and back to readonly view
- Need able to horizontal scroll to see more columns
- First column State and last column Edit need be fixed.
- Print is deadlink
- Export is deadlink
11) Analytics (11 Analytics.png)
This page show analytics chart/graph to All Subpoena Records
- All chart/graph need be implemented
- Date range dropdown need be implemented
- This week
- This month
- All time
- Print is deadlink
- Export is deadlink
Assets/Design
- Please check forum.
Important:
- You can use latest Angular
- To charts, you need to use D3.js
- Focus on Desktop screen size only.
- Components must re-usable. The component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page. So DON’T just copy&paste code block, always reuse and change just what is needed)
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding Guidelines
- Put clear comment/documentation for all components
- Create README.txt file that explains how to deploy your submission, structure, and commands
- Create clear documentation to set up your submission locally
Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5:
- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed on the scorecard.
CSS3
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when creating all styling.
- 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.
Javascript
- We are recommends combination of Angular and Bootstrap for this challenge. Make sure to follow the best practices for the technology
- All JavaScript used must not have any copyrights to any 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.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial
- Source Code
- README file, contains how to deploy the submission and server environment
Final Submission:
- For each member, the final submission should be uploaded to Online Review Tool