Patient Liaison Chatbot Web Application Improvements UI Prototype Challenge

App environment:

• NodeJS
• Angular

Basic requirements for this challenge:

• Update existing desktop prototype to follow new flow and layout
• Support responsive for phone and tablet layout
• Maintain the code quality
• Need support unit testing. Add code coverage

About Client
Our Client is a national revenue cycle management firm headquartered in Denver, Colorado. We service healthcare providers exclusively and specialize in:   

• Self-pay early-out programs  
• Insurance follow-up   
• Patient care call/verification programs

By focusing on telephone contact with patients and third-party payers and utilizing the latest in computer and telephony technology and a patient-friendly approach, we maximize recoveries for our clients.

About the Patient Liaison Chatbot
Our Client is in their early application development in the Health Insurance Industry. They are creating a Patient Concierge Chatbot web application that will have features to answer patient inquiries regarding - Account Balance, Payments, Payment Arrangements, Recurring Payments, Insurance, Financial Assistance, Patient Requests, etc.

Technology Stack

• Angular
• HTML
• CSS
• Javascript
• JSON

Challenge Assets:

• Gdrive: https://drive.google.com/open?id=1GuCIiUwigXA_mlyceFjMa8oPS0l-7lxu
• MarvelApp Desktop Reference: https://marvelapp.com/4d4jiea
• MarvelApp Desktop Handoff: https://marvelapp.com/4d4jiea/screen/57097268/handoff
• MarvelApp Phone Challenge Input: https://marvelapp.com/3cab1ah
• MarvelApp Phone Handoff: https://marvelapp.com/3cab1ah/screen/57097481/handoff

Source Code

• Ragnar link: https://ragnar.topcoder.com/api/v1/gitlab/groups/registration/618c9ccd-aef7-4a5d-8026-5b22e517826a-1558512358207
• Prototype Source Code: https://gitlab.com/hon-chatbot/hon-chatbot
• Prototype Demo: https://hon-chatbot.herokuapp.com

General Requirements

• Use the latest version of Angular framework
• Build UI Prototype based on the provided storyboard using best Responsive practices.
• For this challenge you need support phone screens
• AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
• Requests parameters to be encapsulated as object rather than individual parameters.
• Your updated submission need support unit testing add test coverage

Responsive screen size requirements:
Tablet layout

• Follow Phone layout with fluid width

Phone layout

• Provided storyboard using 750px on retina size
• All the section backgrounds and content will need to be fluid width as to the device screen
• Make sure to check that your UI code looks good in both Portrait and Landscape view

Individual Requirements

1). Welcome Screen
DESKTOP VERSION
Screenshot: Desktop_01_landing.png

• Update the buttons color.
• Update the text, follow storyboard
• At the first time before user logged in, need take to the next screen that allow user to pick these button options (Screenshot: Desktop_02_options.png)

Existing user login
Screenshot: Desktop_03_existing_user.png

• This is for existing user
• menu on left sidebar not displayed before user logged in
• Display email address and password
• Match text in page
• This is after user typing (Screenshot: Desktop_04_existing_user.png)
• Need allow to show the masked password
• After click Continue button need show the alert and notifications options
• Before toggle set on, fields below need to be disable and enabled after user set yes for the toggles (Screenshot: Desktop_05_existing_user.png)
• Need validation for email address
• Use masking for the phone number with this format (0-124-564-5977)
• Click Continue button need take to Welcome screen, but this time all buttons should landed to the correct page

New user setup
Screenshot: Desktop_05_new_user.png

• This is for new user setup
• Need able to fill the first name and last name
• IMPORTANT: Add new field for Patient First Name and Patient Last name on this screen
• Continue button need take user to next screen to verify some fields (Screenshot: Desktop_06_new_user.png)
• Create validation for all fields (Screenshot: Desktop_07_new_user.png)
• This is after user filled data (Screenshot: Desktop_08_new_user.png)
• Next need verify the email address (Screenshot: Desktop_09_new_user.png)
• Then user take to Step 2 to fill password (Screenshot: Desktop_10_new_user.png)
• Password field need allow to show the hidden characters and must meet the requirements (Screenshot: Desktop_11_new_user.png)
• Confirm password need match with password field
• Continue button need take to Step 3 (Screenshot: Desktop_12_new_user.png)
• After fill security question need fill with question and answer (Screenshot: Desktop_13_new_user.png)
• Continue button take user to confirm paperless statements (Screenshot: Desktop_14_new_user.png)
• Toggle button to Yes need enabled related input field
• Each back button need take to previous step
• This is after user toggle to No (Screenshot: Desktop_15_new_user.png)
• Click Continue button need take to Welcome screen, but this time all buttons should landed to the correct page
• IMPORTANT: remove all pages related chatbot question about Patient, Responsible Party, Spouse, and Other rule

