Challenge Summary
Round 1
Submit your initial design for a Checkpoint Feedback1) Home Screen
2) My Dashboard
3) Product/ Policy Details Screen
6) Contact Info Screen (Global feature)
7) Risk calculator & Tools Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates1) Home Screen
2) My Dashboard
3) Product/ Policy Details Screen
4) Report a Claim Screen
5) View Claim Status Screen
6) Contact Info Screen (Global feature)
7) Risk calculator & Tools Screen
8) Rewards Catalogue
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are one of the biggest insurance companies in the world. With digitalization transforming expectations from customers we want to create a customer portal where our customers could manage all their policies, claims & payments. We want also create functionality to help them to understand their 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. We want to focus in 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.
Challenge Goals
Create an intuitive portal for our customer that follow our branding guidelines and SDK components so they can easily manage all their services and transaction with us.
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 catalog, listing various features: e.g. discounts, collected points collected or a list of available gifts
Design Consideration
- Easy to understand flow from page to page, users are guided through the purchase process
- Intuitive for the user, i.e. should never be left asking "what do I do next?"
- Simple, clean, modern. Products are the main focus, the content compliments them accordingly
- Each page is not overcrowded with information, (but it is obvious where to access more info)
Design Usability
- Simple; not too many steps involved in any part
- Easy to understand the navigation from section to section
- Fast and efficient shopping experience to add new policies
Target Devices
- Desktop: 1366px width with Height adjusted accordingly
Branding Guidelines
- Ask in Forum for Access to Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our Branding Guidelines Document for design style, font, and colors.
- Designs should reuse our SDK components as much as possible (in cases you need a component is not in the list you can use a one designed by you)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=619295
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
1) Home Screen
- This screen needs to present two important informations, as marketing page for us and as an introduction to our customer portal.
- Provide an area where customer can Register if they are a new user
- Consider “forgot your login/password” form
- Provide simple Login form if customer is a returning user
- Showcase some of our recommended products
- Give some information about the Customer Portal to bring user awareness about the portal
- Knowledge Hub: Interesting articles, marketing. Personalized articles and information based on what policies the customer has, what information they looking at, etc.
2) My Dashboard
- After successful login, customers should be able to personalize the portal to match with their needs, some kind of personalization wizard or other personalization methods are welcome!
- This dashboard screen should be divided into various sections to make it as organized and easy to use as possible. Some suggestions for sections are listed below:
2a Dashboard (Main screen)
- Main screen when user logins to their portal
- High-level overview of my products and policies
-- Click to see detailed information about each policy (3) Products Detail screen)
- Notifications
- Wearables, AI, and/ or telematics information
-- Wearables information would tie into life insurance type of policies/ products
-- Telematics tracks information about your driving and car. So GPS, speed, driving behavior, how much you drive, etc. This information could relate to car insurance and dictate your premium (price), discounts, etc.
-- AI could relate to various levels of information and give additional context or information to the customer
- See a list of recommended products based on the customer profile and "products contracted" from similar customers.
-- View All Products
-- Takes the user to the 3) Product/ Policy Details Screen
2b Profile
- Ability to View and Edit Personal information (Name, Phone, Email, Mobile, Address, etc.)
- Manage portal features (notification on/off, gets offer in dashboard, etc)
2c Payment/ Bill Center
- We also need to provide the payment flow:
-- User can define the payment details (credit card, PayPal etc)
-- User can define how they want to pay each of their product policy (pay each policy separately).
- Ability to update existing payment information
-- Change billing address
-- Change payment method
-- Change CC number/ details
-- Change billing frequency (monthly, yearly, etc.)
- The payment process should be quick and easy
- Should have information about previous month's bills, ability to view and print bills
2d Claims
- Claims Area, show list of all ongoing claims and their progress
- This is high-level status information
- User should be able to "view claim" which would take them to 5) View Claim Status Screen
- Should also allow the user to "Report a Claim", which would take them to the 4) Report a Claim Screen
3) Product/ Policy Details Screen
- This screen could be divided into 2 sections: My Policies/ Products, and Available Products
-- Available Products, would be products that I don't have, but I can view more information about. Maybe "upgrade" or change one of my current policies to (the portal should let me know what products are eligible or make sense to me; recommendations)
-- My Policies/ Products, would be products that I already subscribed/purchased, needs some indicator so I know that I 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)
- 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
4) Report a Claim Screen
- Customer needs to have a simple and easy user experience when reporting a claim. So, it needs to be very intuitive
- 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)
- How can we create the report interactions? Wizard/Steps process or Form to report a claim?
- Contact an agent, live chat, send email, phone number, etc.
5) View Claim Status Screen
- 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) Contact Info Screen (Global feature, on every screen)
- Show information about how to be able to contact us
- Form or Chatting features to contact our customer support? Chatbot? Etc? We call it “Digital Assistant” in the DCX Project in case it matters
- Live chat, number, email, etc
- Visualize it (icons, infographic, visual display, etc)
7) Risk calculator & Tools Screen
- We need to create simple tools to make our customer understand better about their risk exposure
- We are open to your creativity on how to create the “Risk Calculator & Tools”
- Show all the "Things protected" and the cost against the total cost of insurance contracted.
-- Things Protected would be features of insurance like personal injury, property damage, fire damage, water damage, burglary, etc.
- Recommendations to minimize risks
- Gamification: more policies/covers means more badges, points to recommend friends (referrals), etc
- An example of an insurance risk calculator can be seen here: http://insuranceriskcalculator.com/
- Do some research, there is a lot of information on insurance risk, how insurers calculate risk, etc.
- We open to and looking for unique ideas here
8) Rewards Catalogue
- 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
Important:
- Keep things consistent. This means allgraphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
- Please ask in forum for access to documentation
- Branding Guidelines Document, The design must be aligned with our guideline.
- SDK Kit, The design must be aligned with the SDK in terms of Style (font, icons, colors) & Layout.
- IMPORTANT!! We are looking for creativity here, use Branding and SDK as references about colors, font, but don’t let them limit your creativity. So, Creativity First, Branding and SDK Second!
Target Audience
- Existing customers which have any product with us.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.