Challenge Overview
Welcome to "GUARD - Customer Portal UI Prototype Challenge". In this UI Prototype Challenge, we need your help to create HTML5 prototype for our Customer Portal where our customers could manage all their policies, claims & payments. Read more details below and Join us in this challenge!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
The customer is one of the biggest insurance companies in the world. With digitalization transforming expectations from customers, they want to create a customer portal where their customers could manage all their policies, claims & payments. They also want to create functionality to help them to understand the risk exposure they have by using some calculators & advisory tools. The customer portal experience should be intuitive in terms of UI/UX and Customer Journey. They want to focus on the private area which means a customer can use this portal when they have a product with us and has a username & password to log in to the portal.
User Flow
1) Customers enter landing page.
- Landing page just needs to have the option to register if they are new or log in if they are a returning user
- It should be very attractive in terms of design.
2) After login they will have access to their private zone where they can see:
- Info about all the policies they have contracted:
-- Car (one or more)
-- Travel (one or more)
-- House (one or more)
-- Liability
-- Health
- Option to report a claim on any of their policies.
- Tools to help the customer understand their risk exposure
- "Other people like you also insured" functionality and recommendations based on analytics
- How to contact us to ask questions: twitter, facebook, chatbot, phone/ call back, email. Contact my agent option - a real person connected to the precise customer (all the available channels). Contact us in some folded form (an icon?) should be available on all pages of the customer portal.
- Schedule appointments with Zurich (e.g. agent)
- Notifications (users can see notifications received regarding their products and/or risk exposure or renewal/cancellation deadline)
- Upload option of various types of documents, such as letters received offline, maybe even policies with other insurances, etc.
- Rewards catalogue, listing various features: e.g. discounts, collected points collected or a list of available gifts
Primary Goal
- Create an UI Prototype for our Customer Portal.
- Please match the storyboards as close as possible.
- 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.
Target Devices
- Desktop: 1366px width with Height adjusted accordingly
Target Audience
- Existing customers which have any product with us.
Competition Task Overview
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- Please use ReactJS as the main technology
- Replicate the design of the approved Storyboards for all page.
- Your pages must match the colours and structure of the provided storyboards.
- 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.
- Provide documentation on how to deploy your submission in server and Heroku.
1) Homepage
Screen Reference: 01-Home.png, 02-Home-Product Hover.png, 03-Home-More info.png, 04-Log in.png
- This screen needs to present two important informations, as marketing page for us and as an introduction to our customer portal.
- Clicking login button will open modal window where user can enter their credential to logged in to the app
- Create register form based on login form design
- Make the main navigation text a little bit bigger than now.
- Provide hover condition for the main navigation.
- Clicking the search icon magnifying glass will expand search text field (we don't have design for this interaction, so please create it based on your recommendation)
- Create Parallax scroll effect for each section
- Clicking products type will bring user to product details (car, travel or liability)
- Carousel in about us section needs to be working smoothly, it should show "About Us" and "How we work"
- Clicking "Chat button" on the right bottom area of the screen will open AI chatbot (we just need the UI here).
2) Dashboard page
Screen Reference: 05-Dashboard.png, 06-Product selected.png, 07-More details.png, 08-Notifications.png, 15-Chat.png
- Main screen when customer logins to their portal
- High-level overview of customer selected products and policies
- Show recommendation of products that customer might like
- Clicking "File a Claim" button will give customer ability to report a claim/show report a claim modal window.
- Clicking "Add New products" button and box field will bring customer to Products page
- Clicking customer selected products will open summary information about each policy and clicking the "expand details" will open all details information about the policy
- Use google Maps for the map area
- Clicking notification icon on the right top of the screen will open notifications window.
- See a list of recommended products based on the customer profile and "products contracted" from similar customers.
- "View All" button will take the customer to the Product page
3) My Profile Page
Screen Reference: 09-My profile.png
- Ability to View and Edit Personal information (Name, Phone, Email, Mobile, Address, etc.)
- Manage portal features (notification on/off, gets offer in dashboard, etc)
- Ability to manage payment information
4) Claim Report Page
Screen Reference: 10-Claims.png, 11-Report claim-Step1.png, 12-Report claim-Step2.png, 13-Report claim-Step3.png
- Claims Area, show list of all ongoing claims and their progress
- This is high-level status information
- Clicking any claim card will bring customer to claim details page
- Clicking "File a Claim" button will open report claim modal window. The customer can report a claim related to Product that they subscribed or buy via this screen.
- Ability to retrieve products from database or upload file claim information (form submissions, attach documents/photo/video)
- The report claim modal window will have 3 steps:
- select customer products
- describe claims that customer want to report
- preview the claim information
5) Claim Details Page
Screen Reference: 14-Claims details.png
- Customer will be able to see their claim report progress from this screen
- View status of the claim - submitted, processed, approved, etc.
- Who is in charge? How to contact them? Doing follow-up? Discussion with customer service in the claim? etc?
6) Tools Page
Screen Reference: 16-Tools.png, 17-Test calculator.png
- We need to create simple tools to make our customer understand better about their risk exposure via simple tools in the app.
- One particular tool that we will create for now is the risk calculator tool, clicking any of the risk calculator cards will open the calculator page.
- After user enters all information in the calculator tool, show the result (use content from "gc_05_2_Risk_Details.png" for this).
7) Rewards Page
Screen Reference: 18-Rewards.png, 19-Rewards way 2.png, 20-Rewards way 3.png
- Show information on how to collect the points - guidelines (buying different policies, not having claims, recommend to a friend, be a safe driver, etc)
- Display a total of collected points
- Explain options how to use the points (e.g get a discount for the renewal or purchasing a new product, give points/discount as a gift to a friend, choose a material gift from the catalog, etc.).
- Make the options visually attractive, carousel needs to work smoothly.
8) Products Page
Screen Reference: 21-Products.png, 22-Payment.png, 23-Payment second step.png
- This screen could be divided into 2 sections: My Policies/Products, and All Available Products
- Available Products, would be products that customer don't have, but customer can view more information about. Maybe "upgrade" or change one of my current policies to (the portal should let customer know what products are eligible or make sense to them; recommendations)
- My Policies/ Products, would be products that customer already subscribed/purchased, needs some indicator so customer know that they already have this product.
- View all products and see the detail specifications and information of the product
- Ability to make adjustments to current purchased products/policies (upgrade, delete, and add)
- Clicking "Get New" and "Upgrade" will open checkout modal window.
9) Product Details age
Screen Reference: 24-Car Policy.png, 25-Travel policy.png, 26-Liability policy.png
- We have a lot of products available, but for this challenge, you just need to create 3 example of product details:
- Car Policy:
-- Insured Car Info
-- Coverages and monthly cost
-- Documents (Car Policy . PDF, White & Green Card Pdf)
-- Owner of the Car Info
-- Policy Holder Info (address, email, name)
-- Policy Info (Product, start Date, end Date & policy status)
-- Policy Agent - Contact agent
- Travel Policy:
-- Coverages and cost
-- Insured Travel info (Area, Travelers)
-- Insured Persons Info (Name, Birthdate)
-- Documents (travel policy.pdf, White paper.pdf)
-- Policy Holder Info (address, email, name)
-- Policy Info (Product, start Date, end Date & policy status)
-- Policy Agent - Contact agent
- Liability Policy:
-- Coverages and monthly cost
-- Insured Liability (household type, address)
-- Documents (liability_policy.pdf, White paper.pdf)
-- Policy Holder Info (address, email, name)
-- Policy Info (Product, start Date, end Date & policy status)
-- Policy Agent - Contact agent
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 recommends using ReactJS 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.
Browsers Requirements (Latest versions of)
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
Documentation
- Storyboards (You can find it in Challenge Forum -> UI Prototype Documents)
- SDK Components (For interaction 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
The customer is one of the biggest insurance companies in the world. With digitalization transforming expectations from customers, they want to create a customer portal where their customers could manage all their policies, claims & payments. They also want to create functionality to help them to understand the risk exposure they have by using some calculators & advisory tools. The customer portal experience should be intuitive in terms of UI/UX and Customer Journey. They want to focus on the private area which means a customer can use this portal when they have a product with us and has a username & password to log in to the portal.
User Flow
1) Customers enter landing page.
- Landing page just needs to have the option to register if they are new or log in if they are a returning user
- It should be very attractive in terms of design.
2) After login they will have access to their private zone where they can see:
- Info about all the policies they have contracted:
-- Car (one or more)
-- Travel (one or more)
-- House (one or more)
-- Liability
-- Health
- Option to report a claim on any of their policies.
- Tools to help the customer understand their risk exposure
- "Other people like you also insured" functionality and recommendations based on analytics
- How to contact us to ask questions: twitter, facebook, chatbot, phone/ call back, email. Contact my agent option - a real person connected to the precise customer (all the available channels). Contact us in some folded form (an icon?) should be available on all pages of the customer portal.
- Schedule appointments with Zurich (e.g. agent)
- Notifications (users can see notifications received regarding their products and/or risk exposure or renewal/cancellation deadline)
- Upload option of various types of documents, such as letters received offline, maybe even policies with other insurances, etc.
- Rewards catalogue, listing various features: e.g. discounts, collected points collected or a list of available gifts
Primary Goal
- Create an UI Prototype for our Customer Portal.
- Please match the storyboards as close as possible.
- 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.
Target Devices
- Desktop: 1366px width with Height adjusted accordingly
Target Audience
- Existing customers which have any product with us.
Competition Task Overview
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- Please use ReactJS as the main technology
- Replicate the design of the approved Storyboards for all page.
- Your pages must match the colours and structure of the provided storyboards.
- 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.
- Provide documentation on how to deploy your submission in server and Heroku.
1) Homepage
Screen Reference: 01-Home.png, 02-Home-Product Hover.png, 03-Home-More info.png, 04-Log in.png
- This screen needs to present two important informations, as marketing page for us and as an introduction to our customer portal.
- Clicking login button will open modal window where user can enter their credential to logged in to the app
- Create register form based on login form design
- Make the main navigation text a little bit bigger than now.
- Provide hover condition for the main navigation.
- Clicking the search icon magnifying glass will expand search text field (we don't have design for this interaction, so please create it based on your recommendation)
- Create Parallax scroll effect for each section
- Clicking products type will bring user to product details (car, travel or liability)
- Carousel in about us section needs to be working smoothly, it should show "About Us" and "How we work"
- Clicking "Chat button" on the right bottom area of the screen will open AI chatbot (we just need the UI here).
2) Dashboard page
Screen Reference: 05-Dashboard.png, 06-Product selected.png, 07-More details.png, 08-Notifications.png, 15-Chat.png
- Main screen when customer logins to their portal
- High-level overview of customer selected products and policies
- Show recommendation of products that customer might like
- Clicking "File a Claim" button will give customer ability to report a claim/show report a claim modal window.
- Clicking "Add New products" button and box field will bring customer to Products page
- Clicking customer selected products will open summary information about each policy and clicking the "expand details" will open all details information about the policy
- Use google Maps for the map area
- Clicking notification icon on the right top of the screen will open notifications window.
- See a list of recommended products based on the customer profile and "products contracted" from similar customers.
- "View All" button will take the customer to the Product page
3) My Profile Page
Screen Reference: 09-My profile.png
- Ability to View and Edit Personal information (Name, Phone, Email, Mobile, Address, etc.)
- Manage portal features (notification on/off, gets offer in dashboard, etc)
- Ability to manage payment information
4) Claim Report Page
Screen Reference: 10-Claims.png, 11-Report claim-Step1.png, 12-Report claim-Step2.png, 13-Report claim-Step3.png
- Claims Area, show list of all ongoing claims and their progress
- This is high-level status information
- Clicking any claim card will bring customer to claim details page
- Clicking "File a Claim" button will open report claim modal window. The customer can report a claim related to Product that they subscribed or buy via this screen.
- Ability to retrieve products from database or upload file claim information (form submissions, attach documents/photo/video)
- The report claim modal window will have 3 steps:
- select customer products
- describe claims that customer want to report
- preview the claim information
5) Claim Details Page
Screen Reference: 14-Claims details.png
- Customer will be able to see their claim report progress from this screen
- View status of the claim - submitted, processed, approved, etc.
- Who is in charge? How to contact them? Doing follow-up? Discussion with customer service in the claim? etc?
6) Tools Page
Screen Reference: 16-Tools.png, 17-Test calculator.png
- We need to create simple tools to make our customer understand better about their risk exposure via simple tools in the app.
- One particular tool that we will create for now is the risk calculator tool, clicking any of the risk calculator cards will open the calculator page.
- After user enters all information in the calculator tool, show the result (use content from "gc_05_2_Risk_Details.png" for this).
7) Rewards Page
Screen Reference: 18-Rewards.png, 19-Rewards way 2.png, 20-Rewards way 3.png
- Show information on how to collect the points - guidelines (buying different policies, not having claims, recommend to a friend, be a safe driver, etc)
- Display a total of collected points
- Explain options how to use the points (e.g get a discount for the renewal or purchasing a new product, give points/discount as a gift to a friend, choose a material gift from the catalog, etc.).
- Make the options visually attractive, carousel needs to work smoothly.
8) Products Page
Screen Reference: 21-Products.png, 22-Payment.png, 23-Payment second step.png
- This screen could be divided into 2 sections: My Policies/Products, and All Available Products
- Available Products, would be products that customer don't have, but customer can view more information about. Maybe "upgrade" or change one of my current policies to (the portal should let customer know what products are eligible or make sense to them; recommendations)
- My Policies/ Products, would be products that customer already subscribed/purchased, needs some indicator so customer know that they already have this product.
- View all products and see the detail specifications and information of the product
- Ability to make adjustments to current purchased products/policies (upgrade, delete, and add)
- Clicking "Get New" and "Upgrade" will open checkout modal window.
9) Product Details age
Screen Reference: 24-Car Policy.png, 25-Travel policy.png, 26-Liability policy.png
- We have a lot of products available, but for this challenge, you just need to create 3 example of product details:
- Car Policy:
-- Insured Car Info
-- Coverages and monthly cost
-- Documents (Car Policy . PDF, White & Green Card Pdf)
-- Owner of the Car Info
-- Policy Holder Info (address, email, name)
-- Policy Info (Product, start Date, end Date & policy status)
-- Policy Agent - Contact agent
- Travel Policy:
-- Coverages and cost
-- Insured Travel info (Area, Travelers)
-- Insured Persons Info (Name, Birthdate)
-- Documents (travel policy.pdf, White paper.pdf)
-- Policy Holder Info (address, email, name)
-- Policy Info (Product, start Date, end Date & policy status)
-- Policy Agent - Contact agent
- Liability Policy:
-- Coverages and monthly cost
-- Insured Liability (household type, address)
-- Documents (liability_policy.pdf, White paper.pdf)
-- Policy Holder Info (address, email, name)
-- Policy Info (Product, start Date, end Date & policy status)
-- Policy Agent - Contact agent
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 recommends using ReactJS 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.
Browsers Requirements (Latest versions of)
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
Documentation
- Storyboards (You can find it in Challenge Forum -> UI Prototype Documents)
- SDK Components (For interaction references)
Final Submission Guidelines
Submission DeliverablesA 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