Express Pay
Screenshot: Desktop_16_express_pay.png

• New User Setup button need take to New user setup as explained above
• Continue button need allow user to fill Express Pay form (Screenshot: Desktop_17_express_pay.png)
• Click Continue button need take to Welcome screen, but this time all buttons should landed to the correct page

PHONE VERSION
Screenshot: M_01.1_landing.png

• On Phone, all buttons need remain use 2 rows layout
• Make sure text wrapped correctly
• Then on the button selection need move to separated rows (Screenshot: M_01.2_options.pn)

Existing user
Screenshot: M_02.A1 existing_user.png

• For phone layout, move input to separate rows
• for password field need make show link remain working like existing (Screenshot: M_02.A2 existing_user.png)
• Make rows displayed as separate rows (Screenshot: M_02.A3 existing_user.png)

New user setup
Screenshot: M_02.B1 New User.png

• This is for new user setup, move fields to separate rows
• This is screen after user filled the input (Screenshot: M_02.B2 New User.png)
• Continue button to verify some fields (Screenshot: M_02.B3 New User.png)
• This is after user filled form (Screenshot: M_02.B4 New User.png)
• Step 1 to enter email address (Screenshot: M_02.B5 New User.png)
• Step 2 to password (Screenshot: M_02.B6 New User.png)
• Password need meet the requirements (Screenshot: M_02.B7 New User.png)
• Make sure flyout remain displayed in phone viewport
• Step 3 to enter security question (Screenshot: M_02.B8 New User.png)
• Next step need confirm preferences (Screenshot: M_02.B9.1 New User.png)
• This for toggle the alert and notifications (Screenshot: M_02.B9.2 New User.png)
• When toggle off need hide another fields like on desktop version (Screenshot: M_02.B9.3 New User.png)

Express pay
Screenshot: M_02.C1 Express Pay.png

• Click New user setup button need take to new user setup flow
• Continue button need fill the express pay form (Screenshot: M_02.C2 Express Pay.png)

2). Making Payments
DESKTOP VERSION
Screenshot: D_05 Bot Typing.png

• After user logged in, chatbot need suggest the app features (D_05.1 Options.png)
• user need select option to get more response from chatbot
• Update text and color buttons like storyboard for the left sidebar.
• Update current balance look like storyboard on Current Balance (Screenshot: D_05.3 Balance Inquiry.png)
• Notice below the current balance need display Payment in Full by default.
• Click other button need load another options (Screenshot: D_05.3.0 Balance Inquiry.png)
• Each options need take to different flow refer the details below:
• Note: Put dead link for Custom button

Full Payment
Screenshot: D_05.3.1 Balance Inquiry_Payment in Full.png

• You need make payment display correct content for different payment options
• Update Payment options and Current Balance like storyboard look
• Notice we display text information below Total on Current Balance

Pay By Credit Card
Screenshot: D_05.3.2 Balance Inquiry_Payment in Full_Credit Card.png

• Match pay by credit card form like storyboard
• IMPORTANT: add these 3 new fields on credit card flow: DP Account Holder Name, DP Account Number, DP Routing Number
• After pay load the success response (Screenshot: D_05.3.3 Balance Inquiry_Payment in Full_Credit Card_Payment Paid.png)
• Then chatbot suggest another actions (Screenshot: D_05.3.4 Balance Inquiry_Payment in Full_Credit Card_Payment Paid_Next.png)

Pay with Paypal
Screenshot: D_05.4.1 Balance Inquiry_Full Payment PayPal.png

• This is flow when pay with paypal (Screenshot: D_05.4.2 Balance Inquiry_Full Payment PayPal Login.png)
• Need select bank account (Screenshot: D_05.4.3 Balance Inquiry_Full Payment PayPal Account.png)
• Then load success message (Screenshot: D_05.4.4 Balance Inquiry_Full Payment PayPal Success.png)
• Then chatbot suggest another actions (Screenshot: D_05.4.5 Balance Inquiry_Full Payment PayPal_Next.png)

Half Payment
Screenshot: D_05.5.1 Balance Inquiry_Half Payment_ACH Direct Payment.png

