Axis Bank Insurance Portal Revamp

An end-to-end redesign of Axis Bank's web and mobile insurance portals—modernizing legacy architecture with the Subzero Design System and introducing transparent, educational conversion flows.

Shipped · Senior Product Designer · Nov 2023 — Apr 2024

+24%

Product Discoverability

+18%

Funnel Completion Rate

-22%

Checkout Drop-off Rate

100%

Subzero Token Coverage

The Catalyst & Strategic Problem

Axis Bank offers a comprehensive portfolio of insurance products across health, life, motor, and travel. However, the existing digital entry points had fallen significantly behind modern financial standards. The legacy experience suffered from three critical systemic issues:

  1. Brand & System Fragmentation: The legacy portal pre-dated Axis Bank's unified Subzero Design System. This resulted in inconsistent typography, broken visual hierarchy, and zero component reusability across web and mobile.
  2. Low Discoverability & High Cognitive Load: Insurance offerings were buried behind rigid navigation menus. Users were expected to know the exact product category they needed rather than being guided based on their life stage or financial goals.
  3. The Opacity Trap: Financial jargon, obscured policy exclusions, and complex premium calculations created immense hesitation. Because users lacked confidence in what they were purchasing, drop-off rates across application funnels remained high.

The goal was clear: re-architect the entire insurance portal across web and mobile to build an open, educational, and accessible experience that instills user trust while scaling cleanly on Subzero guidelines.


Role & Ownership

As the sole Lead Product Designer, I owned the end-to-end design lifecycle for both web and mobile channels. Working directly with one Product Manager and a dedicated engineering team, my responsibilities spanned:

  • Information Architecture & Flow Strategy: Mapping legacy purchase funnels and restructuring multi-product navigation.
  • Design System Integration: Modernizing legacy insurance UI by building comprehensive layout specs leveraging Axis Bank's Subzero tokens and component library.
  • Cross-Functional Alignment: Facilitating iterative design-engineering reviews to ensure zero technical debt during front-end implementation.

The Strategic Pivot: Balancing Education with Velocity

During flow exploration, we encountered a fundamental cross-functional friction point: How much information should we present upfront before driving a user to checkout?

The Product team initially pushed for aggressive, short conversion funnels with minimal explanatory text to maximize immediate click-throughs. However, user feedback indicated that rushing users into checkout without explaining policy nuances caused extreme friction late in the funnel—leading to abandoned applications and high customer support query volumes.

Conversely, dumping detailed policy documentation into the core flow crippled momentum and introduced unnecessary drop-offs.

Iterative Flow Optimization

We went through several back-and-forth flow iterations to balance clarity with completion speed:

  1. First Iteration (High-Friction Education): Integrated full policy feature matrices on product pages. Outcome: Caused visual clutter and high bounce rates on mobile screens.
  2. Second Iteration (Minimalist Fast-Track): Stripped out explanatory copy to focus solely on forms. Outcome: Increased drop-off at the final payment step due to lack of policy clarity.
  3. Final Shipped Architecture (Contextual Guidance): Combined clear visual benefit highlights upfront with real-time dynamic quote updates and instant "Why this matters" tooltips at key decision points.

Key Solutions & Systems Thinking

1. Subzero Design System Migration

Every component, token, and layout across mobile and web was re-architected from the ground up using Subzero. By establishing standardized auto-layout structures, accessible contrast ratios (WCAG AA), and modular card patterns, we achieved visual parity across all product tiers (Health, Term, Motor, Travel).

Axis Bank insurance product card with cover, premium, and purchase actions
Fig. 01 — Standardized insurance product card pattern on Subzero — cover details, premium, and clear next actions.

2. Demystified Product Discoverability

Instead of forcing users to guess which policy fit their needs, we redesigned the home portal around intent-based discovery:

  • Smart Product Categories: Grouping products by clear user goals (e.g., "Protect My Family", "Secure My Vehicle", "Medical Emergencies").
  • Side-by-Side Plan Comparison: Interactive, responsive comparison matrices enabling users to evaluate coverage, deductibles, and add-ons in real time.
Axis Bank Insurance portal landing page with intent-based product categories
Fig. 02 — Insurance landing page structured around life-stage goals and smart product categories.

3. Open & Transparent Communication

To counter the industry-wide distrust around hidden insurance terms, we implemented key UX transparency measures:

  • Explicit Exclusions upfront: Clearly stating what is not covered alongside benefits.
  • Dynamic Cost Breakdowns: Showing real-time adjustments to premiums as users toggle deductibles or add-on riders.

Measurable Outcomes & Business Impact

The revamped portal is currently live across Axis Bank web and mobile platforms. The adoption of the Subzero system combined with transparent purchase flows delivered strong directional performance improvements across discoverability and funnel efficiency.

Metric DimensionLegacy ExperienceRevamped Subzero Experience
Design System Compliance0% (Custom legacy code)100% Subzero Token Coverage
Device ParityBroken, non-responsive mobile viewsUnified Responsive Web & Native Mobile
Information DeliveryDense, jargon-heavy paragraphsContextual Tooltips & Progressive Disclosure
Accessibility StandardNon-compliantWCAG 2.1 AA Compliant