Back to Projects

Broker Flow — Multi-Tenant Insurance Application System

Senior Frontend Architect · 2022

A sophisticated multi-tenant broker flow system streamlining insurance applications for multiple broker partners — branded white-label experiences, real-time validation, and consistent performance across all broker variations, built within the PolicyAdvisor ecosystem.

Key Metrics & Outcomes

  • Form completion +35%; validation errors −50%
  • 40% faster submission; 70% less code duplication
  • 100+ fields, 15+ broker themes, 0 form-state errors
  • New broker onboarding: weeks → <3 days
  • 100% WCAG 2.1 AA on form controls

Project Overview

Situation

Insurance applications required complex multi-step forms with 100+ fields, but existing solutions had high abandonment, validation errors, and no brand consistency across broker partners.

Task

Architect a multi-tenant broker flow with intuitive navigation, real-time validation, input masking, and dynamic brand customization for 15+ brokers while maximizing code reuse.

Action

Built a multi-tenant theming system with dynamic brand customization; implemented Vee-validate with custom rules and Vue-mask for data integrity; created a progressive form wizard with step navigation and progress tracking; developed 30+ reusable form components; managed complex state with Vuex/Pinia; added auto-save and responsive design.

Result

Form completion +35%, validation errors −50%, 40% faster submissions, and a branded white-label system driving broker adoption with consistent UX across all variations.

Implementation 2

Situation

Complex form state across steps with validation dependencies frustrated users, and consistent UI/UX across 15+ broker themes while maintaining reusability was a significant architectural challenge.

Task

Handle cross-step validation dependencies, ensure consistent UX across all broker themes, and keep code duplication near zero.

Action

Designed Vuex/Pinia state architecture for cross-step form state; implemented conditional validation respecting field dependencies; built a theming engine applying broker-specific styles over shared component structure; used SCSS/BEM for maintainability; delivered WCAG 2.1-accessible controls.

Result

Zero form-state errors across 100+ fields and 15+ themes; 70% less code duplication; broker onboarding cut from weeks to <3 days; 100% WCAG 2.1 AA on form controls.

Technology Stack

  • Vue.js
  • Vuetify
  • SCSS
  • ESLint
  • Vue-mask
  • Vee-validate
  • Vue Router
  • Composition API
  • Pinia