Challenge Summary
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
How To Compete In This Challenge
- Competing in Topcoder design challenges are easy.
- First, register for the challenge by selecting the "Register" button in the top right.
- Second, review this challenge spec which provides details on what you’ll need to design.
- Third, please review this step-by-step guide on competing.
Round 1
Submit your initial design for a Checkpoint Feedback01) Login Screen
02) Homepage Screen
03) Premium & Billing Information Screen
03.A) Premium & Billing Information -> Payment Transaction Screen
04) Policy Information Screen
08) Customer Service Functionality Screen (ChatBot)
- 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 Updates01) Login Screen
02) Homepage Screen
03) Premium & Billing Information Screen
03.A) Premium & Billing Information -> Payment Transaction Screen
04) Policy Information Screen
05) Policy Values Screen
06) Contact Profile Screen
07) Recent Policy Activity Screen
08) Customer Service Functionality Screen (ChatBot)
09) Additional Screen Ideas
- 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
Life insurance with the John Hancock Vitality Program allows you to live life today while planning for tomorrow. This new kind of life insurance helps secure your family's financial future while offering valuable savings and rewards for the everyday things you do to stay healthy.
The John Hancock Vitality Life Insurance Mobile App will be used by current customers with life insurance that are a part of the Vitality program. The customer can view their various insurance accounts, as well as make payments, find important policy information, and contact customer service through their application.
Why are we building this app?
Current Vitality members have to use an existing app to fully participate in the health and fitness program. Currently, we don’t have an application for a customer to obtain insurance policy information or make changes to their policy. This is a disconnected experience because it forces the customer to either call a representative or log in to the website to access any information or update their policy. We want to create a new mobile application for this, and the life insurance will be the first product that we will cover in this new app.
We also want to greatly reduce the number of calls that are received from Vitality life insurance policyholders. The majority of the calls received are for billing questions, product information, resetting passwords for their account, and Vitality specific questions; which need to be transferred to a different call center/department. All of these items can be addressed with the new application.
In the future, the Life insurance mobile application will also need to have the following capabilities:
- 24/7 Call Back Feature within 15 minutes
- Direct appointment scheduling with call rep
- All John Hancock product histories (Life Insurance, Long Term Care, 529 College Plan, Annuity) on one single platform
Challenge Goal
Create the best possible, simple, easy-to-use UX/UI for the New Vitality Life Insurance Mobile Application that will help our customers to experience the best customer service support via utilizing modern technology.
Use Case
Short Term
- Display only Vitality life insurance information
- Automatically display most relevant information and provide additional categories to obtain more information
- Multiple life insurance policyholders will only be able to see Vitality account
- Ability to process basic account maintenance changes on JH Vitality account (e.g. Contact information like address changes)
- Provide a chatbot to help service questions and process transactions, connect to a live JH agent, schedule call with JH agent or email JH
Long Term
- Any John Hancock policy can be viewed from the app
- Ability to add account once in the app to receive relevant account information
- All types of life insurance available
- Ability to process any basic account maintenance request can be changed for all policies (e.g. Contact Information)
- Ability to process more advanced payment methods (picture of a check, scan credit card if it becomes an available payment method, etc.)
- More complex changes could not be changed on the app
- Provide a chatbot to help service questions and process transactions, connect to a live JH agent, schedule call with JH agent or email JH
Design Consideration
- New, Professional, and Modern look and feel.
- Simplicity to view and add necessary information
- Mobile Design Best Practice
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
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=636728
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.
01) Login Screen
Refer to wireframes.pdf page 2
- The user needs to authenticate themselves first before able to use the application
- Username and Password (Ordinary login form?)
- Touch ID capabilities
- Ability to reset username & password on app
- Should havea similar feel as current JH Vitality app (check wireframes)
- All these functionality should be available on one screen
- Needs to follow JH Branding strictly
- Any additional functionality that could make it easier for clients to log into the app (e.g. chatbot, facial recognition, etc?)
02) Homepage Screen
Refer to wireframes.pdf page 3
- For this screen, we are open to different layouts and ideas for the best ways to present the information
- The homepage screen need to display the basic information of the user:
-- Policy# - least prominent piece of information
-- Current Vitality Status: Platinum, Gold, Silver or Bronze
-- Premium Amount Due – most prominent information
-- Premium Due Date – most prominent information
-- Surrender Value
-- Next anniversary date
- It also needs to display the following categories where the user can drilled down to get more details information about each categories (show us your creativity on how these category should be displayed and how the user can get this additional information, for example: via drop down, new screen, etc.):
-- Premium and Billing
---- Payment Options
-- Policy Values
-- Contact Information
-- Policy Information
- Ability to make payment from this screen
- Please leverage icons & pop-up functionality to encourage the user to take required action on their policy including:
-- Payment
-- Contact Information Verification
- Ability to be connected with chat bot or contact John Hancock via phone or email (critical)
- John Hancock Vitality Branding when JH Vitality Life policy information is displayed
- Show Product News (images,co ntent for these), all available features with Vitality products that will be available on their Life Insurance policy, for example:
-- Apple Watch, you can get a free Apple Watch with a low initial fee if you hit your weekly fitness levels (https://www.johnhancockinsurance.com/vitality-program/apple-watch.html)
-- Unemployment Rider, fea ature that allows you to have your premiums paid in the event that you lose your job. This feature tends to be targeted for younger clients.
-- Critical Illness (CI) Rider, feature that allows you to pay for health bills such as paying for a nursing home when you have a qualifying health events. This feature is for older clients.
-- Healthy mind, is a new feature added to the program this year where you can earn points for meditation and sleep (https://www.johnhancockinsurance.com/vitality-program/HealthyMind.html)
03) Premium & Billing Information Screen
Refer to wireframes.pdf page 4
- Premium Information
-- Premium Amount Due – most prominent
-- Premium due date – most prominent
-- Planned Premium Amount (Ability to click on and display a pop-up message of meaning of term)
-- Last Year’s Premium Change: $1,500 decrease
-- YTD Rewards Earned: $X
-- Add easy to read visuals to show policy history (e.g. y/y premiums)
- Ability to make payment
-- One-time payment option
---- Default to last payment option
---- Ability to select a date via a calendar icon
-- Ability to set up recurring payments (monthly, annually)
- Payment History – below details can be on a new screen
-- Ability to obtain recent payment
-- Include Date & Amount of payment
-- Which account was used to pay (e.g. Checking Account #)
-- Transaction status (pending, completed) Customer Service
- Add Chatbot functionality onto this screen to serve as Customer Service (Show us some interactions for this)
03.A) Premium & Billing Information -> Payment Transaction Screen
Refer to wireframes.pdf page 5
- Provide the following payment options:
-- One-time payment option
-- Default to premium amount due with ability to change payment amount
-- Ability to select a date via calendar icon
- Ability to set up recurring payments (monthly, quarterly, annually)
-- Currently JH only allows recurring payments to be set up from their bank accounts
-- Client should be able to scan a check for information to be automatically uploaded or to manually enter the following pieces of information:
1. Financial Institution Name
2. Name on Account
3. Type of Account (checking/savings)
4. Bank Account #
5. Bank's ABA Routing Number
- Provide functionality that makes it easy to pay (touch ID, scan check)
- Allow premiums to be paid via check, credit card, apple pay, touch ID, scan check
- Confirmation that payment did or did not go through
04) Policy Information Screen
Refer to wireframes.pdf page 6
- Need to see the following information on the Policy Information:
-- Policy#
-- Product: Term, VUL, IUL
-- Additional Product Features: Vitality, LTC Rider, Unemployment Rider, Critical Illness Rider
-- Owner Name
-- Insured Name
-- Beneficiary Name
-- Agent Name
-- Special Authorizations (POA, 3rd Party)
-- Personalize – e.g. member since
-- Ability to take action (e.g. update beneficiary information)
-- Provide functionality through icons that enable the user to click to obtain term definitions including Product type and product features
- Add chatbot functionality
05) Policy Values Screen
Refer to wireframes.pdf page 7
- Need to see the following information in the Policy Value:
-- Policy Value Surrender Value
-- Surrender Charge
-- Loan Value
-- Rider Value
-- Base Face Amount
-- Total Death Benefit
-- Personalize – e.g. “member since”
- Add chatbot functionality
06) Contact Profile Screen
Refer to wireframes.pdf page 8
- The Contact Information need to contain the following informations:
-- Owner & Insured Address on File
-- Update Address
-- Update Phone
-- Update Email
- Confirmation screen if change is made
- Personalize – member since; photo
- Ability to tailor communication – e-only, text
07) Recent Policy Activity Screen
Refer to wireframes.pdf page 9
- Display the following recent policy activity statuses:
-- Payment transactions
-- Illustration requests
-- Surrender requests
-- Date requested
- Status of request (active, pending, completed)
08) Customer Service Functionality Screen (ChatBot)
Refer to wireframes.pdf page 10
- Would like the ability to be connected to a chatbot (similar to other company bots like "Erica from Bank of America")
- Bot should pop-up at bottom of app and ask if the customer would like any help:
-- Provide options to answer most frequently asked questions including: Update Address, Make a payment, Policy Information
-- The user should be able to free-form write their question to the bot
- Bot should be able to answer questions and help client process transactions on mobile app
- Bot should be able to connect the customer with any of the following:
-- John Hancock human agent either immediately or by scheduling a call
-- Emailing JH
- Please personalize the experience, for ex:
-- Hello "Adam", "Congrats on earning 'X' dollars in rewards"
-- Providing intelligent help - "It looks like you have a payment due, would you like to pay now?"
- The "chatbot" appearance needs to be created, it needs to look like:
-- Should be modern with no ties to the historical figure John Hancock
-- Should not include a picture of a human image
09) Additional Screen Ideas
- Because this is a concept driven challenge we are open to and looking for additional ideas and concepts
- Make sure anything else you propose and design makes sense for the target user and the application
Important:
- Keep things consistent. This means all graphics 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 (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Branding Guidelines
- Follow John Hancock Branding Guidelines for the overall app look and feel
- Follow John Hancock Vitality Guidelines when the life insurance policy design appear in the app
Documentation
- Wireframes
- JH Branding Guidelines (Overall App Guidelines)
- JH Vitality Branding Guidelines (Vitality Life Insurance Policy)
Target Devices
- We are designing this app for mobile
- Targeting iPhone 8: 750px(w) by 1334px(h) (height increased as needed)
Target Audience
- All age ranges
- Current John Hancock life insurance customers
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
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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, XD or Sketch and saved as an 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.