• This flow when user click Half payment
• Follow Current Balance content like storyboard (Screenshot: D_05.5.2 Balance Inquiry_Half Payment_ACH Direct Payment.png)
• Then user pick the ACH Direct Payment
• Show success response (Screenshot: D_05.5.3 Balance Inquiry_Half Payment_ACH Direct Payment_Payment Paid.png)
• Then chatbot suggest another action (Screenshot: D_05.5.4 Balance Inquiry_Half Payment_ACH Direct Payment_Payment Paid_Next.png)

3 Installments
Screenshot: D_05.6.1 Balance Inquiry_3_installments.png

• This 3 installments look
• Then user pick ACH Direct payment (Screenshot: D_05.6.2 Balance Inquiry_3_installments.png)
• Show success message (Screenshot: D_05.6.3 Balance Inquiry_3_installments.png)
• Then chatbot suggest another actions (Screenshot: D_05.6.4 Balance Inquiry_3_installments Copy 2.png)

6 Installments
Screenshot: D_05.7.1 Balance Inquiry_6_installments.png

• This is for 6 installments look
• Then user pick ACH Direct payment (Screenshot: D_05.7.2 Balance Inquiry_6_installments.png)
• Show success message (Screenshot: D_05.7.3 Balance Inquiry_6_installments.png)
• Then chatbot suggest another actions (Screenshot: D_05.7.4 Balance Inquiry_6_installments.png)

PHONE VERSION
Screenshot: M_05 bot typing.png

• This phone layout look
• Header and typing area need remain in fixed placement
• After user logged in, chatbot need suggest the app features.
• User need select option to get more response from chatbot (Screenshot: M_05.1 Options.png)
• This is the flow when user checking a balance (Screenshot: M_05.2 Balance Inquiry.png)
• Click buttons on the bottom will take to different flow like on desktop version (Screenshot: M_05.3 Balance Inquiry.png):
   

Full Payment

• Need same flow like desktop
• Follow mobile layout like storyboard for these screens:

Screenshot: M_05.3.1 Balance Inquiry Payment in Full.png
Screenshot: M_05.3.2 Balance Inquiry Payment in Full Credit Card.png
Screenshot: M_05.3.3 Balance Inquiry Payment in Full Credit Card Paid.png
Screenshot: M_05.3.4 Balance Inquiry Payment in Full Credit Card Paid Next.png
Screenshot: M_05.4 Balance Inquiry.png
Screenshot: M_05.4.1 Balance Inquiry Payment in Full Paypal.png
Screenshot: M_05.4.2 Balance Inquiry Payment in Full Paypal.png
Screenshot: M_05.4.3 Balance Inquiry Payment in Full Paypal.png
Screenshot: M_05.4.4 Balance Inquiry Payment in Full PayPal Paid.png
Screenshot: M_05.4.5 Balance Inquiry Payment in Full Paypal Success Next.png

Half Payment

• Need same flow like desktop
• Follow mobile layout like storyboard for these screens:

Screenshot: M_05.5.1 Balance Inquiry Half Payment.png
Screenshot: M_05.5.2 Balance Inquiry Half Payment ACH.png
Screenshot: M_05.5.3 Balance Inquiry Half Payment ACH Paid.png
Screenshot: M_05.5.4 Balance Inquiry Half Payment ACH Paid Next.png

3 Installments

• Need same flow like desktop
• Follow mobile layout like storyboard for these screens:

Screenshot: M_05.6.1 Balance Inquiry 3_Installment.png
Screenshot: M_05.6.2 Balance Inquiry 3_Installment ACH.png
Screenshot: M_05.6.3 Balance Inquiry 3_Installment ACH Paid.png
Screenshot: M_05.6.4 Balance Inquiry 3_Installment ACH Paid Next.png

6 Installments

• Need same flow like desktop
• Follow mobile layout like storyboard for these screens:

Screenshot: M_05.7.1 Balance Inquiry 6_Installment.png
Screenshot: M_05.7.2 Balance Inquiry 6_Installment ACH.png
Screenshot: M_05.7.3 Balance Inquiry 6_Installment ACH Paid.png
Screenshot: M_05.7.4 Balance Inquiry 6_Installment ACH Paid Next.png

5). Update Information
DESKTOP VERSION
Screenshot: D_06.1 Update Information.png
Screenshot: D_06.2 Update Information.png

• Make sure all text follow storyboard content.
• There will be options to go to My Profile and My Insurance

