Challenge Overview
Challenge Overview:
Welcome to the Write It Now - HTML5 UI Prototype Challenge! In this challenge, you will need to build the HTML5 UI Prototype for the new Write It Now application based on the Storyboard screen designs that have already been created. This challenge will produce the completed UI Prototype for the new Write It Now application.
Project Background:
The client for this project has decided to create a unique visual underwriting tool for Commercial Insurance. This underwriting tool will be a huge departure from traditional tools. We will make it available to internal and external underwriters who write business on our behalf. It combines elements of our underwriting guidelines with ratings.
The typical insurance application is very form based. We are looking to create an easy to use, visual experience for underwriters:
- We are looking to both improve the user experience and underwriting results by making the guidelines a part of the visual application (the bell curve) and asking underwriters to justify the opinions that vary from our curve.
- The workflow will be very controlled so that the user always knows what they have completed and where they are in the process. As the underwriter selects class and address, the price and terms bar for each selected coverage should be drawn.
- After they have entered exposure information, pricing options should appear and the user would have the ability provide their own interpretation.
- There will be various web service calls to interact with our rating engine, google maps, crime statistics and other tools.
- We have attached the completed Storyboard screen designs and the wireframes (including design notes) that explains this in more detail.
In this challenge. we are looking for the [topcoder] community to build an HTML5 UI prototype based on the design concept screens for the new Write It Now application.
Primary Goals:
For this challenge, we are asking you to put together the UI Prototype for the new Write It Now application based on the Storyboard screen designs that have already been created. The attached storyboards show the screens required for this application, which you will build for this challenge. A breakdown of the screens to submit for the contest is listed in the instructions below.
General Requirements:
The following are general guidelines you must follow in building the prototype:
- Produce a UI Prototype that can be used to demonstrate all screens / mentioned functionalities as required in the Storyboards / challenge spec.
- The new application will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops). You may focus on 1024px, but the prototype should be fluid and work on other screen sizes.
- The application will be built using HTML5.
- Please check design notes on each page to see the various interactions in those pages. You need to include those in your submission.
- Implement hover state for all buttons and links.
- All elements (such as the select boxes, radio buttons and checkboxes) will be HTML5 based. If any screen design elements look different in the storyboard (like the style in Safari / Mac OSX) and cannot be styled exactly the same way for a HTML5 based UI prototype, it is okay for the UI prototype to use the closest HTML5 look and style match (please confirm on forums if it is a big difference).
The following are specific requirements for HTML, CSS and Javascript files:
- Please provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use HTML5 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.
- 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 tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- 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".)
- 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.
- Pagination is required to be included where necessary.
Prototype Requirements:
Main Feature Overview:
1: System will guide users through the process
2: Dynamic choices based on class, location and coverage
3: Use of color to denote progress
4: Underwriting risks depicted graphically
5: Ability for underwriter to impart their own judgement
Basic User Flow Overview:
1: Selects the "Class"
2: Enters location information
3: Selects coverage
4: Enters exposure data
5: Reviews risk characteristics
6: Makes risk judgement by sliding vertical bar
Chart (the bell curve) Requirements:
The client would like the prototype to include a basic working version of the bell curve chart. You are allowed to use open source solutions to implement this demo. The key features of this bell curve are the slider and showing where the slider meets the line.
Prototype Visual and Flow Requirements:
- Add a "Tear Sheet" button to main page (page with all the bell curves)
- Make the left hand column choices dynamic. Location, Coverage and Exposure should be hidden. Once Class is answered, then Location should become visible perhaps with a "Red" circle or other visual clue that says "select me". Once Location is answered the Coverage choice should become visible with the same type of visual clue. After Coverage choices are made an Exposures section should then become visible.
- We would like the number labels on the bell curve to be replaced as follows: -3, -2, -1 should become "Low Risk", 0 is "Type Risk" and 1-3 "High Risk"
- The initial placement of the vertical bar should be in the middle of the bell curve
- There will be five coverage options to choose from: GL, Property, Cyber, E&O and Umbrella Excess.
- Once "Coverage" is selected, the bell curves can be drawn in grey. Once "Exposure" is entered the bell curves can become active (shown in color).
- Class options will be driven by the Industry selected. We provide the choices in the attached document.
- Coverage options will be driven by the Industry selected. We provide the choices in the attached document.
- Exposure options will be driven by coverage. We provide the choices in the attached document.
- In each exposure option there will be an input for schedule rating
- Each industry will have a list of Low, Typical and High risk characteristics. We provide the choices in the attached Word doc.
- Forms in the upper right corner are driven by Industry, Class, Location and Coverage. We provide the choices in the attached Word doc.
- Pricing options are provided in an algorithm. This is explained in the attached Word doc.
UI Prototype Screens:
All the Storyboard screens, including the following pages, should be included in your UI prototype:
1) Dashboard:
- After a user logs in they will be able to select the industry of the account they are underwriting.
2) Rating Module:
- The user will enter information about the account they are underwriting.
- The rating module will only need to work for 2 selected industries in the prototype: 1) Daycare and; 2) Eating & Drinking
- There will be a number of steps involved in this process (See Storyboard screens, "Main Features" and "User Flow" above for more details).
SCOPE: All the screens in the "Submission" folder from the Storyboards are in scope for this contest.
Supporting Documents:
- Storyboard Screen Designs (Write It Now - Responsive Web Design Concepts Challenge FFv1.zip) - attached to challenge spec.
- Wireframes - The Storyboard screens take precedent over the wireframes, but there are design notes included in the wireframes that are still helpful for understanding the app flow.
- Word Doc - Document that includes details about options and calculations the application will use. Explains Industries, Classes, Available Coverages, and the Rating Algorithm.
Browsers and Standards:
Your submission must work on the browsers listed below:
- IE8+
- Safari latest version on Mac & Windows
- Firefox latest version on Mac & Windows
- Chrome latest version on Mac & Windows