Quiz 1 of 0

Customer Self-Service Portal for Insurance Claims

Sonu September 6, 2024

Project Title: Customer Self-Service Portal for Insurance Claims

Overview:

This project is focused on building a Customer Self-Service Portal for the insurance industry using HTML, CSS, and JavaScript. The portal allows customers to submit insurance claims, track their status, and access assistance via a chatbot integrated with a free third-party API like Dialogflow. The project should be completed within 180 minutes, implementing core features such as form handling, client-side validation, UI/UX design, and chatbot integration.


Scope of Work:

The project will consist of:

  • A front-end HTML interface for customers to submit and track insurance claims.
  • CSS styling to create a clean, responsive, and user-friendly interface.
  • JavaScript for form validation, dynamic content display, and interaction with third-party services like Dialogflow for chatbot integration.

User Stories:

  1. User Story 1: Submit a New Insurance Claim
    • As a customer, I want to submit a new insurance claim through the portal so that I can easily report incidents.
    • Acceptance Criteria:
      • The claim submission form allows input of key details such as policy number, incident description, and date of occurrence.
      • The form includes file upload functionality for attaching supporting documents.
      • Upon successful submission, the form clears, and a success message is displayed.
  2. User Story 2: Track Claim Status
    • As a customer, I want to track the status of my submitted insurance claims so that I can stay updated on the progress.
    • Acceptance Criteria:
      • A list of submitted claims is displayed with details such as claim number, submission date, and current status.
      • Each claim has a unique ID, and the status is dynamically updated on the page.
  3. User Story 3: Chatbot Assistance via Dialogflow
    • As a customer, I want to ask questions to a chatbot to receive assistance with general inquiries about the claims process.
    • Acceptance Criteria:
      • The Dialogflow chatbot is embedded on the page and can answer common insurance-related questions.
      • The chatbot can provide links to relevant resources or escalate queries to live customer service if needed.
  4. User Story 4: Access Knowledge Base
    • As a customer, I want to search a knowledge base to find articles on filing claims, insurance policies, and common questions.
    • Acceptance Criteria:
      • A search bar allows customers to search through preloaded FAQs and articles related to insurance processes.
      • The results are displayed dynamically based on the search query.

Wireframes:

1. Portal Homepage (Customer View)

----------------------------------------------------
| Insurance Customer Self-Service Portal |
----------------------------------------------------
| [File a Claim] [Track Claims] [Chatbot] |
| [Search Knowledge Base] |
----------------------------------------------------
| Recent Claims: |
|--------------------------------------------------|
| Claim Number | Status | Date Submitted |
| CLM001 | In Review | 09/05/2024 |
| CLM002 | Approved | 08/25/2024 |
----------------------------------------------------

2. Claim Submission Form

----------------------------------------------------
| Submit a New Insurance Claim |
----------------------------------------------------
| Policy Number: [_________________________] |
| Incident Date: [_________________________] |
| Incident Description: |
| [______________________________] |
| Attach Files: [Upload Button] |
----------------------------------------------------
| [Submit Claim] |
----------------------------------------------------

3. Chatbot Integration

----------------------------------------------------
| Chat with Us (AI-Powered Chatbot) |
----------------------------------------------------
| How can we assist you today? |
| [User: How do I file a claim?] |
| [Chatbot: Please click on the "Submit a Claim" button.] |
| [User: What’s my claim status?] |
| [Chatbot: Please track your claim using the dashboard.] |
----------------------------------------------------

Acceptance Criteria:

  1. Claim Submission:
    • Customers can submit a claim by filling out a form with fields such as policy number, incident date, and incident description.
    • A file upload option is provided to attach supporting documents.
    • Upon successful form submission, a confirmation message appears, and the form resets.
  2. Claim Tracking:
    • Customers can view their submitted claims in a table format that shows the claim number, submission date, and current status.
    • The data is dynamically rendered from JavaScript and updated in real-time (using a simulated data array in this case).
  3. Chatbot Integration:
    • A Dialogflow chatbot is embedded on the page and assists with frequently asked questions, such as how to file a claim or check its status.
    • The chatbot can provide relevant links or escalate to live support if necessary.
  4. Knowledge Base:
    • The user can search a knowledge base via a search bar, and results are dynamically rendered below based on the search query.
    • Common insurance-related articles are preloaded and searchable.

