Salesforce to Custom Insurance Portal
Leading the UX strategy for migrating a complex Salesforce-based insurance workflow to a purpose-built portal — restructuring information architecture, eliminating manual steps, and designing streamlined quote-creation flows for real estate lending teams.
Context & Challenge
Expensive Licenses, Fragmented Workflows, Lost Paths
The insurance division of a US fintech company relied on Salesforce for managing the entire insurance quoting process tied to real estate lending. But Salesforce had become a bottleneck: licensing costs were high, the system was overloaded with unnecessary variables and flows, and teams routinely lost their path through the process.
Insurance teams spent an average of 30 minutes per quote — reviewing information across multiple sources, manually entering data into different Salesforce screens, and assembling insurance quotes to send to borrowers acquiring real estate loans. The process was fragmented, error-prone, and created communication gaps between teams.
Insurance teams spent half an hour per quote navigating Salesforce screens, pulling data from multiple sources, and manually assembling information before anything could be sent to borrowers.
Salesforce per-seat licensing was expensive and the organization was paying for a platform whose complexity far exceeded what the insurance workflow actually needed.
Salesforce contained hundreds of variables and unnecessary flows accumulated over time — teams couldn't distinguish required fields from legacy clutter, losing their path through the process.
Communication between insurance, lending, and compliance teams was fragmented — no shared workflow view, leading to duplication, delays, and handoff errors.
adjustMy Brief
Lead the UX strategy for migrating from Salesforce to a custom insurance portal — audit every existing variable and flow, restructure the information architecture, design purpose-built workflows, and deliver a production-ready design system using Material UI that reduces process time and eliminates manual overhead.
Key Decisions
Strategic Choices That Shaped the Migration
Migrating from Salesforce wasn't just a reskin — it required rethinking every variable, flow, and interaction from the ground up. These are the critical decisions that defined the approach.
| Decision | What I Chose | Why | Tradeoff |
|---|---|---|---|
| Migration strategy | Full Salesforce variable inventory before any design work | Needed to separate essential fields from legacy clutter; couldn't design without knowing the data landscape | Significant upfront research phase before visible design progress |
| Design system framework | Material UI configured with custom brand foundation tokens | MUI provided production-ready components; brand tokens ensured visual identity without reinventing the wheel | Less creative freedom than a fully custom system, but faster dev handoff |
| Prototyping approach | Gemini AI + Figma Make for rapid low-fidelity exploration | Needed to test multiple flow variations quickly with stakeholders before committing to high-fidelity | AI-generated prototypes needed manual refinement for accuracy |
| Stakeholder involvement | Continuous workshop cadence throughout every phase | Insurance workflows are domain-heavy — design decisions couldn't be made in isolation | Slower decision cycles, but higher confidence in every design choice |
Discovery & Research
Mapping the Salesforce Landscape
Before designing anything, I needed to understand exactly what lived inside Salesforce — every variable, every flow, every screen teams touched during the quoting process. This audit became the foundation for the entire migration strategy.
Research Snapshot
Salesforce Variable Inventory
Full audit of all fields, objects, and data relationships
Identified essential vs. legacy variables — significant portion of Salesforce fields were unused or redundant, creating noise that slowed teams down.
Stakeholder Workshops
Sessions with insurance, lending, and compliance teams
Mapped existing Salesforce flows against actual team needs — revealed multiple unnecessary steps and cross-team handoff gaps.
User Persona Definition
Insurance specialists, loan officers, compliance reviewers
Each persona interacted with different subsets of the same data — the portal needed role-based views, not a one-size-fits-all interface.
End-User Interviews
Direct interviews with insurance team members
Confirmed that manual data re-entry and source-switching were the primary time sinks — teams wanted fewer screens, not fewer features.
Research artifacts
System Design
From Salesforce Sprawl to Purpose-Built Architecture
The migration wasn't a 1:1 translation — it was a complete rethink of the information architecture, eliminating legacy variables and designing workflows around how insurance teams actually work.
Quote Creation Workflow
Streamlined step-by-step flow replacing the fragmented Salesforce process — auto-populates loan data and guides teams through required insurance fields.
Cross-Team Communication
Built-in handoff and notification system between insurance, lending, and compliance — eliminating email chains and manual status checks.
Role-Based Views
Each persona sees only the data and actions relevant to their role — reducing cognitive load and preventing accidental edits to unrelated fields.
Documentation & Compliance
Automated audit trail and document generation for regulatory compliance — replacing manual record-keeping in Salesforce.
Quote-Creation Workflow
Loan Trigger
- Loan application received
- Property data auto-pulled
- Insurance task created
Data Assembly
- Property details consolidated
- Coverage requirements mapped
- Borrower info pre-filled
- Required docs flagged
Quote Building
- Coverage options configured
- Premium calculations
- Team review / approve
- Compliance validation
Delivery
- Quote sent to borrower
- Audit trail logged
- Status updated for all teams
- Follow-up scheduled
Migration Phases
The migration was structured in three phases — each building on validated deliverables from the previous phase, reducing risk and maintaining stakeholder alignment throughout.
Phase 1
Audit & Architecture
- Salesforce variable inventory and cleanup
- Stakeholder workshops for flow validation
- User persona definition
- New information architecture
- Business strategy documentation
Phase 2
Design & Prototyping
- Low-fi prototypes for template validation
- AI-assisted prototyping (Gemini + Figma Make)
- Brand foundation + MUI configuration
- Custom Figma component library
- High-fidelity prototypes and flows
Phase 3
Validation & Handoff
- Stakeholder review workshops per section
- End-user interview feedback loops
- Usability testing workshops
- Production documentation for dev
- Design system governance handoff
description Decision Memo
Design System Strategy: Custom vs. Framework
Build every component from scratch with full creative control. Maximum brand flexibility but significant development overhead and longer timeline to production.
Configure MUI's production-ready component library with custom brand tokens (colors, typography, spacing). Faster dev handoff, proven accessibility, with brand identity applied through the foundation layer.
Design Evolution
From Variable Audit to Production Prototypes
The design evolved through a deliberate sequence — documentation first, low-fidelity exploration with AI tools, then high-fidelity production work built on a validated foundation.
Documentation & Strategy
Before any screens were designed, I created comprehensive documentation covering business strategy, business requirements, information architecture, and UI specifications. This document became the single source of truth for stakeholders, designers, and the development team.
AI-Assisted Low-Fidelity Prototyping
I used Gemini AI and Figma Make to rapidly generate low-fidelity prototypes for testing new flow patterns. This approach allowed me to explore multiple layout and interaction variations in a fraction of the time traditional wireframing would take — then validate the best candidates with stakeholders in workshops.
Brand Foundation & MUI Configuration
Created the design foundation layer with the company's brand identity — color palette, typography scale, spacing system, and elevation hierarchy. Then configured the Material UI framework to consume these tokens, ensuring every MUI component rendered with the correct brand look and feel.
Design Progression
The design moved through three distinct stages — each validated with stakeholders before progressing:
draftLow-Fidelity
- Template wireframes
- AI-generated flow variations
- Stakeholder workshops
- IA validation
paletteFoundation
- Brand token system
- MUI theme configuration
- Custom Figma components
- Pattern documentation
devicesHigh-Fidelity
- Full flow prototypes
- Interaction specifications
- Usability testing
- Dev-ready handoff
Custom Figma Components
Built specific Figma components tailored to the insurance domain — quote builders, coverage selectors, document checklist panels, and status trackers. Each component was designed to work within the MUI framework while addressing workflows that off-the-shelf components couldn't serve.
Validation
Continuous Testing, Not a Final Gate
Validation wasn't a single phase at the end — it was woven into every stage. Stakeholder workshops defined each section, end-user interviews validated each section, and usability testing confirmed the complete flows.
groupsStakeholder Workshops
- Section-by-section definition
- Flow and variable validation
- Business rule confirmation
- Priority alignment
person_checkEnd-User Interviews
- Section review with insurance teams
- Task-based walkthroughs
- Pain point identification
- Direct feedback capture
scienceUsability Testing
- Complete flow testing
- End-user workshop sessions
- Time-on-task measurement
- Iteration based on findings
lightbulbKey Finding
Usability testing confirmed that the biggest time savings came not from UI improvements alone, but from eliminating the source-switching pattern. In Salesforce, teams navigated 4–6 screens to assemble quote data. The new portal consolidated this into a guided flow where data auto-populated from loan records — cutting the assembly step from the primary bottleneck to a near-instant action.
Results & Impact
Measurable Outcomes
Quote-Creation Time
50%
faster
Data Sources
Unified
consolidated
Manual Steps
Automated
data handling
Team Communication
Integrated
cross-team visibility
Deliverables
Reflections