K
Klivvr Blog

Improving Customer Conversion Through Better Onboarding

Data-driven strategies for improving customer conversion rates during fintech onboarding, from A/B testing frameworks to personalization and real-time optimization.

business12 min readBy Klivvr Engineering
Share:

In fintech, the onboarding funnel is where revenue is won or lost. Every applicant who abandons the process represents not just a lost transaction but the lifetime value of a customer relationship that never began. Yet many companies treat onboarding as a static form to fill out rather than a dynamic experience to optimize. The difference between a 30% and a 60% completion rate is often not the number of steps but the quality of each interaction.

At Klivvr, Oasis powers the onboarding experience, and optimizing conversion is an ongoing, data-driven practice. This article describes the strategies we use to measure, test, and improve onboarding conversion, covering funnel analytics, A/B testing, personalization, real-time intervention, and the feedback loops that tie everything together.

Measuring What Matters: Funnel Analytics

You cannot improve what you do not measure. The first step in any conversion optimization effort is building a comprehensive funnel analytics system that captures not just whether each step was completed but how it was completed.

interface FunnelMetric {
  stepId: string;
  visitors: number;
  completions: number;
  abandonments: number;
  errors: number;
  medianDurationMs: number;
  p90DurationMs: number;
  p99DurationMs: number;
  conversionRate: number;
}
 
interface DetailedFunnelEvent {
  eventId: string;
  customerId: string;
  sessionId: string;
  stepId: string;
  eventType: "enter" | "interact" | "error" | "complete" | "abandon";
  timestamp: Date;
  properties: Record<string, unknown>;
}
 
class FunnelAnalyticsService {
  constructor(
    private eventStore: AnalyticsEventStore,
    private metricsAggregator: MetricsAggregator
  ) {}
 
  async recordEvent(event: DetailedFunnelEvent): Promise<void> {
    await this.eventStore.insert(event);
    await this.metricsAggregator.increment(event.stepId, event.eventType);
  }
 
  async getFunnelReport(
    dateRange: DateRange,
    segment?: CustomerSegment
  ): Promise<FunnelReport> {
    const events = await this.eventStore.query({
      dateRange,
      segment,
    });
 
    const steps = this.getOrderedSteps();
    const metrics: FunnelMetric[] = [];
 
    for (const step of steps) {
      const stepEvents = events.filter((e) => e.stepId === step.id);
 
      const visitors = new Set(
        stepEvents.filter((e) => e.eventType === "enter").map((e) => e.customerId)
      ).size;
      const completions = new Set(
        stepEvents.filter((e) => e.eventType === "complete").map((e) => e.customerId)
      ).size;
      const abandonments = new Set(
        stepEvents.filter((e) => e.eventType === "abandon").map((e) => e.customerId)
      ).size;
      const errors = stepEvents.filter((e) => e.eventType === "error").length;
 
      const durations = this.calculateDurations(stepEvents);
 
      metrics.push({
        stepId: step.id,
        visitors,
        completions,
        abandonments,
        errors,
        medianDurationMs: this.percentile(durations, 0.5),
        p90DurationMs: this.percentile(durations, 0.9),
        p99DurationMs: this.percentile(durations, 0.99),
        conversionRate: visitors > 0 ? completions / visitors : 0,
      });
    }
 
    return {
      dateRange,
      segment: segment || null,
      steps: metrics,
      overallConversionRate: this.calculateOverallConversion(metrics),
    };
  }
 
  private calculateDurations(events: DetailedFunnelEvent[]): number[] {
    const customerSessions = new Map<string, { enter?: Date; complete?: Date }>();
 
    for (const event of events) {
      const session = customerSessions.get(event.customerId) || {};
      if (event.eventType === "enter") session.enter = event.timestamp;
      if (event.eventType === "complete") session.complete = event.timestamp;
      customerSessions.set(event.customerId, session);
    }
 
    return Array.from(customerSessions.values())
      .filter((s) => s.enter && s.complete)
      .map((s) => s.complete!.getTime() - s.enter!.getTime());
  }
 
