Challenge Overview
Welcome to "FAST!! 30Hrs - Kubik Insurance Quote and Bind Solution UI Prototype Challenge". The goal of this project is to create a Web-based prototype for an Application where Insurance agent can get a Quote & Bind solution for Small Business/Prospect/Potential Customer. In this challenge, we want your help to create the front end prototype and simulate all requires features that will be available in the new HTML5 platform.
As part of this challenge, you will need to comments HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
IMPORTANT!! Please make sure to check the challenge Timeline! This challenge is a FAST Challenge with only 30 Hours available for the Submission Phase! So don't wait til the end, Jump in NOW!!
User Flow
Reference File "workflow.jpg"
- Calculate Lifetime Value of the customer and identify products that can be sold to the prospect (Lifetime Value is a prediction of the net profit attributed to the entire future relationship with a customer)
- Generate a Risk Profile of the customer based on customer information, Business and Risk information, demographics, life events, etc.
- Provide leads to the agents/brokers
- Collect/pre-fill all relevant Customer & Business information required to price a quote
- Provide tailored guidance on the coverage best suited for the Small Business customer providing intuitive options based on what similar such SME owners would normally take
- Provide a quote
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient UI Prototype that works in all the requested browsers.
- All elements should be consistent pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Able to simulate all features from the requirements that were proposed.
- Getting the documentation right. The documentation should be easy to follow.
Target Devices
- Tablet (Priority)
- Desktop/Web
Target Audience
- Insurance Agents/Brokers
- Internal Users at the Insurer
Page Requirements
1) Login (Out of Scope)
Reference Screen "01 Login.png"
- Out of Scope
2) Dashboard (Out of Scope)
Reference Screens "02 Dashboard.png", "03 Menu.png"
- Out of Scope
3) Decline Quote (Out of Scope)
Refence Screen "04 Declined Quotes.png"
- Out of Scope
4) Search (Out of Scope)
Reference Screens "05 Type Search.png" to "07 Search Results_Filters.png"
- Out of Scope
5) Saved Search (Out of Scope)
Reference Screens "08 All Business.png" and "09 My Saved Business.png"
- Out of Scope
6) Business Information
Reference Screens "10 Business Information.png" to "20 Quotes.png"
- These are the screens that we need to create in this prototype challenge.
- Information in this Business Details information screen coming from 3rd parties, such as Google, LinkedIn, Facebook, etc.
- Show us the Business Details information for "Green Grocery".
- The user can save this business details into "My Saved Business" or download the business information to his local device. (11 Business Information_Add Business.png)
- Business Information Tab (10 Business Information.png), if the information from the 3rd party not correct, the user can click on the Pen icon and it will allow the user to edit and provide the correct content value.
- Business Information Tab, there are 3 sub-tab available, "Basic Info", "Premises Info", and "Risk Info & Value".
- Business Information Tab, All content in "Basic Info" and "Premises Info" should be editable. (10 Business Information.png, 12 Business Information_Premises Info.png)
- Business Information Tab, "Risk Info & Value", this screen show Risk Score and Customer Life value for the "Green Grocery". You can use any chart framework that is free and can be used for commercial purpose. The chart content will change based on the basic info and premises info from the previous 2 sub tab screens.
- Package Configuration Tab, Once user view all the basic information of "Green Grocery", they can go to Package configuration tab and will be given a default suggestion by the system about packages that should fit with the "Green Grocery" needs (14 Package Configuration.png)
- Package Configuration Tab, Considering the information from Business Information Tab and the default package suggestion by the system, the user will need to determine whether the provided package is really fit for the "Green Grocery" or not.
- Package Configuration Tab, If user feels that the package not fit with "Green Grocery" needs, they can customize the package (15 Package Custom.png, 16 Package Configuration_Custom.png, 17 Package Configuration_Customized.png)
- Package Configuration Tab, After the package gets customized and the user think that the package will fit to "Green Grocery" needs, the user can create quote and send the package to client, but first, they need to check how the quote will look like when being sent to "Green Grocery" owner (18 Quote Preview.png). This can be done by clicking the arrow button located at the bottom of each package.
- Quote Preview, If the user thinks all the information under quote preview is correct, they can send the quotes to "Green Grocery" by clicking the "Create Quote" button.
- Quotes, in this tab, the user will be able to see the quote status that being sent to any prospect/potential customer.
Documentation
- Storyboard
- Workflow.jpg
Code 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 in 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 create 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
- All JavaScript must not have a copyright by a third party.
- 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.
Browsers Requirements
- IE11 & Microsoft Edge Browser latest version
- Firefox latest version
- Chrome latest version
- Safari Mobile for Tablet
- Upload your code as a .zip file (include the documentation as well) to the Submit and Review tool for this contest.
As part of this challenge, you will need to comments HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
IMPORTANT!! Please make sure to check the challenge Timeline! This challenge is a FAST Challenge with only 30 Hours available for the Submission Phase! So don't wait til the end, Jump in NOW!!
User Flow
Reference File "workflow.jpg"
- Calculate Lifetime Value of the customer and identify products that can be sold to the prospect (Lifetime Value is a prediction of the net profit attributed to the entire future relationship with a customer)
- Generate a Risk Profile of the customer based on customer information, Business and Risk information, demographics, life events, etc.
- Provide leads to the agents/brokers
- Collect/pre-fill all relevant Customer & Business information required to price a quote
- Provide tailored guidance on the coverage best suited for the Small Business customer providing intuitive options based on what similar such SME owners would normally take
- Provide a quote
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient UI Prototype that works in all the requested browsers.
- All elements should be consistent pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Able to simulate all features from the requirements that were proposed.
- Getting the documentation right. The documentation should be easy to follow.
Target Devices
- Tablet (Priority)
- Desktop/Web
Target Audience
- Insurance Agents/Brokers
- Internal Users at the Insurer
Page Requirements
1) Login (Out of Scope)
Reference Screen "01 Login.png"
- Out of Scope
2) Dashboard (Out of Scope)
Reference Screens "02 Dashboard.png", "03 Menu.png"
- Out of Scope
3) Decline Quote (Out of Scope)
Refence Screen "04 Declined Quotes.png"
- Out of Scope
4) Search (Out of Scope)
Reference Screens "05 Type Search.png" to "07 Search Results_Filters.png"
- Out of Scope
5) Saved Search (Out of Scope)
Reference Screens "08 All Business.png" and "09 My Saved Business.png"
- Out of Scope
6) Business Information
Reference Screens "10 Business Information.png" to "20 Quotes.png"
- These are the screens that we need to create in this prototype challenge.
- Information in this Business Details information screen coming from 3rd parties, such as Google, LinkedIn, Facebook, etc.
- Show us the Business Details information for "Green Grocery".
- The user can save this business details into "My Saved Business" or download the business information to his local device. (11 Business Information_Add Business.png)
- Business Information Tab (10 Business Information.png), if the information from the 3rd party not correct, the user can click on the Pen icon and it will allow the user to edit and provide the correct content value.
- Business Information Tab, there are 3 sub-tab available, "Basic Info", "Premises Info", and "Risk Info & Value".
- Business Information Tab, All content in "Basic Info" and "Premises Info" should be editable. (10 Business Information.png, 12 Business Information_Premises Info.png)
- Business Information Tab, "Risk Info & Value", this screen show Risk Score and Customer Life value for the "Green Grocery". You can use any chart framework that is free and can be used for commercial purpose. The chart content will change based on the basic info and premises info from the previous 2 sub tab screens.
- Package Configuration Tab, Once user view all the basic information of "Green Grocery", they can go to Package configuration tab and will be given a default suggestion by the system about packages that should fit with the "Green Grocery" needs (14 Package Configuration.png)
- Package Configuration Tab, Considering the information from Business Information Tab and the default package suggestion by the system, the user will need to determine whether the provided package is really fit for the "Green Grocery" or not.
- Package Configuration Tab, If user feels that the package not fit with "Green Grocery" needs, they can customize the package (15 Package Custom.png, 16 Package Configuration_Custom.png, 17 Package Configuration_Customized.png)
- Package Configuration Tab, After the package gets customized and the user think that the package will fit to "Green Grocery" needs, the user can create quote and send the package to client, but first, they need to check how the quote will look like when being sent to "Green Grocery" owner (18 Quote Preview.png). This can be done by clicking the arrow button located at the bottom of each package.
- Quote Preview, If the user thinks all the information under quote preview is correct, they can send the quotes to "Green Grocery" by clicking the "Create Quote" button.
- Quotes, in this tab, the user will be able to see the quote status that being sent to any prospect/potential customer.
Documentation
- Storyboard
- Workflow.jpg
Code 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 in 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 create 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
- All JavaScript must not have a copyright by a third party.
- 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.
Browsers Requirements
- IE11 & Microsoft Edge Browser latest version
- Firefox latest version
- Chrome latest version
- Safari Mobile for Tablet
Final Submission Guidelines
- Before submitting, make sure that your HTML, CSS, and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.- Upload your code as a .zip file (include the documentation as well) to the Submit and Review tool for this contest.