Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to Firefly OSCUR UI Prototype Challenge. In this challenge, we are looking for your help to create a desktop tool for an application for the Onboarding and Offboarding users at an insurance company.

Firefly is an insurance company and would like to create an OnBoarding/OffBoarding system for it’s 10000 employees.  The OnBoarding/OffBoarding team deals with access.  They are responsible for maintaining User IDs, passwords, vendor system access, company cars, computers, mobile phones, desk phones, etc.  They want to improve on the current system they are using.

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 OSCUR 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

0) User Flows
  • Please create a simple Landing page with user type selection:
    • Claim Department Supervisor
    • CUR Team Member
    • CUR Manager
  • You able to see each separate flow in Marvelapp -> Menu -> View All Screens
  • Note: NOT needed create login page, is just a simple user selection screen.

1.1) Dashboard (Supervisor) (01a Dashboard (Claim Dept).png)
  • If click in hamburg menu will open side menu in left side (01f Dashboard - Menu (Claim Dept).png)
  • Chart on top need be implemented and functional, so if we change the JSON data or change range in dropdown (Today, This Week, This Month) will load the chart proper.
  • If click in New Work Request go to Work Request Form New
  • If click in Manage Columns button will open the side panel on the right side (01e Dashboard - Config (Claim Dept).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 Search button will expand the search area (01d Dashboard - Search (Claim Dept).png)
    • Search button will do the search and update the table data (function need be implemented)
    • If click in Clear Search button will cleanup any filled field
    • Please make validation to search fields. (If the input is invalid show red message below the field)
      • Request ID : Number only
      • Date Fields : Date format aaaa/mm/dd
      • Requestee Name : Number no allowed
      • Number of Users : Number only
    • Click on Close button button will discard changes and hide the search area
  • Print is deadlink
  • Export is deadlink
  • Table

1.2) Dashboard (Member) (08a Dashboard (CUR Member).png)
  • Able to see My Work Inventory and Team Work Inventory too.
  • Not able to create a new Work Request
  • Not a new column in table Hold File Date (make sure match all column)
  • When click in Request ID go to 8) Work Log

1.3) Dashboard (Manager)
  • To this user type will show Department Work Inventory
  • Functionally/Feature is same like other dashboard

2.1) Work Request Form New/Change (02a Work Request Form - New (Empty).png)
The Claims Department Supervisor or Manager submits a request to add a new user, or make changes to an existing user.  They can also go into this screen to see what they have submitted and the status of their request.  When checking the status, there is a comments screen they can look at where the CUR Team member notes what we're waiting on to complete
2.2) Work Request Form Termination (04a Work Request Form - Terminate (Empty).png)     
3) Users (05a User - List.png)
  • Go to here via menu Users
  • Print and Export are deadlink
  • Click in Search will show the search area (05b User - Search.png)
  • Sort need be implemented
  • Need able to select one, multiple or all users
  • If one or more Users area select and click in Create Work Request for Selected User(s) go to Work Form Request New with selected users pre filled in form (03c Work Request Form - Change (User List).png)
  • If click in Employee Name go to 4) User Profile page
  • If click in Office Code go to 5) Offices page

4.1) User Profile (05c User - Profile.png)
  • Return will back to previous page
  • Create Work Request go to Work Request Form New with this user selected
  • Search Panel:
    • Need able to search Profiles, results will show in 3) Users page
  • Able to navigate between all tabs: Profile, Access, Equipment, Licensing, Experience and Contact Info

4.2) User Profile (Member)
5) Offices (06a Office - List.png)
6.1) Reports (07a Reports (Claim Dept).png)
  • Able to select multiple filters to generate a report
  • Generate Report is deadlink

6.2) Reports (16b Reports - CUR Performance (CUR Manager).png)
  • Managers have an additional report tab

7) Overflow Queue (09a Overflow Queue - List.png)
When a request is made, it goes to this screen. CUR team members generally work on multiple assignments a day. This screen is where unassigned requests end up when each member on the CUR team has reached their maximum number of assignments.
  • Chart on top need be implemented
  • Need able to select one, multiple or all requests
  • If one or more request are selected, then can click in Assign Selected Request(s), its will open a popup window (09d Overflow Queue - Assign 1.png):
    • User can choose between assign to him or to other CUR team member
    • If select to assign to other CUR team member will load member selection with search function (09e Overflow Queue - Assign 2.png)
    • When click in Assign will close the modal and remove Assigned items from Overflow Queue
  • If click in Request ID go to 8) Work Log

8) Work Log (10a Work Log - Request Details.png)
In this page employees actually work out of - noting statuses, when things are completed, audit log
9) Administration - Assignments (14a Admin - Assignments List.png)
This is where the admin management can set up rules for members on the CUR team.  The rules aid in how work is divided up amongst team members.
  • Chart on top need be implemented
  • Need able to search when click in Search button (14b Admin - Assignments Search.png)
  • If click on Edit in the Action column, the whole row go to edit mode (14c Admin - Assignments Edit.png)
    • If click in Status Schedule will open the modal window (14d Admin - Assignments Edit (Schedule).png)
      • Need able to add/remove Status Schedule
      • If click in Cancel button will discard the changes and close the modal
      • If click in Save will close the modal
    • If click in Cancel will discard the changes and back to read only mode
    • If click in Save button will save the changes and back to read only mode

10) Administration - WorK Form (15a Admin - Work Form.png)
This is where the admin management can set up the questions to be asked and the related tasks to be created
  • Section List
    • New Section is deadlink for now
    • Able to search by Section name
    • If click in any Section name in left side will open the details in right side
  • Details
    • If click in Cancel button will discard any changes made
    • If click in Save button will save the changes
    • Fields
      • Can edit, remove or add more fields
      • Need set Field name and field type
      • If field type is a multiple choice field will show the Options box bellow
  • Fold Out Questions
    • Can edit, remove or add new Fold Out Question
    • Add question in Q: field
    • Select Answer type
      • If was Dropdown, Radio or Checkpoint, will show Options box bellow
    • If check Create Child Question will show child question below
      • Able to add question based in conditional questions
      • Please add some simulation, like we have in Design

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:

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30111607