UX Case Study · Fintech · Web App · New Product
Designing a brand-new web platform from zero — giving Nigerians access to loans from multiple accredited providers in one place, with transparent terms and a frictionless application flow.
01 — Overview
Booster is a multi-lending web platform that aggregates loan products from multiple accredited providers — letting users compare, apply, and manage loans in a single dashboard. It was designed from scratch as a 0→1 product with no existing design system or prior version to reference.
The core challenge: lending in Nigeria is fragmented, opaque, and deeply mistrusted. Users rarely know which provider to trust, what terms they're agreeing to, or what happens if something goes wrong. Booster was built to fix all of that — with transparency, clear system feedback, and a loan management experience that keeps users in control at every step.
02 — The Challenge
Building a lending platform from zero meant solving both product and UX problems simultaneously. There was no legacy to work from — but also no guardrails. Every design decision had to be justified from first principles, especially given how sensitive loan management is for users.
03 — Design Approach
04 — Auth Flow
The sign-up page opens with an immediate value statement: "Access loans from accredited providers." No fluff, no marketing speak. Users register with name, email, phone, and password — or continue with Google. The login page mirrors this clean approach with "Welcome Back" framing.
05 — Dashboard
The dashboard was designed as a true command centre. The left sidebar keeps navigation persistent and unambiguous. The main panel surfaces the user's total repayable amount immediately — with one-click access to "See details" and "Pay back." Recent transactions, loan application history, and the referral programme round out the experience. A contextual "Buy Now Pay Later" banner surfaces an additional product within the same platform.
06 — BVN Verification Flow
BVN verification was the most sensitive flow to design. Users are asked to share government identity details — a request that immediately triggers suspicion in Nigeria's digital context. The modal opens with a "Why we need your BVN?" link above the fold, an optional defer ("I'll do this later"), and a clear explanation that this unlocks loan offers. The OTP step is transparent about where the code was sent, with a countdown timer and prominent resend option.
Failure states were designed with equal care. An invalid OTP shows a red inline error with "resend or go back" — not a blocking alert. A failed verification request surfaces a warm amber warning icon with "Try again" and "Close" — keeping the user in control.
07 — Loan Application Flow
The loan application opens with a warm "Welcome to Booster" screen that frames the first loan as a guided journey — not a form to fill. Users enter an amount and select a reason for the loan before seeing offers. The offers grid surfaces providers with full transparency: loan amount, total payback, interest rate, and duration — all visible before selection. A filter panel with range sliders lets users narrow by amount, duration, and interest without leaving the modal.
08 — Loan Management
The loan details modal was designed for two states: active and overdue. Both show the same core information — total payable, loan amount, interest rate and amount — but the overdue state adds a red date label and a penalty breakdown section. Penalty fee, interest on penalty, and total penalty fee are all surfaced clearly. No hidden charges. No surprises.
09 — Pay Back Flow
The pay back flow handles a high-stakes moment — users repaying real money. The flow lets users enter a custom amount (defaulting to the full loan), choose between card or bank account, and optionally schedule a future payment. The "Schedule payment for later" toggle reveals a date picker inline, reminding users of their due date, without requiring a separate screen.
10 — Design System
| Element | Decision | Rationale |
|---|---|---|
| Blue gradient sidebar | Brand blue (#1251c5 → #0f3a9e) on the left nav | Establishes authority and trust — consistent with how Nigerian financial institutions present |
| Modal-first flows | All critical actions (BVN, loans, repayment) open in modals over the dashboard | Preserves context — users always know where they are and can abandon without losing their place |
| Blue primary CTA | Single blue button per modal, never competing with a second CTA | Reduces decision fatigue at the moment of commitment |
| Status colours | Green = approved/success, Red = overdue/error, Amber = warning | Universally legible; no ambiguity in high-stakes financial states |
| OTP input boxes | Individual square boxes per digit with visible timer countdown | Reduces entry errors; the timer manages expectation without creating panic |
11 — Impact
"Lending UX in Nigeria has historically been built around the lender's needs — not the borrower's. Booster was a chance to flip that. Every screen had to answer: does this make the user feel safer, or less?"