Step-by-Step Development Process (For 180 Minutes):

1. HTML Structure (30 Minutes):

  • Homepage Layout:
    • Set up a basic HTML layout with a navigation bar containing links to “File a Claim,” “Track Claims,” and “Chatbot.”
    • Create the main content area for displaying recent claims and providing a search bar for the knowledge base.
  • Claim Submission Form:
    • Add the form elements such as text input for policy number, date input for incident date, and a textarea for incident description.
    • Include a file upload button for attaching documents.
  • Claim Tracking Section:
    • Create a table layout for displaying submitted claims.

2. CSS Styling (30 Minutes):

  • General Layout:
    • Style the page with a responsive design using Flexbox or CSS Grid to ensure the layout is clean and adapts to mobile devices.
    • Use basic styling to enhance form elements and the navigation bar.
  • Form Validation Feedback:
    • Style the error messages and success notifications for form validation using simple CSS rules (e.g., green for success, red for error).
  • Hover Effects and Responsiveness:
    • Add hover effects on buttons and ensure all sections (form, chatbot, tracking table) are mobile-friendly.

3. JavaScript for Form Validation and Claim Tracking (40 Minutes):

  • Form Validation:
    • Implement JavaScript validation to check required fields (policy number, incident date, description) before allowing submission.
    • Display real-time feedback to users if the form is incomplete.
  • Form Submission:
    • After submission, store the claim data in an array or a local simulation for now (since we’re not using a backend).
    • Display a success message and clear the form after submission.
  • Tracking Claims:
    • Dynamically render a list of claims in a table format based on data stored in the array.
    • Simulate claim status updates using JavaScript timers or mock data.

4. Chatbot Integration with Dialogflow (40 Minutes):

  • Dialogflow Setup:
    • Create a Dialogflow agent with predefined intents such as “How do I file a claim?” or “What’s my claim status?”
    • Add responses that provide helpful links or escalate queries when needed.
  • Embed Chatbot:
    • Use the Dialogflow integration script and embed the chatbot within the HTML.
    • Style the chatbot container using CSS to match the rest of the portal.

5. Knowledge Base Search (30 Minutes):

  • Search Functionality:
    • Create a simple search bar that allows users to enter queries.
    • Preload a few articles (stored as an array or objects in JavaScript) related to common insurance questions.
  • Dynamic Results Rendering:
    • Filter and display matching articles below the search bar based on the user’s input using JavaScript.

6. Testing and Final Adjustments (10 Minutes):

  • Test the form submission, chatbot interactions, and claim tracking features.
  • Ensure responsiveness and UI consistency across devices.
  • Refine the chatbot responses if needed, and ensure the search feature for the knowledge base works as expected.

Conclusion:

This intermediate-level Customer Self-Service Portal for insurance claims, built using HTML, CSS, and JavaScript, provides core functionalities like claim submission, status tracking, chatbot integration with Dialogflow, and a knowledge base search. The project should be completed within 180 minutes, focusing on front-end development concepts, form validation, UI/UX design, and external API integration. This project provides a practical solution for self-service in the insurance industry, allowing customers to manage their claims efficiently.

Please enable JavaScript in your browser to complete this form.
NOTE: Begin your video by talking about your experience at CareerPhi, experience of building this project and then continue. Describe your code and project in depth, don’t cut corners. You can upload your video on Google Drive or similar and keep sharing as “Anyone with the link can view”. Share the Google Drive link in this box.
Remember, we are trying to build your portfolio so more recruiters start noticing you.
You consent CareerPhi may use the content on various platforms