Simplifying Commercial Insurance Billing Through UI & Interaction Design
Project Overview
This project focused on designing a scalable, intuitive billing experience within a self-service commercial insurance platform used by both Agents and Insured customers. The goal was to enable users to independently manage billing accounts, understand financial activity, and navigate complex account structures without relying on support channels.
The billing ecosystem included multiple billing accounts nested under a single insured account, with each billing account containing multiple policies. This introduced significant complexity in how information needed to be structured, displayed, and interacted with across the experience.
My Contributions
I led the interaction and UI design for the billing experience, working closely with Product, Engineering, and business stakeholders throughout an iterative design process. My contributions included:
-
Defining information architecture to support complex account hierarchies
-
Designing navigation patterns that improved discoverability across billing accounts
-
Creating scalable UI systems to visually communicate relationships between accounts and policies
-
Iterating on designs through stakeholder reviews and usability feedback
-
Collaborating with engineering to ensure feasibility and consistency in implementation
The Challenge
The core challenge was the inherent complexity of billing structures:
-
Multiple billing accounts tied to a single insured entity
-
Multiple policies grouped under each billing account
-
Large volumes of transaction data with varying financial implications
Early iterations revealed that simply presenting the data was not enough, the structure and visual hierarchy of the UI needed to do the heavy lifting in helping users interpret and navigate the information. Users, especially agents managing multiple clients, needed to quickly answer questions like:
-
Which account does this charge belong to?
-
What policies are tied to this balance?
-
Is this transaction increasing or decreasing what is owed?
Design Approach
Billing to Scale
Reflects the relationship between insured accounts, billing accounts, policies, and transactions through clear visual nesting, card grouping, and spacing.
Progressive Disclosure
Breaks down complex information into manageable sections, with expandable areas for secondary details like billing settings and payment methods.
Inline and Contextual Actions
Places actions (Make a Payment, Edit) close to relevant data, reducing friction and improving task flow.
Persistent Sidebar Navigation
Enables quick switching between billing accounts while maintaining context within the overall insured account.
Segmented Filtering (Active/Upcoming/Inactive)
Reduces cognitive load by allowing users to focus only on relevant policy states.
Card-based Summaries
Surfaces key financial information in digestible, scannable formats.
Semantic Color Usage
Uses color intentionally to convey meaning; such as displaying negative values in green to indicate a positive impact on the account.
Status Indicators
Communicates payment states at a glance.
Structured Data Tables
Presents dense financial data (installments, transactions) using clear alignment, consistent formatting, and strong visual hierarchy for readability.
Pagnation for Large Datasets
Ensures performance and usability when navigating long transaction histories.
Transaction History Clarity
Scalable for High-Volume Data
Designed to handle large transaction histories without sacrificing readability or performance.
Disambiguation of Financial Actions
Clearly distinguishes between system-generated events (audits, renewals) and user-driven actions (payments), helping users understand why a balance changed.
Contextual Guidance at Point of Need
Lightweight helper text reduces confusion around how different values impact the account without requiring external documentation.
Audit-Friendly Transparency
Chronological structure and detailed descriptors support traceability for agents managing multiple accounts.
Embedded Document Retrieval
Direct access to invoices and related files streamlines workflows and eliminates unnecessary navigation.
Key Outcomes
Impact
By leveraging thoughtful interaction design and clear UI hierarchy, the experience transformed from complex and overwhelming to structured, intuitive, and user-friendly. The redesigned billing experience significantly improved usability and reduced friction for both Agents and Insured users.
-
A measurable reduction in billing-related support calls to operating units
-
Improved user confidence in navigating and understanding billing information
-
Faster task completion for common workflows like locating accounts and reviewing transactions
Design System Contributions & Usage
By grounding the experience in reusable components and patterns, the design not only improved the billing workflow but also strengthened overall product consistency and accelerated future feature development. This work also contributed to and leveraged a growing design system, ensuring consistency and scalability across the platform.