  private percentile(values: number[], p: number): number {
    if (values.length === 0) return 0;
    const sorted = [...values].sort((a, b) => a - b);
    const index = Math.ceil(p * sorted.length) - 1;
    return sorted[Math.max(0, index)];
  }
 
  private calculateOverallConversion(metrics: FunnelMetric[]): number {
    if (metrics.length === 0) return 0;
    const firstStep = metrics[0];
    const lastStep = metrics[metrics.length - 1];
    return firstStep.visitors > 0 ? lastStep.completions / firstStep.visitors : 0;
  }
 
  private getOrderedSteps(): Array<{ id: string; name: string }> {
    return [
      { id: "account-creation", name: "Account Creation" },
      { id: "personal-info", name: "Personal Information" },
      { id: "address", name: "Address" },
      { id: "document-upload", name: "Document Upload" },
      { id: "selfie-verification", name: "Selfie Verification" },
      { id: "review", name: "Review & Submit" },
    ];
  }
}

The funnel report goes beyond simple conversion rates. Duration percentiles reveal whether a step is genuinely difficult (high p90 times suggest the step is confusing) or merely slow (high p99 with reasonable p50 suggests a technical issue affecting a minority of users). Error counts distinguish between drop-off due to disinterest and drop-off due to broken functionality.

A/B Testing Framework

Once you have baseline metrics, the next step is systematic experimentation. An A/B testing framework allows you to test hypotheses about what changes will improve conversion.

interface Experiment {
  id: string;
  name: string;
  description: string;
  targetStep: string;
  variants: ExperimentVariant[];
  status: "draft" | "running" | "paused" | "completed";
  startedAt: Date | null;
  endedAt: Date | null;
  requiredSampleSize: number;
}
 
interface ExperimentVariant {
  id: string;
  name: string;
  weight: number;
  config: Record<string, unknown>;
}
 
interface ExperimentAssignment {
  experimentId: string;
  variantId: string;
  customerId: string;
  assignedAt: Date;
}
 
class ExperimentService {
  constructor(
    private experimentStore: ExperimentStore,
    private assignmentStore: AssignmentStore,
    private analyticsService: FunnelAnalyticsService
  ) {}
 
  async assignVariant(
    experimentId: string,
    customerId: string
  ): Promise<ExperimentVariant> {
    const existing = await this.assignmentStore.findAssignment(
      experimentId,
      customerId
    );
 
    if (existing) {
      const experiment = await this.experimentStore.findById(experimentId);
      return experiment.variants.find((v) => v.id === existing.variantId)!;
    }
 
    const experiment = await this.experimentStore.findById(experimentId);
    if (experiment.status !== "running") {
      return experiment.variants[0];
    }
 
    const variant = this.selectVariant(experiment.variants, customerId);
 
    await this.assignmentStore.save({
      experimentId,
      variantId: variant.id,
      customerId,
      assignedAt: new Date(),
    });
 
    return variant;
  }
 
  async getExperimentResults(
    experimentId: string
  ): Promise<ExperimentResults> {
    const experiment = await this.experimentStore.findById(experimentId);
    const assignments = await this.assignmentStore.findByExperiment(experimentId);
 
    const variantResults: VariantResult[] = [];
 
    for (const variant of experiment.variants) {
      const variantCustomers = assignments
        .filter((a) => a.variantId === variant.id)
        .map((a) => a.customerId);
 
      const completions = await this.countCompletions(
        variantCustomers,
        experiment.targetStep
      );
 
      const sampleSize = variantCustomers.length;
      const conversionRate = sampleSize > 0 ? completions / sampleSize : 0;
 
      variantResults.push({
        variantId: variant.id,
        variantName: variant.name,
        sampleSize,
        completions,
        conversionRate,
      });
    }
 
    const control = variantResults[0];
    const significant = this.checkStatisticalSignificance(variantResults);
 
    return {
      experimentId,
      experimentName: experiment.name,
      variants: variantResults,
      isStatisticallySignificant: significant,
      recommendedVariant: this.findWinningVariant(variantResults, significant),
    };
  }
 
