Patient Concierge Chatbot Web Application Desktop UI Prototype Challenge

App environment:

• NodeJS
• Angular

Basic requirements for this challenge:

• Build a Angular UI Prototype based on provided storyboard design with focus on Desktop screen only
• Need to create and load data using a JSON-server library: https://github.com/typicode/json-server
• Need to be easy to swap with actual API for the next development

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 Concierge 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

Deployment environment requirements

• localhost
• heroku

Challenge Assets:
Gdrive: https://drive.google.com/open?id=1GuCIiUwigXA_mlyceFjMa8oPS0l-7lxu
Zeplin: https://zpl.io/VYK1k1p
- Request Zeplin access on challenge forum
- Let us know if you need some design elements downloadable

General Requirements

• Use the latest version of Angular framework
• Build UI Prototype based on the provided storyboard using best Responsive practices. You only need focus on Desktop screen size, but your submission need able to expand when we support tablet and phone screens
• Create make sense flow to simulate the chatbot interaction
• Data for each page is loaded from the https://github.com/typicode/json-server. That will make next developer easy to swap with the actual REST API during development.
• 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.
• Desktop layout screen size requirements:
  • The provided storyboard is using 2732px on retina size, you need to build using 1366px for the standard view
  • In all the sections the background will cover the browser screen, while the main content area is centered.

Individual Requirements
1). Welcome Screen
Screenshot: D_01 Welcome Screen.png

• This is landing page for Patient Concierge Chatbot Web Application
• The logo needs to be placed on the left side
• Create the entire application layout using fluid width
• Chatbot image and all main navigation need to be placed centered of the content area
• Here are the main navigations needed on the app:
  • Making payments
  • Checking a balance
  • Updating Information
  • Adding Insurance
  • Financial Assistance
  • Other request
• Clicking related buttons need take the user to related screens explained below
• There are 2 buttons for Continue as Member and Continue as New User. Create different flow for both button as explained below

General Layout

• This is general layout after user continue as new user or existing member
• Left sidebar need use fixed width
• Main chat area need use fluid width as browser screen
• As possible we must avoid the browser scrollbar showing up
• Contact us and Locations links placed on the bottom left
• Match chat area like the storyboard
• Within the header there is the attachment, search and more action buttons
• User need able to write on the typing area, emoticon and voice placed on the right side of the bottom bar
• Check the related screen on those action buttons

2). New User
Screenshot: D_02.1 New User.png

• This is for new user flow.
• User enter first name (Screenshot: D_02.2 New User_Enter First Name.png)
• Then Last name (Screenshot: D_02.3 New User_Next Enter Last Name.png, Screenshot: D_02.4 New User_Enter Last Name.png)
• Then email address (Screenshot: D_02.5 New User_Email Address.png)
• Then Activate Two-Factor Authentication (Screenshot: D_02.6 New User_Multi_Factor Authentication.png)
• Click Skip take to next screen
• User need able to toggle the option and change the related text (Screenshot: D_02.7 New User_Automatic Notification.png)
• At the last step user need fill password (Screenshot: D_02.8 New User_Set Password.png)

3). Existing Member
Screenshot: D_02.9 Existing Member.png

• After click Continue as Existing Member from the landing page, need take user to this screen
• User need fill Username and password
• Both fields are required.
• Click Continue button need load Verification screen first (Screenshot: D_04 Verification.png)
• User need filled all inputs (Screenshot: D_04.1 Verification Fill.png)
• Then Account found show up (Screenshot: D_04.2 Verification_Account Found.png)
• After click continue button you need show these flow:

As Patient
Screenshot: D_03.1 As Patient.png

• By default, chatbot need display the initial message and suggest these options
• All buttons need take to different flow
• User click the Patient option (Screenshot: D_03.1.1 As Patient.png)
• Chatbot asking DOB (Screenshot: D_03.1.2 As Patient.png)
• User can type the message from the input on the bottom
• Press enter via keyboard need send the message (Screenshot: D_03.1.3 As Patient.png)
• Continue the discussion (Screenshot: D_03.1.4 As Patient.png)
• Chatbot asking address (Screenshot: D_03.1.5 As Patient.png)
• Then if verified, user suggest the following actions (Screenshot: D_03.1.6 As Patient_Verified.png)
• This is the flow when user unable to verify the data (Screenshot: D_03.1.7 As Patient_Unable to Verify.png)