My Profile

• This is My Profile look (Screenshot: D_06.3 Update Information_About Me.png)
• Need able to edit each data
• Edit My Profile look (Screenshot: D_06.4 Update Information_About Me_Edit.png)
• Show success message after profile updated (Screenshot: D_06.5 Update Information_About Me_Update Success.png)

My Insurance
Screenshot: D_06.6 About my Insurance.png

• My Insurance displayed as table format
• Click row need load the detail (Screenshot: D_06.7 About my Insurance_Edit.png)
• Click add/edit button need load separate screen to add/modify the insurance (Screenshot: D_06.8 About my Insurance_New Insurance.png)
• Display success message when click Save button (Screenshot: D_06.9 About my Insurance_New Insurance_Updated.png)
• Then chatbot suggest another actions (Screenshot: D_06.10 About my Insurance_New Insurance_Updated_Next.png)

PHONE VERSION

• For phone layout, basically need re-use same flow like on desktop version
• But, you need make app display responsive width
• Check the screenflow below:

Screenshot: M_06 Current Balance.png
Screenshot: M_06.1 Update Information.png
Screenshot: M_06.2 Update Information.png
Screenshot: M_06.3 Update Information about me.png
Screenshot: M_06.4 Update Information about me Edit.png
Screenshot: M_06.5 Update Information about me Succeed.png
Screenshot: M_06.6 Update Information insurance.png
Screenshot: M_06.7 Update Information insurance.png
Screenshot: M_06.8 Update Information new insurance.png
Screenshot: M_06.9 Update Information insurance updated.png

6). Financial Assistance
DESKTOP VERSION
Screenshot: D_07 Financial Assistance.png

• This is Financial Assistance flow
• There’s new screen that will identify if patient has balance under $1500 and qualified to fill this form (Screenshot: D_07.1 Financial Assistance_Balance Under 1500.png)
• Match form like storyboard
• After Submit form need load the Financial Assistance steps (Screenshot: D_07.2 Financial Assistance Steps.png)

Step 1
Screenshot: D_07.3 Financial Assistance Steps_Guidelines.png

• Update page like storyboard look

Step 2
Screenshot: D_07.4 Financial Assistance Steps_Applications_Screening.png

• Update screening content and toggle options like storyboard
• Pick Yes option need load the hidden area. Follow storyboard content (Screenshot: D_07.4.1 Financial Assistance Steps_Applications_Screening Copy.png)
• This is updated Applicant information. Follow storyboard for updated fields (Screenshot: D_07.5 Financial Assistance Steps_Patient _ Applicant.png)
• This for Family section (Screenshot: D_07.6 Financial Assistance Steps_Family.png)
• Update the text and form look for this section
• Family member will auto add if user modify the Additional Household members above
• Proof of Income need match storyboard (Screenshot: D_07.7 Financial Assistance Steps_Income.png)
• Update fields for Expense like storyboard (Screenshot: D_07.8 Financial Assistance Steps_Expense.png)
• Update fields for Assets like storyboard (Screenshot: D_07.9 Financial Assistance Steps_Asset.png)
• Additional info need upload document (Screenshot: D_07.10 Financial Assistance Steps_Additional Info.png)
• This agreement look (Screenshot: D_07.11 Financial Assistance Steps_Agreement.png)
• Submit agreement need take user to Upload screen (Screenshot: D_07.12 Financial Assistance Steps_Agreement Submit.png)

Step 3
Screenshot: D_07.13 Financial Assistance Steps_Upload Document.png

• On the last step, need allow user to upload document
• This is progress when user upload document (Screenshot: D_07.14 Financial Assistance Steps_Uploading Document.png)
• Need able to upload more document (Screenshot: D_07.15 Financial Assistance Steps_Uploading Document More.png)
• This is success message look (Screenshot: D_07.16 Financial Assistance Steps_Uploading Success.png)

PHONE VERSION
Screenshot: M_07 Financial Assistance.png