  private selectVariant(
    variants: ExperimentVariant[],
    customerId: string
  ): ExperimentVariant {
    const hash = this.hashCustomerId(customerId);
    const totalWeight = variants.reduce((sum, v) => sum + v.weight, 0);
    const target = (hash % 1000) / 1000 * totalWeight;
 
    let cumulative = 0;
    for (const variant of variants) {
      cumulative += variant.weight;
      if (target <= cumulative) return variant;
    }
 
    return variants[variants.length - 1];
  }
 
  private hashCustomerId(customerId: string): number {
    let hash = 0;
    for (let i = 0; i < customerId.length; i++) {
      const char = customerId.charCodeAt(i);
      hash = (hash << 5) - hash + char;
      hash |= 0;
    }
    return Math.abs(hash);
  }
 
  private checkStatisticalSignificance(
    results: VariantResult[]
  ): boolean {
    if (results.length < 2) return false;
 
    const control = results[0];
    const treatment = results[1];
 
    if (control.sampleSize < 100 || treatment.sampleSize < 100) {
      return false;
    }
 
    const p1 = control.conversionRate;
    const p2 = treatment.conversionRate;
    const n1 = control.sampleSize;
    const n2 = treatment.sampleSize;
 
    const pooledP = (control.completions + treatment.completions) / (n1 + n2);
    const se = Math.sqrt(pooledP * (1 - pooledP) * (1 / n1 + 1 / n2));
 
    if (se === 0) return false;
 
    const zScore = Math.abs(p1 - p2) / se;
 
    return zScore >= 1.96;
  }
 
  private findWinningVariant(
    results: VariantResult[],
    significant: boolean
  ): string | null {
    if (!significant) return null;
 
    return results.reduce((best, current) =>
      current.conversionRate > best.conversionRate ? current : best
    ).variantId;
  }
 
  private async countCompletions(
    customerIds: string[],
    targetStep: string
  ): Promise<number> {
    let count = 0;
    for (const id of customerIds) {
      const completed = await this.analyticsService.hasCompletedStep(
        id,
        targetStep
      );
      if (completed) count++;
    }
    return count;
  }
}

The A/B testing framework uses deterministic hashing for variant assignment, ensuring that a customer always sees the same variant regardless of when or how many times they access the step. Statistical significance testing prevents premature conclusions from small sample sizes.

Personalization and Adaptive Flows

Not every customer should see the same onboarding flow. A returning customer who abandoned a previous attempt needs a different experience from a first-time visitor. A customer referred by a specific channel might respond to different messaging. Personalization tailors the onboarding experience to the individual.

interface CustomerSignals {
  isReturning: boolean;
  previousAbandonment: AbandonmentData | null;
  referralSource: string | null;
  deviceType: "mobile" | "tablet" | "desktop";
  estimatedTechSavviness: "low" | "medium" | "high";
  locale: string;
  timeOfDay: number;
}
 
interface OnboardingConfiguration {
  steps: ConfiguredStep[];
  messaging: MessagingVariant;
  progressIndicator: "percentage" | "steps" | "minimal";
  helpLevel: "minimal" | "standard" | "verbose";
}
 
interface ConfiguredStep {
  id: string;
  enabled: boolean;
  layout: "compact" | "expanded" | "guided";
  prefillData?: Record<string, string>;
}
 
class PersonalizationEngine {
  async configureOnboarding(
    signals: CustomerSignals
  ): Promise<OnboardingConfiguration> {
    const steps = this.buildStepConfiguration(signals);
    const messaging = this.selectMessaging(signals);
    const progressIndicator = this.selectProgressStyle(signals);
    const helpLevel = this.selectHelpLevel(signals);
 
    return { steps, messaging, progressIndicator, helpLevel };
  }
 