As Patient
Screenshot: D_03.2 As Spouse.png

• This is when user select Spouse option (Screenshot: D_03.2.1 As Spouse.png)
• Chatbot asking DOB (Screenshot: D_03.2.2 As Spouse.png)
• User answer the question (Screenshot: D_03.2.3 As Spouse.png)
• Chatbot asking the SSN (Screenshot: D_03.2.4 As Spouse.png)
• Chatbot asking the address (Screenshot: D_03.2.5 As Spouse.png)
• Then if verified, user suggest the following actions (Screenshot: D_03.2.6 As Spouse_Verified.png)
• This message show up if chatbot unable to verify the data (Screenshot: D_03.2.7 As Spouse_Unable to Verify.png)

As Others
Screenshot: D_03.3 As Others.png

• This is when user pick the Other option (Screenshot: D_03.3.1 As Others.png)
• Chatbot asking the First Name & Last Name (Screenshot: D_03.3.2 As Others.png)
• Chatbot asking the Account Number (Screenshot: D_03.3.3 As Others.png)
• Chatbot suggest action after verified (Screenshot: D_03.3.4 As Others_Verified.png)
• This message show up if chatbot unable to verify the data (Screenshot: D_03.3.5 As Others_Unable to Verify.png)

4). Balance Inquiry

• For now need simulate this when user click the Making payment options on the left sidebar and landing page
• By default chatbot showing the typing indicator (Screenshot: D_05 Bot Typing.png)
• Some options displayed (Screenshot: D_05.1 Options.png)
• User select Balance Inquiry (Screenshot: D_05.2 Balance Inquiry.png)
• Chatbot respond with current balance (Screenshot: D_05.3 Balance Inquiry.png)
• Then user click the Full payment (Screenshot: D_05.3.1 Balance Inquiry_Payment in Full.png)
• Chatbot respond with Payment options information
• User can click buttons and links inside the Payment Options and History

Payment by Credit Card
Screenshot: D_05.3.2 Balance Inquiry_Payment in Full_Credit Card.png

• Payment by Credit Card need load this content when click the Credit Card option
• Click Pay button need load success message (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)

Payment by Paypal
Screenshot: D_05.4.1 Balance Inquiry_Full Payment PayPal.png

• This is the flow when user click the Paypal button
• User need login with Paypal account (Screenshot: D_05.4.2 Balance Inquiry_Full Payment PayPal Login.png)
• There is option to select the Bank Account (Screenshot: D_05.4.3 Balance Inquiry_Full Payment PayPal Account.png)
• Click pay button need 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)

Payment by ACH
Screenshot: D_05.5.1 Balance Inquiry_Half Payment.png

• This is the flow when user select ½ Payment button with ACH as the selected method
• Load form that user need filled (Screenshot: D_05.5.2 Balance Inquiry_Half Payment_ACH Direct Payment.png)
• Click Pay button need load the success message (Screenshot: D_05.5.3 Balance Inquiry_Half Payment_ACH Direct Payment_Payment Paid.png)
• Then Chatbot suggest another actions (Screenshot: D_05.5.4 Balance Inquiry_Half Payment_ACH Direct Payment_Payment Screenshot: Paid_Next.png)

4). Update Information
Screenshot: D_06 Current Balance.png

• Show this flow when user type Update Information or from the Updating Information menu
• Chatbot will respond with suggestions (Screenshot: D_06.1 Update Information.png)
• User select My Profile option (Screenshot: D_06.2 Update Information.png)
• Display all information about user profile (Screenshot: D_06.3 Update Information_About Me.png)
• Click edit button need load the form (Screenshot: D_06.4 Update Information_About Me_Edit.png)
• Click Save Changes button need load success message (Screenshot: D_06.5 Update Information_About Me_Update Success.png)
• This is flow when user pick My Insurance (Screenshot: D_06.6 About my Insurance.png)
• Hover on the row need display edit button
• Click the row need take to the detail screen (Screenshot: D_06.7 About my Insurance_Edit.png)
• This is when user add new insurance (Screenshot: D_06.8 About my Insurance_New Insurance.png)
• Fyi: user need able to drag & drop to the upload the insurance card image
• Click save button need load the success message (Screenshot: D_06.9 About my Insurance_New Insurance_Updated.png)
• Then after some moments, display the chatbot suggested option (Screenshot: D_06.10 About my Insurance_New Insurance_Updated_Next.png)

