Challenge Overview
Welcome to "SCI - Customer Account UI Prototype Challenge". In this challenge, we need your help to create a responsive HTML5 prototype for our SCI Customer Account platform. We are redesigning a portal in Angular 1.5+ & Bootstrap. In this challenge, we intend to start with some responsive pages of the portal. We don't have the storyboard source files so you will need to re-create the design elements from scratch based on the documents we provided to you (It's a simple GUI, so should be easy), and base CSS also will be provided...Read more details below and Join us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create a responsive HTML5 prototype for our Customer Account platform using AngularJS 1.x and Bootstrap.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front-end only) for our Customer Account platform.
- The final solution will be built on Angular 1.x and Bootstrap. Hence it would be helpful to base the prototype on Angular 1 structure and framework.
Target Devices
- Desktop: Min 1280px width
- Tablet: Min 768px width
- Mobile: Min 375px width
- iPhone and iPad are a priority for Mobile. Please focus mobile and tablet efforts on iPad and iPhone
- Needs to works both in portrait and landscape.
Target Audience
- Sales users who work for a bank.
Competition Task Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided screenshot documents provided. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- There are 5 pages that need to be built. We don't have the storyboard source files, but we can provide the JPG/PNG version and the screenshot document for you (Top Coder screens finalized_v4.0.pdf)
- You will need to replicate the design of the provided screens from scratch.
- Your pages must match the colors and structure of the provided screens and document as much as possible.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- A base CSS is provided. It's based on Bootstrap. It's not complete.
- Please try and use Bootstrap provided styles as much as feasible
- Please make the pages responsive. The page should work seamlessly in all desktop/tablets/mobile and in all orientation (landscape and portrait).
- iPad and iPhone are a priority. Please focus on them.
- Please match the design (as close as possible) across the desktop and tablet. Please feel to make changes to adapt to mobile.
- Please comment your 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.
- The page should work seamlessly in all desktop/tablets/mobile and in all orientation (landscape and portrait). Please focus mobile and tablet efforts on iPad and iPhone.
- The navigation from one page to another is suggestive. Please add additional links for navigation if needed, consistent with the page design
01) Dashboard Screen
Page 1 to 5 from document
- Default screen that will appear when the user opens the app.
- Provide placeholder for Top level navigations in the header (Dashboard, Accounts, Agents, Logout)
- User should be able to create new account by clicking "Create New Account" button (Deadlink)
- Show list of recent accounts in the app on this screen.
- Initially, there will be no recent accounts, show (Page 4) if there are no recent accounts
- User should be able to sort the account list from this screen from the table header
- Values to be displayed in the search drop-down: Account Name, Account ID, Address
- The Account Name column in account list should be clickable and bring user to Account Details Screen
- If there is no account found after searching, show no result match
- No Result Match (page 5)
- User should be able to search any account from this screen via account name, account ID and address
02) Account Details Screen
Page 6 to 8 from document
- Show Business Details on the left area and Line of Business on the right side.
- For New Account, show empty content like shown on Page 6
- Needs the ability to Update Business Details and Line of Business from "Resume Applications" Button.
- Once user already filled the account details, it should show the details like shown on Page 7. Note, please provide the "Resume Applications" button here (the current design screenshot right now removed the button).
- In Lines of Business area, there will be 3 different states available here, 'Start Quote', 'View Policy', and 'Resume Quote':
- Start quote will take the user to Submit & Issue (described later)
- View Quote will take the user to Premium Summary screen
- Resume Quote will take the user to Submit & Issue screen (described later)
03) Premium Summary Screen
Page 13 from document
- Read Only Screen, that is launched from Premium link from Line of Business screen.
- Clicking "Issue Policy" will bring the user to Submit and Issue Screen.
04) Agent Price Adjustments Screen
Page 11 to 12 from document
- Agent Price Adjustment is a side panel that accessible by clicking "Select Lines of Business" link from Premium Summary screen. The user will need to select from 6 different selection that available from this screen to adjust the quoted price.
- User can select/click any of the 6 checkboxes (either single and multiple select)
- Every checkbox will have a set of form (3 fields) right now. Provide different state of form for these sections, for ex, the Management section provide radio box, the Building Features can be 3 textboxes, Location can be google maps, etc.
- Once user finishes adjusting the price, they can click "Complete" button and it will show the Premium summary screen with content in it.
05) Submit and Issue Screen
Page 14 to 17 from document
- There are several contact information form needs to be filled in before user can submit the quote.
- The forms needs to be filled will be:
-- Insured Information,
-- Additional Interest,
-- Policy Mailing Address,
-- Business Contact Information,
-- Loss Control Contact Information and
-- Accounting Records Contact Information.
- Doing Uncheck on the checkbox in Policy Mailing Address, Business Contact Information, Loss Control Contact Information and Accounting Records Contact Information will open form where user needs to enter contact information manually.
- Clicking "Add a named Insured" link will open additional form where user can enter new insured information.
- Clicking "Additional Interest" link also will open additional form where user can enter additional interest.
- Clicking "Continue to Billing" will trigger a popup saying "Redirect to Billing" and then user will go back to account details page.
- The Remove link should remove the Additional Interest section.
Specific HTML/CSS/JavaScript Requirements
HTML/HTML5
- 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 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
- Base CSS is provided. Please use it as much as possible
- The styles are based on Bootstrap, please use Bootstrap styles as much as possible
- 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.
Angular JS / Javascript
- Prefer Framework is AngularJS 1.5+
- 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.
Browsers Requirements (Latest versions of)
- Latest Chrome, Safari, Firefox, IE11 and Edge
- Safari on iPad (Both Portrait and Landscape)
- Safari on iPhone, Android Browser on Phone (Both Portrait and Landscape)
Documentation Provided
- Screenshot Documents (Contains Screens that we need to create)
- index.scss (For CSS References)
- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create a responsive HTML5 prototype for our Customer Account platform using AngularJS 1.x and Bootstrap.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front-end only) for our Customer Account platform.
- The final solution will be built on Angular 1.x and Bootstrap. Hence it would be helpful to base the prototype on Angular 1 structure and framework.
Target Devices
- Desktop: Min 1280px width
- Tablet: Min 768px width
- Mobile: Min 375px width
- iPhone and iPad are a priority for Mobile. Please focus mobile and tablet efforts on iPad and iPhone
- Needs to works both in portrait and landscape.
Target Audience
- Sales users who work for a bank.
Competition Task Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided screenshot documents provided. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- There are 5 pages that need to be built. We don't have the storyboard source files, but we can provide the JPG/PNG version and the screenshot document for you (Top Coder screens finalized_v4.0.pdf)
- You will need to replicate the design of the provided screens from scratch.
- Your pages must match the colors and structure of the provided screens and document as much as possible.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- A base CSS is provided. It's based on Bootstrap. It's not complete.
- Please try and use Bootstrap provided styles as much as feasible
- Please make the pages responsive. The page should work seamlessly in all desktop/tablets/mobile and in all orientation (landscape and portrait).
- iPad and iPhone are a priority. Please focus on them.
- Please match the design (as close as possible) across the desktop and tablet. Please feel to make changes to adapt to mobile.
- Please comment your 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.
- The page should work seamlessly in all desktop/tablets/mobile and in all orientation (landscape and portrait). Please focus mobile and tablet efforts on iPad and iPhone.
- The navigation from one page to another is suggestive. Please add additional links for navigation if needed, consistent with the page design
01) Dashboard Screen
Page 1 to 5 from document
- Default screen that will appear when the user opens the app.
- Provide placeholder for Top level navigations in the header (Dashboard, Accounts, Agents, Logout)
- User should be able to create new account by clicking "Create New Account" button (Deadlink)
- Show list of recent accounts in the app on this screen.
- Initially, there will be no recent accounts, show (Page 4) if there are no recent accounts
- User should be able to sort the account list from this screen from the table header
- Values to be displayed in the search drop-down: Account Name, Account ID, Address
- The Account Name column in account list should be clickable and bring user to Account Details Screen
- If there is no account found after searching, show no result match
- No Result Match (page 5)
- User should be able to search any account from this screen via account name, account ID and address
02) Account Details Screen
Page 6 to 8 from document
- Show Business Details on the left area and Line of Business on the right side.
- For New Account, show empty content like shown on Page 6
- Needs the ability to Update Business Details and Line of Business from "Resume Applications" Button.
- Once user already filled the account details, it should show the details like shown on Page 7. Note, please provide the "Resume Applications" button here (the current design screenshot right now removed the button).
- In Lines of Business area, there will be 3 different states available here, 'Start Quote', 'View Policy', and 'Resume Quote':
- Start quote will take the user to Submit & Issue (described later)
- View Quote will take the user to Premium Summary screen
- Resume Quote will take the user to Submit & Issue screen (described later)
03) Premium Summary Screen
Page 13 from document
- Read Only Screen, that is launched from Premium link from Line of Business screen.
- Clicking "Issue Policy" will bring the user to Submit and Issue Screen.
04) Agent Price Adjustments Screen
Page 11 to 12 from document
- Agent Price Adjustment is a side panel that accessible by clicking "Select Lines of Business" link from Premium Summary screen. The user will need to select from 6 different selection that available from this screen to adjust the quoted price.
- User can select/click any of the 6 checkboxes (either single and multiple select)
- Every checkbox will have a set of form (3 fields) right now. Provide different state of form for these sections, for ex, the Management section provide radio box, the Building Features can be 3 textboxes, Location can be google maps, etc.
- Once user finishes adjusting the price, they can click "Complete" button and it will show the Premium summary screen with content in it.
05) Submit and Issue Screen
Page 14 to 17 from document
- There are several contact information form needs to be filled in before user can submit the quote.
- The forms needs to be filled will be:
-- Insured Information,
-- Additional Interest,
-- Policy Mailing Address,
-- Business Contact Information,
-- Loss Control Contact Information and
-- Accounting Records Contact Information.
- Doing Uncheck on the checkbox in Policy Mailing Address, Business Contact Information, Loss Control Contact Information and Accounting Records Contact Information will open form where user needs to enter contact information manually.
- Clicking "Add a named Insured" link will open additional form where user can enter new insured information.
- Clicking "Additional Interest" link also will open additional form where user can enter additional interest.
- Clicking "Continue to Billing" will trigger a popup saying "Redirect to Billing" and then user will go back to account details page.
- The Remove link should remove the Additional Interest section.
Specific HTML/CSS/JavaScript Requirements
HTML/HTML5
- 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 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
- Base CSS is provided. Please use it as much as possible
- The styles are based on Bootstrap, please use Bootstrap styles as much as possible
- 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.
Angular JS / Javascript
- Prefer Framework is AngularJS 1.5+
- 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.
Browsers Requirements (Latest versions of)
- Latest Chrome, Safari, Firefox, IE11 and Edge
- Safari on iPad (Both Portrait and Landscape)
- Safari on iPhone, Android Browser on Phone (Both Portrait and Landscape)
Documentation Provided
- Screenshot Documents (Contains Screens that we need to create)
- index.scss (For CSS References)
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool