K
Klivvr Blog

Designing Frictionless Customer Onboarding Flows

Strategies for designing customer onboarding flows that balance regulatory compliance with user experience, reducing drop-off while maintaining security.

business10 min readBy Klivvr Engineering
Share:

Customer onboarding is the first real interaction a person has with your financial product. It is also the moment when the largest number of potential customers abandon the process. Industry data consistently shows that fintech onboarding flows lose between 40% and 70% of applicants before completion. Every unnecessary field, confusing instruction, or unexplained delay pushes that number higher.

At Klivvr, Oasis powers the onboarding experience for our financial products. Over the past year, we have iterated extensively on onboarding flow design, reducing drop-off rates by more than 35% while maintaining full regulatory compliance. This article shares the strategies and technical approaches that made the biggest difference.

Understanding Where Customers Drop Off

Before optimizing anything, we needed to understand where customers were leaving. We instrumented every step of the onboarding flow with detailed analytics events and built a funnel visualization that showed conversion rates between each step.

interface OnboardingStep {
  id: string;
  name: string;
  requiredFields: string[];
  estimatedDurationSeconds: number;
  isBlocking: boolean;
}
 
interface FunnelEvent {
  customerId: string;
  stepId: string;
  action: "started" | "completed" | "abandoned" | "error";
  timestamp: Date;
  metadata: Record<string, unknown>;
  durationMs: number;
}
 
class OnboardingFunnel {
  private steps: OnboardingStep[];
  private analytics: AnalyticsService;
 
  constructor(steps: OnboardingStep[], analytics: AnalyticsService) {
    this.steps = steps;
    this.analytics = analytics;
  }
 
  async trackStepStart(customerId: string, stepId: string): Promise<void> {
    await this.analytics.track({
      customerId,
      stepId,
      action: "started",
      timestamp: new Date(),
      metadata: { stepIndex: this.getStepIndex(stepId) },
      durationMs: 0,
    });
  }
 
  async trackStepCompletion(
    customerId: string,
    stepId: string,
    durationMs: number
  ): Promise<void> {
    await this.analytics.track({
      customerId,
      stepId,
      action: "completed",
      timestamp: new Date(),
      metadata: {
        stepIndex: this.getStepIndex(stepId),
        durationMs,
      },
      durationMs,
    });
  }
 
  async getDropOffReport(
    dateRange: DateRange
  ): Promise<DropOffReport> {
    const events = await this.analytics.queryEvents(dateRange);
    const stepMetrics: Map<string, StepMetrics> = new Map();
 
    for (const step of this.steps) {
      const started = events.filter(
        (e) => e.stepId === step.id && e.action === "started"
      ).length;
      const completed = events.filter(
        (e) => e.stepId === step.id && e.action === "completed"
      ).length;
      const abandoned = events.filter(
        (e) => e.stepId === step.id && e.action === "abandoned"
      ).length;
 
      stepMetrics.set(step.id, {
        stepName: step.name,
        started,
        completed,
        abandoned,
        conversionRate: started > 0 ? completed / started : 0,
        averageDurationMs: this.calculateAverageDuration(events, step.id),
      });
    }
 
    return { dateRange, steps: Object.fromEntries(stepMetrics) };
  }
 
  private getStepIndex(stepId: string): number {
    return this.steps.findIndex((s) => s.id === stepId);
  }
 
  private calculateAverageDuration(
    events: FunnelEvent[],
    stepId: string
  ): number {
    const completedEvents = events.filter(
      (e) => e.stepId === stepId && e.action === "completed"
    );
    if (completedEvents.length === 0) return 0;
    const total = completedEvents.reduce((sum, e) => sum + e.durationMs, 0);
    return total / completedEvents.length;
  }
}

The data revealed three critical insights. First, the largest drop-off occurred at the document upload step, where 28% of remaining customers abandoned. Second, customers who encountered an error during verification rarely retried. Third, the overall completion rate correlated strongly with the total time spent in the flow: customers who completed onboarding in under five minutes had a 3x higher conversion rate than those who took longer.

Progressive Information Collection

The traditional approach to onboarding is to present a long form upfront and ask the customer to fill in everything at once. This is terrible for conversion. Instead, we adopted progressive information collection: ask only for what you need at each step, and defer everything else.

The principle is simple. At account creation, we ask for an email address and password. That is it. The customer can immediately access a limited version of the product. As they need to unlock additional features (sending money, increasing limits, accessing premium services), we prompt them for the specific information required by that feature.

interface FeatureGate {
  feature: string;
  requiredVerificationLevel: VerificationLevel;
  requiredFields: string[];
  description: string;
}
 
enum VerificationLevel {
  NONE = 0,
  BASIC = 1,
  STANDARD = 2,
  ENHANCED = 3,
}
 
class ProgressiveOnboardingManager {
  private gates: FeatureGate[];
  private customerStore: CustomerStore;
 
  constructor(gates: FeatureGate[], customerStore: CustomerStore) {
    this.gates = gates;
    this.customerStore = customerStore;
  }
 
  async getRequiredSteps(
    customerId: string,
    targetFeature: string
  ): Promise<OnboardingStep[]> {
    const customer = await this.customerStore.findById(customerId);
    const gate = this.gates.find((g) => g.feature === targetFeature);
 
    if (!gate) {
      throw new Error(`Unknown feature: ${targetFeature}`);
    }
 
    if (customer.verificationLevel >= gate.requiredVerificationLevel) {
      return [];
    }
 
    const missingFields = gate.requiredFields.filter(
      (field) => !customer.hasField(field)
    );
 
    return this.buildStepsForFields(missingFields);
  }
 
  private buildStepsForFields(fields: string[]): OnboardingStep[] {
    const stepGroups: Map<string, string[]> = new Map();
 
    for (const field of fields) {
      const group = this.getFieldGroup(field);
      const existing = stepGroups.get(group) || [];
      existing.push(field);
      stepGroups.set(group, existing);
    }
 
    return Array.from(stepGroups.entries()).map(([groupName, groupFields]) => ({
      id: `step-${groupName}`,
      name: groupName,
      requiredFields: groupFields,
      estimatedDurationSeconds: groupFields.length * 15,
      isBlocking: false,
    }));
  }
 
  private getFieldGroup(field: string): string {
    const groups: Record<string, string> = {
      full_name: "personal-info",
      date_of_birth: "personal-info",
      nationality: "personal-info",
      address_line_1: "address",
      address_city: "address",
      address_postal_code: "address",
      address_country: "address",
      id_document_front: "identity-document",
      id_document_back: "identity-document",
      selfie: "biometric",
    };
    return groups[field] || "additional-info";
  }
}

This approach has a profound impact on conversion. Customers who only need basic features complete onboarding in under a minute. Customers who need enhanced features are already invested in the product by the time they reach the heavier verification steps, which makes them far more likely to complete them.

Smart Document Capture

The document upload step was our biggest drop-off point. Analysis showed that the primary cause was not reluctance to share documents but rather frustration with the upload process itself. Customers would take a blurry photo, wait for it to upload, wait for processing, and then receive an unhelpful error message telling them to try again.

We addressed this with real-time client-side quality checks and guided capture:

interface CaptureGuide {
  documentType: DocumentType;
  instructions: string[];
  qualityChecks: QualityCheck[];
  exampleImageUrl: string;
}
 
interface QualityCheck {
  name: string;
  check: (imageMetadata: ImageMetadata) => QualityResult;
  errorMessage: string;
  suggestion: string;
}
 