  private buildStepConfiguration(signals: CustomerSignals): ConfiguredStep[] {
    const steps: ConfiguredStep[] = [
      { id: "account-creation", enabled: true, layout: "compact" },
      { id: "personal-info", enabled: true, layout: "expanded" },
      { id: "address", enabled: true, layout: "expanded" },
      { id: "document-upload", enabled: true, layout: "guided" },
      { id: "selfie-verification", enabled: true, layout: "guided" },
      { id: "review", enabled: true, layout: "compact" },
    ];
 
    if (signals.isReturning && signals.previousAbandonment) {
      const abandonedStep = signals.previousAbandonment.lastCompletedStep;
      const resumeIndex = steps.findIndex((s) => s.id === abandonedStep);
 
      for (let i = 0; i <= resumeIndex; i++) {
        steps[i].layout = "compact";
        steps[i].prefillData = signals.previousAbandonment.savedData;
      }
    }
 
    if (signals.deviceType === "mobile") {
      for (const step of steps) {
        if (step.id === "document-upload") {
          step.layout = "guided";
        }
      }
    }
 
    return steps;
  }
 
  private selectMessaging(signals: CustomerSignals): MessagingVariant {
    if (signals.isReturning) {
      return {
        welcomeMessage: "Welcome back! Let's pick up where you left off.",
        ctaText: "Continue",
        tone: "warm",
      };
    }
 
    if (signals.referralSource === "partner_bank") {
      return {
        welcomeMessage: "Complete your account setup to start using your new financial tools.",
        ctaText: "Get Started",
        tone: "professional",
      };
    }
 
    return {
      welcomeMessage: "Setting up your account takes just a few minutes.",
      ctaText: "Let's Go",
      tone: "friendly",
    };
  }
 
  private selectProgressStyle(
    signals: CustomerSignals
  ): "percentage" | "steps" | "minimal" {
    if (signals.estimatedTechSavviness === "high") return "minimal";
    if (signals.deviceType === "mobile") return "percentage";
    return "steps";
  }
 
  private selectHelpLevel(
    signals: CustomerSignals
  ): "minimal" | "standard" | "verbose" {
    if (signals.isReturning) return "minimal";
    if (signals.estimatedTechSavviness === "low") return "verbose";
    return "standard";
  }
}

Personalization is most impactful for returning customers. Pre-filling their previously entered data, skipping completed steps, and using warm "welcome back" messaging reduces the friction of re-engagement dramatically. For first-time users, the primary personalization lever is device-appropriate layouts and help levels adjusted to the estimated technical comfort of the customer.

Real-Time Intervention

Sometimes the best way to improve conversion is to intervene in real time when a customer is struggling. If a customer has been on the document upload step for more than two minutes without submitting, proactively offering help can prevent abandonment.

interface InterventionRule {
  id: string;
  trigger: InterventionTrigger;
  action: InterventionAction;
  cooldownMinutes: number;
}
 
interface InterventionTrigger {
  stepId: string;
  condition: "time_exceeded" | "multiple_errors" | "idle";
  threshold: number;
}
 
interface InterventionAction {
  type: "tooltip" | "chat_prompt" | "simplified_view" | "phone_call_offer";
  message: string;
  metadata: Record<string, unknown>;
}
 
class RealTimeInterventionEngine {
  private rules: InterventionRule[] = [];
  private cooldowns: Map<string, Date> = new Map();
 
  registerRule(rule: InterventionRule): void {
    this.rules.push(rule);
  }
 
  async evaluateSession(
    customerId: string,
    currentStep: string,
    sessionMetrics: SessionMetrics
  ): Promise<InterventionAction | null> {
    for (const rule of this.rules) {
      if (rule.trigger.stepId !== currentStep) continue;
 
      const cooldownKey = `${customerId}:${rule.id}`;
      const lastTriggered = this.cooldowns.get(cooldownKey);
      if (
        lastTriggered &&
        Date.now() - lastTriggered.getTime() < rule.cooldownMinutes * 60 * 1000
      ) {
        continue;
      }
 
      const triggered = this.checkTrigger(rule.trigger, sessionMetrics);
 
      if (triggered) {
        this.cooldowns.set(cooldownKey, new Date());
        return rule.action;
      }
    }
 
    return null;
  }
 
