The Multi-Step Flow Rail

In BiiTrust, complex actions (such as onboarding a client, originating a loan, or disbursing funds) are never displayed in cramped popup windows or modal overlays. Instead, every action is a full-page, multi-step flow (base/flow.js).

1. Anatomy of a Flow Page

Every flow follows a unified, predictable visual rail:

Eyebrow (e.g. "Origination")
Title (e.g. "Grace Wanjiru · Biashara Growth")
Sub — step 2 of 3.

 (2)  STEP 2 OF 3          UP NEXT
      The Schedule         Release
 ▬▬▬▬▬▬ ▬▬▬▬▬▬ ──────                       ← Segmented progress bar (Done • Now • Ahead)

┌─ Card ─────────────────────────────────────────────────────────────────┐
│ Form fields in an intuitive grid...                                    │
│ [ Amount Hero Input ]                                                  │
│ Mode selection cards...                                                │
└────────────────────────────────────────────────────────────────────────┘

                                                (‹) Back      Continue ›  ← Sticky footer

1. The Header & Step Rail

  • Eyebrow: Tells you the high-level business domain (e.g., Origination, Payments, Approval, Waiver).
  • Title: Clearly states who or what you are acting upon.
  • The Step Indicator: A numbered circle showing your exact place in the sequence, what the current step covers, and what follows next.
  • Segmented Bar: Visual progress segments reflecting completed steps, your current step, and upcoming steps.

2. The Form Cards

  • Intuitive Inputs: Large 46px touch-friendly fields with helpful placeholders and clear validation messages.
  • Option Mode Cards: Radio buttons and checkboxes are replaced with generous, clickable option cards that highlight cleanly when selected.
  • Hero Amount Inputs: Financial amounts are displayed in high-contrast monospace numbers with automatic currency formatting.

3. The Sticky Navigation Bar

  • Round Back Button: A circular button that steps back one screen or returns to the previous dashboard.
  • Continue Button: Smoothly validates current inputs, displays a brief ~600ms spinner, and advances the rail.
  • Confirmation / Action Button: On the final step, the button turns green (or red for dangerous/destructive actions like rejections or write-offs), requiring an explicit acknowledgement checkmark before execution.

2. Field-Grade Reliability Features

BiiTrust flows are engineered specifically for unpredictable field conditions:

1. Zero Data Loss (Draft Persistence)

As you type, every field, radio option, and checkbox is automatically remembered in your browser’s local memory (localStorage).

  • If your phone battery runs out in the field, or your connection drops, simply reopen the browser.
  • Your entire form is restored exactly where you left off.

2. Immediate File Uploads

When attaching borrower photos, national ID scans, or bank statements:

  • The file uploads to the server the instant it is selected.
  • You do not have to wait for the entire multi-step form to finish before uploads begin.
  • If an upload fails due to poor telecom signal, a red retry badge highlights that specific file while preserving the rest of your data.

3. The Task List Execution Engine

When you click the final submission button, the screen displays a live Task List:

[✓] Step 1: Create client account (Done)
[✓] Step 2: Upload national ID scan (Done)
[⟳] Step 3: Record next-of-kin contacts (Working...)
[ ] Step 4: Submit KYC file to compliance (Waiting)
  • Each operation is executed in safe sequence.
  • If a temporary network interruption occurs on Step 3, clicking Retry resumes from Step 3 without duplicating Steps 1 and 2.

4. The Done Box

Once all tasks succeed:

  • The form turns into a clean Done Box with a prominent green checkmark.
  • Displays key reference numbers (e.g., “Client registered: #CLX881149919”).
  • Provides direct forward links: “Apply for a loan”, “View client profile”, or “Return to dashboard”.