const passportCaptureGuide: CaptureGuide = {
  documentType: "PASSPORT",
  instructions: [
    "Place your passport on a flat, dark surface",
    "Ensure all four corners are visible",
    "Avoid glare from overhead lights",
  ],
  qualityChecks: [
    {
      name: "resolution",
      check: (meta) => ({
        passed: meta.width >= 1200 && meta.height >= 800,
        score: Math.min((meta.width * meta.height) / (1200 * 800), 1),
      }),
      errorMessage: "Image resolution is too low",
      suggestion: "Move your camera closer to the document",
    },
    {
      name: "brightness",
      check: (meta) => ({
        passed: meta.averageBrightness >= 0.3 && meta.averageBrightness <= 0.85,
        score: meta.averageBrightness >= 0.3 && meta.averageBrightness <= 0.85 ? 1 : 0.3,
      }),
      errorMessage: "Image is too dark or too bright",
      suggestion: "Try adjusting the lighting in your environment",
    },
    {
      name: "blur",
      check: (meta) => ({
        passed: meta.sharpnessScore >= 0.6,
        score: meta.sharpnessScore,
      }),
      errorMessage: "Image appears blurry",
      suggestion: "Hold your device steady and tap to focus",
    },
  ],
  exampleImageUrl: "/guides/passport-example.jpg",
};
 
class DocumentCaptureService {
  async evaluateCapture(
    imageData: Buffer,
    guide: CaptureGuide
  ): Promise<CaptureEvaluation> {
    const metadata = await this.analyzeImage(imageData);
    const results: Array<{ check: string; result: QualityResult; message?: string }> = [];
    let allPassed = true;
 
    for (const qualityCheck of guide.qualityChecks) {
      const result = qualityCheck.check(metadata);
      results.push({
        check: qualityCheck.name,
        result,
        message: result.passed ? undefined : qualityCheck.suggestion,
      });
      if (!result.passed) allPassed = false;
    }
 
    return {
      acceptable: allPassed,
      checkResults: results,
      overallScore: results.reduce((sum, r) => sum + r.result.score, 0) / results.length,
    };
  }
 
  private async analyzeImage(imageData: Buffer): Promise<ImageMetadata> {
    // Delegates to image analysis library
    return analyzeImageBuffer(imageData);
  }
}

By catching quality issues on the client side before upload, we eliminated the frustrating upload-wait-fail cycle. The guided capture experience shows customers exactly what a good photo looks like and provides real-time feedback as they position their camera. This single change reduced document-step drop-off by 40%.

Asynchronous Verification with Optimistic Access

The traditional KYC flow is fully synchronous: the customer submits documents, waits for verification, and can only access the product once approved. This creates a dead period that can last minutes or even hours, during which the customer's motivation to use the product dissipates.

We introduced optimistic access, where customers receive limited product access immediately after submitting their documents, while verification proceeds asynchronously in the background.

interface AccessPolicy {
  verificationLevel: VerificationLevel;
  allowedFeatures: string[];
  transactionLimits: TransactionLimits;
  expiresAfterHours: number;
}
 
const PROVISIONAL_ACCESS: AccessPolicy = {
  verificationLevel: VerificationLevel.NONE,
  allowedFeatures: ["view-dashboard", "receive-money", "add-card"],
  transactionLimits: {
    dailySendLimit: 0,
    dailyReceiveLimit: 500,
    singleTransactionLimit: 100,
  },
  expiresAfterHours: 48,
};
 
const BASIC_ACCESS: AccessPolicy = {
  verificationLevel: VerificationLevel.BASIC,
  allowedFeatures: ["view-dashboard", "receive-money", "send-money", "add-card", "pay-bills"],
  transactionLimits: {
    dailySendLimit: 1000,
    dailyReceiveLimit: 5000,
    singleTransactionLimit: 500,
  },
  expiresAfterHours: -1,
};
 
class AccessPolicyEngine {
  private policies: AccessPolicy[];
 
  constructor(policies: AccessPolicy[]) {
    this.policies = policies.sort(
      (a, b) => b.verificationLevel - a.verificationLevel
    );
  }
 
  resolveAccess(customer: Customer): ResolvedAccess {
    const policy = this.policies.find(
      (p) => customer.verificationLevel >= p.verificationLevel
    );
 
    if (!policy) {
      return { features: [], limits: { dailySendLimit: 0, dailyReceiveLimit: 0, singleTransactionLimit: 0 } };
    }
 
    return {
      features: policy.allowedFeatures,
      limits: policy.transactionLimits,
    };
  }
}

Provisional access gives customers something to do while verification completes. They can explore the interface, receive a first transfer, and begin to form habits around the product. By the time verification completes (often within minutes for low-risk customers), they are already engaged.

Error Recovery and Re-engagement

Despite all optimizations, some customers will encounter errors or abandon the flow. How you handle these situations determines whether those customers come back.

We built an automated re-engagement system that detects abandonment, diagnoses the likely cause, and sends targeted follow-up communications:

interface AbandonmentSignal {
  customerId: string;
  lastCompletedStep: string;
  lastAttemptedStep: string;
  errorEncountered: string | null;
  totalTimeSpentMs: number;
  abandonedAt: Date;
}
 
class ReengagementEngine {
  constructor(
    private notificationService: NotificationService,
    private templateEngine: TemplateEngine,
    private customerStore: CustomerStore
  ) {}
 
  async processAbandonment(signal: AbandonmentSignal): Promise<void> {
    const customer = await this.customerStore.findById(signal.customerId);
 
    const template = this.selectTemplate(signal);
 
    const message = this.templateEngine.render(template, {
      customerName: customer.firstName,
      lastStep: signal.lastCompletedStep,
      resumeUrl: this.buildResumeUrl(signal.customerId, signal.lastAttemptedStep),
    });
 
    const delay = this.calculateDelay(signal);
 
    await this.notificationService.scheduleNotification({
      customerId: signal.customerId,
      channel: customer.preferredChannel || "email",
      message,
      sendAt: new Date(Date.now() + delay),
    });
  }
 
  private selectTemplate(signal: AbandonmentSignal): string {
    if (signal.errorEncountered) {
      return "onboarding-error-recovery";
    }
    if (signal.lastAttemptedStep === "identity-document") {
      return "onboarding-document-help";
    }
    return "onboarding-general-reminder";
  }
 
  private calculateDelay(signal: AbandonmentSignal): number {
    const hoursSinceAbandonment =
      (Date.now() - signal.abandonedAt.getTime()) / (1000 * 60 * 60);
 
    if (hoursSinceAbandonment < 1) return 2 * 60 * 60 * 1000;
    if (hoursSinceAbandonment < 24) return 24 * 60 * 60 * 1000;
    return 72 * 60 * 60 * 1000;
  }
 
  private buildResumeUrl(customerId: string, step: string): string {
    return `https://app.klivvr.com/onboarding/resume?step=${step}&token=${this.generateResumeToken(customerId)}`;
  }
 
  private generateResumeToken(customerId: string): string {
    return signToken({ customerId, purpose: "onboarding-resume" }, "24h");
  }
}

The resume URL is critical. It takes the customer directly back to where they left off, with their previously entered information pre-filled. Asking someone to start over from scratch after they have already invested time is a guaranteed way to lose them permanently.

Conclusion

Frictionless onboarding is not about removing steps. Every step in a fintech onboarding flow exists for a regulatory or security reason. Frictionless onboarding is about removing unnecessary friction within those steps, deferring steps that are not immediately needed, providing immediate value, and recovering gracefully when things go wrong.

The strategies that made the biggest impact for Oasis were progressive information collection (ask only for what is needed now), guided document capture (prevent errors rather than reacting to them), optimistic access (let customers use the product while verification completes), and automated re-engagement (bring customers back when they drop off). Together, these strategies reduced our onboarding drop-off rate by over 35% and significantly increased the proportion of new sign-ups who become active customers.

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