5). Financial Assistance
Screenshot: D_07 Financial Assistance.png

• This is after user type about Financial Assistance or from Financial Assistance menu
• A form show up and user need fill the form (Screenshot: D_07.1 Financial Assistance_Balance Under 1500.png)
• Click Submit need load the wizard step suggestion for Financial Assistance (Screenshot: D_07.2 Financial Assistance Steps.png)
• Step 1: Read Guidelines (Screenshot: D_07.3 Financial Assistance Steps_Guidelines.png)
  • User need able to scroll the content area
  • After click Agree button needs to pop up the message on top and go to the next step
• Step 2: Financial step (Screenshot: D_07.4 Financial Assistance Steps_Applications_Screening.png)
  • Need able to navigate each step on the left side
  • At the main content area need able to select more than 1 radio button
  • After user complete Screening, need set checked on marker.
    • Patient & Applicant section (Screenshot: D_07.5 Financial Assistance Steps_Patient & Applicant.png)
    • Family section (Screenshot: D_07.6 Financial Assistance Steps_Family.png)
    • Income section (Screenshot: D_07.7 Financial Assistance Steps_Income.png)
    • Expenses section (Screenshot: D_07.8 Financial Assistance Steps_Expense.png)
    • Assets section (Screenshot: D_07.9 Financial Assistance Steps_Asset.png)
    • Additional Info section (Screenshot: D_07.10 Financial Assistance Steps_Additional Info.png)
    • Agreement section (Screenshot: D_07.11 Financial Assistance Steps_Agreement.png)
    • User need able to upload the signature image (Screenshot: D_07.12 Financial Assistance Steps_Agreement Submit.png)
• Step 3: Upload document
  • The user need able to drag and drop the document (Screenshot: D_07.13 Financial Assistance Steps_Upload Document.png)
  • Need able to upload .doc, .docx, .pdf, .jpg, .png file type
  • This is progress upload look Screenshot: D_07.14 Financial Assistance Steps_Uploading Document.png)
  • Need able to upload more than 1 file to upload the document (Screenshot: D_07.15 Financial Assistance Steps_Uploading Document More.png)
  • Click Submit will load this success message (Screenshot: D_07.16 Financial Assistance Steps_Uploading Success.png)
  • After that, chat keep suggest the next actions

6). Request Submission
Screenshot: D_08 Request Information.png

• This is when user type request information or from Other Request in the menu button
• Chatbot suggest some suggestion (Screenshot: D_08.1 Request Information Options.png)
• When clicking Payment History (Screenshot: D_08.2 Request Information_History.png)
• Click Office information need take to Office Location as explained below

7). Upload Feature
Screenshot: D_09 Upload.png

• This upload feature need start when user click the attachment button on header
• After user select the credit card image (Screenshot: D_09.1 Upload.png)
• Chatbot need respond with this and user select the option (Screenshot: D_09.2 Upload.png)
• Chatbot need show the table option (Screenshot: D_09.3 Upload.png)
• Chatbot asking the confirmation (Screenshot: D_09.4 Upload.png)
• Then success message show up (Screenshot: D_09.5 Upload.png)

8). Office Location
Screenshot: D_10 Office Location.png

• This is when user select office location from this screen (Screenshot: D_08.2 Request Information_History.png)
• Then map loaded (Screenshot: D_10.1 Office Location.png)

9). Voice Recognition
Screenshot: D_10.2 Office Location_Voice Recognition.png

• This is when user click Voice Recognition button next to the input field
• Voice Recognition function no need to build for this challenge (Screenshot: D_10.3 Office Location_Voice Recognition.png)
• And return the text on chat area (Screenshot: D_10.4 Office Location_Voice Recognition.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,
- Safari,
- Firefox

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