  private checkTrigger(
    trigger: InterventionTrigger,
    metrics: SessionMetrics
  ): boolean {
    switch (trigger.condition) {
      case "time_exceeded":
        return metrics.currentStepDurationMs > trigger.threshold;
      case "multiple_errors":
        return metrics.currentStepErrorCount >= trigger.threshold;
      case "idle":
        return metrics.timeSinceLastInteractionMs > trigger.threshold;
      default:
        return false;
    }
  }
}
 
const documentUploadInterventions: InterventionRule[] = [
  {
    id: "doc-upload-slow",
    trigger: {
      stepId: "document-upload",
      condition: "time_exceeded",
      threshold: 120_000,
    },
    action: {
      type: "tooltip",
      message: "Need help? Tap here for tips on taking a clear document photo.",
      metadata: { helpArticle: "document-photo-tips" },
    },
    cooldownMinutes: 5,
  },
  {
    id: "doc-upload-errors",
    trigger: {
      stepId: "document-upload",
      condition: "multiple_errors",
      threshold: 3,
    },
    action: {
      type: "chat_prompt",
      message: "It looks like you're having trouble uploading your document. Would you like to chat with our support team?",
      metadata: { department: "onboarding-support" },
    },
    cooldownMinutes: 10,
  },
];

Interventions must be used sparingly. A popup that appears every time a customer pauses is annoying. Cooldowns prevent rule re-triggering, and interventions are only shown for steps where data indicates genuine difficulty. The goal is to help, not to pester.

Closing the Feedback Loop

Conversion optimization is not a one-time project. It is a continuous cycle of measurement, hypothesis formation, experimentation, and learning. The feedback loop ties together all the components described above.

Every week, the funnel analytics surface the steps with the lowest conversion rates. The team formulates hypotheses about why those steps are underperforming. Hypotheses are tested through A/B experiments. Winning variants are promoted to become the default experience. Personalization rules are updated based on what the experiments reveal about different customer segments. And the cycle repeats.

The most impactful improvements we have made through this process at Klivvr were often surprisingly simple: reducing the number of form fields on the personal information step from 12 to 7 (deferring the rest to a later stage), adding a progress bar on mobile devices, and showing an example document photo before the camera opens on the document upload step. None of these required sophisticated technology. They required systematic measurement, the discipline to test rather than guess, and the infrastructure to deploy experiments safely.

Conclusion

Improving customer conversion through better onboarding is ultimately about respect for the customer's time and attention. Every unnecessary field, every confusing instruction, every avoidable error is a moment where the customer wonders whether this product is worth the effort. The strategies described here, comprehensive funnel analytics, systematic A/B testing, personalization based on customer signals, and real-time intervention for struggling customers, provide the tools to find and fix those moments.

The most important takeaway is that conversion optimization is empirical, not intuitive. Your intuition about what will improve the experience is often wrong. The A/B test tells you whether it actually does. Build the measurement infrastructure, create the experimentation capability, and let the data guide your decisions. The cumulative impact of many small, data-driven improvements is far greater than any single redesign.

Related Articles

technical

Integrating Third-Party Verification APIs

Practical strategies for integrating third-party identity verification APIs, covering adapter patterns, error handling, rate limiting, and provider management in TypeScript.

10 min read
business

Data Privacy in Customer Onboarding

Strategies for protecting customer data during the onboarding process, covering data minimization, encryption, consent management, and regulatory compliance.

9 min read
technical

Risk-Based Authentication Strategies

Implementing risk-based authentication that adapts security requirements to the threat level of each request, balancing security with user experience in TypeScript.

9 min read