FNOL - Insurance Claim Damage Report UI Prototype Challenge

Welcome to FNOL - Insurance Claim UI Prototype Challenge. For this prototype challenge, we don’t have the storyboards - we are looking for you to use attached wireframes as a guidance for screens, we are not focussing much on the design part and are looking for just the functionality/screens as given in the wireframes/spec, looking to build this prototype using angular JS and bootstrap.

Please go through the details given below and let us know on any questions.

Final Submission Guidelines

Challenge Details:
Please refer the contents required in the wireframe as well as pay attention to the details given for each of the screens in the spec. In the attached wireframes document you will find 7 screens. Screen navigation is via the Next and Previous buttons. The screens are in the order they should be displayed.

This prototype assumes the user selects an insurance type of Motor Vehicle on screen 2. In subsequent challenges we will build out the changes to screens if other insurance types are selected.

About the Application Flow:
When a customer starts the process of reporting a loss to their insurance company the process is known as “First Notice of Loss” (FNOL). This can be an emotional time for a customer, so their interaction with the insurance company can have a huge impact upon their feelings for that company and the likelihood that they will renew their policy. Therefore that interaction has to be as simple as possible and this is where you come in.

Our customer is a major global insurance company who have developed a robust FNOL back-end process that they will expose through a REST interface. We’d like you to develop a prototype front-end using Bootstrap and AngularJS using the supplied wireframes as a guide. Because our customer supplies IT components to their local business units around the world the design of the prototype is not as important as the functionality. They also need this prototype to have a responsive design that works well on screens from desktop to smartphone.

Final Submission Guidelines:
- Main purpose of this prototype is to make use of bootstrap and angular JS 
- We are looking for your thoughts on where and how the angular JS need to used.
- As you are using bootstrap, we would like you to just make sure the fields get adjusted to mobile screens - not looking for any specific arrangement of fields
- Feel free to use any web-safe fonts, it is not of concern in this prototype
- Use a simple header and footer as shown in the wireframe

Required Screens:
We need below screens in the prototype..

0) General:
- We are looking for you to include validation for the fields based on the details given below for each of the fields.
- Fields marked with “*” are required and we need to make sure a user fills out before then move to next step, please include this as a part of validation.
- Follow the layout and order of fields as given in the wireframes

1) Damage Report Screens:
- In the first screen, we request the below “Date of incident and policy number”
- Click on “Next” to see a error message, you can look to include error message with that style, please have a look at the error messages 
- Please make sure include the validation as given below..

Fields and validation:

• Damage date:

  • Format dd.mm.yyyy

  • Validation - date cannot be in the future.

  • Error message: “The damage date should not be in the future”

• Policy number

  • Format X999999999

  • Validation - one letter followed by 9 numbers

  • Error message: “Please fill out the policy field correctly, e.g. X123456789”

2) Division Selection:
Select insurance type. Wireframe “Division Selection - Motor Vehicle” shows options when insurance type of Motor Vehicle insurance is selected. Picking a value in “Insurance sector” field will initiate a call to retrieve Insurance divisions. Implement this via a dummy call.

Fields and validation:

• Policy holder

  • If No is selected then value of “Damage” radio button need to be set to “Originated from me”

  • If Yes is selected then disable “Has risen in another” radio button shown in Damage field.

• Damage

  • Greyed out if Policy Holder = No

• Insurance sector

  • Values:

    • Motor Vehicle

    • Home/household

    • Legal

    • Accident

    • Personal Injury

  • Changing value initiates call to retrieve insurance division list

3) Policy Holder:
This page gets the Personal data and contact information.

Fields and validation:

• Last Name

  • Mandatory

• First Name

  • Mandatory

• Title

  • Values:

    • Mr

    • Ms

    • Mrs

    • Miss

    • Dr

• Degree

  • Values:

    • BA

    • BSc.

    • BEd.

    • BEng.

    • MA

    • MSc.

    • MEd.

    • MEng.

• Gender

  • Mandatory