• Implement responsive width for phone version
• Make all fields scrollable (Screenshot: M_07.1 Financial Assistance_Balance Under 1500 insurance updated.png)
• Current balance placed on separated row
• Steps width need fits in responsive browser width (Screenshot: M_07.2 Financial Assistance Steps.png)
• For phone version, there’s indicator on top right for current section (Screenshot: M_07.3 Financial Assistance Steps.png)
• Fields need placed on separated rows (Screenshot: M_07.4 Financial Assistance Steps_Applications_Screening.png)
• This is for applicant section (Screenshot: M_07.5 Financial Assistance Steps_Patient _ Applicant.png)
• Need same additional household members like on desktop screen (Screenshot: M_07.6 Financial Assistance Steps_Family.png)
• Re-use desktop version for correct content
• This is for Income section (Screenshot: M_07.7 Financial Assistance Steps_income.png)
• This is Expense section look (Screenshot: M_07.8 Financial Assistance Steps_Expense.png)
• This is for Assets section look (Screenshot: M_07.9 Financial Assistance Steps_Asset.png)
• This is for additional info  (Screenshot: M_07.10 Financial Assistance Steps_Additional Info.png)
• This is for agreement (Screenshot: M_07.11 Financial Assistance Steps_Agreement.png)
• After user upload the image (Screenshot: M_07.12 Financial Assistance Steps_Agreement Submit.png)
• This is for Upload Document (Screenshot: M_07.13 Financial Assistance Steps_Upload Document.png)
• This is when user Upload Document (Screenshot: M_07.14 Financial Assistance Steps_Uploading Document.png)
• Need allow to upload more document (Screenshot: M_07.15 Financial Assistance Steps_Uploading Document More.png)
• Upload success (Screenshot: M_07.16 Financial Assistance Steps_Uploading Success.png)

7). Request Submission
DESKTOP VERSION
Screenshot: D_10 Other Request.png

• Update Other request like storyboard look.
• Each links need take to separate flow

Contact Information
Screenshot: D_10.1 Other Request_Contact Information.png

• This is contact information look
• Click back need take to other request options

Request a Call from agent
Screenshot: D_10.2 Other Request_Request a call from an agent.png

• For this flow need allow user to enter the phone number
• Use masking like storyboard for phone number
• Click Submit need load the thank you message (Screenshot: D_10.3 Other Request_Request a call from an agent.png)

Office Location
Screenshot: D_10.4 Other Request_Office Location.png

• Update Office Location to show need directions
• Put dead link for now

Insurance FAQ
Screenshot: D_10.5 Other Request_Insurance FAQ.png

• Display all FAQ title by default
• This detail FAQ look, need allow user to change dropdown and load different answer (Screenshot: D_10.6 Other Request_Insurance FAQ.png)
• Use this document for complete Insurance FAQ:

Billing FAQ
Screenshot: D_10.7 Other Request_Patient Billing FAQ.png

• Display all FAQ title by default
• This detail FAQ look, need allow user to change dropdown and load different answer (Screenshot: D_10.8 Other Request_Patient Billing_FAQ.png)
• Use this document for complete Billing FAQ:

PHONE VERSION

• Build responsive width for phone version
• Let use know if you have some questions in challenge forum.

Screenshot: M_10 Office Location.png
Screenshot: M_10.A1 Office Location.png
Screenshot: M_10.A2 Office Location_Voice Recognition.png
Screenshot: M_10.A3 Office Location_Voice Recognition.png
Screenshot: M_10.B1 Contact Information.png
Screenshot: M_10.C1 Request a call from an agent.png
Screenshot: M_10.C2 Request a call from an agent.png
Screenshot: M_10.D1 FAQ Insurance.png
Screenshot: M_10.D2 FAQ Insurance.png
Screenshot: M_10.E1 FAQ Patient Billing.png
Screenshot: M_10.E2 FAQ Patient Billing.png

8). Upload

• user see upload screen when click attachment icon on the header bar
• Need build this to be responsive on phone layout.
• Follow these screens for how it look on phone layout:

Screenshot: M_09 upload.png
Screenshot: M_09.1 upload.png
Screenshot: M_09.2 upload.png
Screenshot: M_09.3 upload.png
Screenshot: M_09.4 upload.png
Screenshot: M_09.5 upload.png

Final Submission Guidelines

CODE 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 on your reason for any validation errors. Use the validators listed in 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
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines
- Put clear comment/documentation for all AngularJS components
- 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.

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.

Web Browsers Requirements
Your submission must look and work consistently across these following browsers on the latest versions:  
- IE11,  
- Edge,
- Chrome on iPhone,
- Safari on iPhone,
- Firefox on iPhone
IMPORTANT: Testing on Mobile Screen Sizes!

What To Submit?
- Create clear documentation about how to set up your submission locally and on Heroku.
- Challenge winner need send MR to our repo
- Upload your submission to Heroku for client review, Include the link on your README.md