• Date of Birth

  • Format: dd.mm.yyyy

• Social security number

• Town

  • Mandatory

• Postal Code

  • Mandatory

• Street

• Street Number

  • Mandatory

• Staircase

• Door Number

• Phone Country Code

  • Standard County Codes

• Area Code

  • Mandatory

• Number

  • Mandatory

• Email Address

  • Mandatory

4) Damage Report:
Below are the damage report screens...

4.1) Damage Report - Step 1:
Description of damage and option to attach supporting documents

Fields and validation:

• Street

• House No.

• Stairs

• Door Number

• Postal Code

• Town

• Country

• Claim Type

  • Values

    • Theft

    • Fire

    • Traffic collision

    • Vandalism

    • Glass Breakage

• Causation

  • If Claim Type = Traffic Collision, values:

    • Collision with Car

    • Other

  • If Claim Type = Glass Breakage, values:

    • Collision with Car

    • Other

  • All other Claim Types, value:

    • Other

• Damage Description

• Document upload section:

  • Upload button opens file dialog

  • Selecting file starts upload

    • We would like to simulate a simple progress bar while the file is uploading

• Document column shows a dropdown with below values:

  • Medical Report

  • Photograph

  • Email

  • Documentary Evidence

  • Car Quote

4.2) Damage Report - Step 2:
Specific data for a Motor Insurance related claim. Address details from screen 3 should auto-populate the indicated fields which then initiates a call to retrieve a list of workshops. Implement a dummy call to represent this.

Fields and validation:

• Vehicle Type

  • Values:

    • Car

    • Motorcycle

    • Truck

    • Bus

• License Plate

  • Mandatory

• Vehicle Make

  • Mandatory

  • Values - standard list of vehicle manufacturers

• Model

• Registered In

  • Values - standard list of countries

• Damage

  • Values:

    • Small glass damage

    • Damage to bodywork

    • Plastic damage

    • Total theft

    • Write off

    • Unknown

• Interested in our workshop

  • Yes or No radio buttons

• Your date

  • Format dd.mm.yyyy

  • Defaults to Damage Date from screen 1

• Phone Country Code

  • Standard Country Codes

• Area Code

  • Mandatory if Interest in our workshop = Yes

• Number

  • Mandatory if Interest in our workshop = Yes

• Extended Opening Times is a checkbox as shown in the wireframe.

• Postal Code

  • Default - Postal Code from screen 3

• Town

  • Default - Town from screen 3

• Road/Street

  • Default - Street from screen 3

• Free Extra Services

  • Values:

    • Pick up and collection

    • Valet

• Vehicle location

  • Values:

    • Driver address from screen 3

    • Other

• Garage selection fields will be used to provide a filtered list of garages.

4.3) Damage Report - Step 3:
This is a summary screen showing values entered from previous screens. It also includes a captcha box to verify the forms have been completed by a human.

Fields and validation:

• Policy Number

  • Screen 1

• Insurance Type

  • Screen 2

• Damage Date

  • Screen 1

• Claim Type

  • Screen 4

• Cause

  • Screen 4

• Location

  • Screen 4 (Street + Street Number, Postal Code + Town)

• Damage Description

  • Screen 4

• Persons Involved

  • Screen 3 (First Name + Last Name)

• Participating Elements

  • Screen 5 (Vehicle Type + Make + Model

• Captcha (use a placeholder like wireframe) and a text box to enter the characters shown in captcha.

5) Confirmation:
- This screen need to show the "Confirmation message and reference number" as shown in the wireframe

Specific HTML/CSS/JavaScript Requirements:
- Your site must be developed in AngularJS and use the Bootstrap framework
- 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.
- 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 style-sheet.
- 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.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Requirements
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.

You are allowed to use the JQuery JavaScript library for this contest. Document your JavaScript!

Browsers and Standards:
Your submission must works on browser in the list below:
- IE10+
- Latest Safari Mac
- Latest Chrome Mac and PC
- Latest Firefox Mac and PC
- Mobile Browsers (Latest safari and chrome)