FINTECH
FINTECH
Built From Scratch A Custom CRM for a Fintech Sales Team That Needed More Than the Market Could Offer
Built From Scratch A Custom CRM for a Fintech Sales Team That Needed More Than the Market Could Offer
No off-the-shelf tool fit. Too costly, too complex, or missing the features that actually mattered. This is the story of how we designed a purpose-built CRM for a loan consolidation business — from stakeholder alignment and design system setup to pipeline management and a fully integrated WhatsApp inbox — and shipped something their sales team could actually use.
No off-the-shelf tool fit. Too costly, too complex, or missing the features that actually mattered. This is the story of how we designed a purpose-built CRM for a loan consolidation business — from stakeholder alignment and design system setup to pipeline management and a fully integrated WhatsApp inbox — and shipped something their sales team could actually use.
UI/UX
desktop web app
Category
AI web app
Year
2024
Project Overview
The Business Context Our client is a Chartered Accountant who helps individuals secure loans at lower interest rates — a high-trust, high-touch service that depends entirely on timely follow-ups and efficient lead management. Users land on a website, hit a CTA to schedule a call, fill out a form, and the sales team takes it from there.
The business was growing. The process wasn't keeping up.
Why build a custom CRM?
Before this project, the team evaluated third-party CRM tools. None of them fit:
The Business Context Our client is a Chartered Accountant who helps individuals secure loans at lower interest rates — a high-trust, high-touch service that depends entirely on timely follow-ups and efficient lead management. Users land on a website, hit a CTA to schedule a call, fill out a form, and the sales team takes it from there.
The business was growing. The process wasn't keeping up.
Why build a custom CRM?
Before this project, the team evaluated third-party CRM tools. None of them fit:
Option
Problem
1-Enterprise CRMs
Too expensive for the current stage
Too expensive for the current stage
2-Mid-market tools
Broken UX, steep learning curve for the sales team
Broken UX, steep learning curve for the sales team
3-Lightweight tools
Missing critical features specific to loan lead management
Missing critical features specific to loan lead management
The decision was made to build a proprietary CRM — one tailored exactly to the workflow, with a long-term plan to productise and upsell it once market-ready.
The decision was made to build a proprietary CRM — one tailored exactly to the workflow, with a long-term plan to productise and upsell it once market-ready.
FINTECH
The Problem
Problem 1 — No centralized lead management Leads were coming in from multiple entry points — website forms and WhatsApp — with no single system to track, qualify, or follow up on them consistently.
Problem 1 — No centralized lead management Leads were coming in from multiple entry points — website forms and WhatsApp — with no single system to track, qualify, or follow up on them consistently.
Problem 2 — Sales team had no structured workflow Without a proper pipeline, executives were working from spreadsheets or memory. Deals were slipping through the cracks and there was no visibility for management on where leads stood.
Problem 2 — Sales team had no structured workflow Without a proper pipeline, executives were working from spreadsheets or memory. Deals were slipping through the cracks and there was no visibility for management on where leads stood.
Problem 3 —WhatsApp leads were unmanaged A significant portion of leads entered through a WhatsApp widget on the website. There was no way to manage those conversations inside the same system — forcing executives to context-switch constantly.
Problem 3 —WhatsApp leads were unmanaged A significant portion of leads entered through a WhatsApp widget on the website. There was no way to manage those conversations inside the same system — forcing executives to context-switch constantly.
Research & Discovery
Feature Scoping with Stakeholders
The project kicked off with a structured research and scoping phase. The team compiled a comprehensive feature list based on the actual sales workflow, then presented it to stakeholders for validation and prioritisation. This ensured the product was built around real operational needs — not assumptions.
The project kicked off with a structured research and scoping phase. The team compiled a comprehensive feature list based on the actual sales workflow, then presented it to stakeholders for validation and prioritisation. This ensured the product was built around real operational needs — not assumptions.
Competitive & Benchmarking Analysis
Existing CRM tools (including the ones the client had already tried) were audited to understand:
Existing CRM tools (including the ones the client had already tried) were audited to understand:
What workflows worked well and why
What workflows worked well and why
Where the UX broke down for non-technical sales users
Where the UX broke down for non-technical sales users
What features were table-stakes vs. differentiators
What features were table-stakes vs. differentiators
User Understanding — Two Distinct User Types
User Understanding — Two Distinct User Types
A key early insight was that the CRM had two fundamentally different users with different needs and mental models:
A key early insight was that the CRM had two fundamentally different users with different needs and mental models:
User Type 1 — Staff (Sales Executives)
Daily users. Need speed, clarity, and a distraction-free interface to manage calls, update lead status, and chat with prospects — all without switching tools.
Daily users. Need speed, clarity, and a distraction-free interface to manage calls, update lead status, and chat with prospects — all without switching tools.
User Type 2 — Admin (Management / CA)
Power users who need visibility. Focused on monitoring team performance, tracking pipeline health, and making decisions from data — not day-to-day lead handling.
Power users who need visibility. Focused on monitoring team performance, tracking pipeline health, and making decisions from data — not day-to-day lead handling.
“This two-tier user model shaped every design decision that followed.”
FINTECH
Staff dashboard
Key Insights That Drove Design Decisions
Key Insights That Drove Design Decisions
A key early insight was that the CRM had two fundamentally different users with different needs and mental models:
Two users, two modes of thinking — Staff need action-oriented UIs. Admin needs data-oriented UIs. A single interface serving both would serve neither well.
Speed over features for staff — Sales executives are on calls all day. The UI needed to support fast data entry, quick status updates, and minimal clicks — not a feature-rich but slow experience.
WhatsApp can't be an island- If chat lives outside the CRM, executives will always context-switch. Bringing WhatsApp into the tool was a critical workflow fix, not just a nice-to-have.
Tailwind as a shared language — Using Tailwind CSS as the design system foundation meant designers and developers worked from the same component vocabulary, keeping the build fast and the output consistent.
Design & Iterations
A key early insight was that the CRM had two fundamentally different users with different needs and mental models:
Setting the Foundation — Design System
Before touching any product screens, the team established a design system built on Tailwind CSS. This covered:
Typography scale and colour tokens
Component library (buttons, inputs, tables, cards, badges)
Spacing and layout grid
Before touching any product screens, the team established a design system built on Tailwind CSS. This covered:
Typography scale and colour tokens
Component library (buttons, inputs, tables, cards, badges)
Spacing and layout grid
The rationale: a CRM is a data-heavy product with dozens of states. Without a system, consistency breaks fast and development slows down.
The rationale: a CRM is a data-heavy product with dozens of states. Without a system, consistency breaks fast and development slows down.
FINTECH
FLowbite design system
My Workstreams
Dashboard Designed for two distinct views — staff and admin.
Staff Dashboard: Surfaces today's tasks — assigned leads, pending follow-ups, recent WhatsApp messages, and pipeline status at a glance. Built for someone who opens this first thing and needs to know exactly what to do next.
Staff Dashboard: Surfaces today's tasks — assigned leads, pending follow-ups, recent WhatsApp messages, and pipeline status at a glance. Built for someone who opens this first thing and needs to know exactly what to do next.
Admin Dashboard: Surfaces team performance — total leads, conversion rates, pipeline stages, and individual executive activity. Designed for decision-making, not task management.
Admin Dashboard: Surfaces team performance — total leads, conversion rates, pipeline stages, and individual executive activity. Designed for decision-making, not task management.
Features
Leads Management The central hub of the CRM. Key design decisions:
List vs. Kanban toggle — Executives could switch between a table view (for bulk scanning) and a pipeline view (for stage-based management)
Quick actions inline — Status updates, call logging, and assignment without opening the full lead profile
Filter and search — Multi-parameter filtering by stage, source, assigned executive, and date range
Leads Management The central hub of the CRM. Key design decisions:
List vs. Kanban toggle — Executives could switch between a table view (for bulk scanning) and a pipeline view (for stage-based management)
Quick actions inline — Status updates, call logging, and assignment without opening the full lead profile
Filter and search — Multi-parameter filtering by stage, source, assigned executive, and date range
FINTECH
Leads screen
Features
Lead Profile The single most important screen for a sales executive — this is where the full context of a lead lives.
Designed to answer three questions instantly:
Who is this person and what do they need?
What has happened so far? (call history, notes, stage)
What should happen next? (follow-up, action items)
Key sections: Personal & loan details · Timeline of interactions · Notes · Assigned executive · Current pipeline stage · WhatsApp conversation thread
Lead Profile The single most important screen for a sales executive — this is where the full context of a lead lives.
Designed to answer three questions instantly:
Who is this person and what do they need?
What has happened so far? (call history, notes, stage)
What should happen next? (follow-up, action items)
Key sections: Personal & loan details · Timeline of interactions · Notes · Assigned executive · Current pipeline stage · WhatsApp conversation thread
FINTECH
Leads Profile
Features
Pipeline Management A visual Kanban-style pipeline giving both staff and admin a clear picture of where every lead sits in the sales funnel.
Stages mapped to the actual loan consultation workflow:
New Lead → Contacted → Qualified → Proposal Sent → Negotiation → Closed Won / Closed Lost
Each card surfaced: lead name, loan amount, assigned executive, and days in current stage — giving managers an immediate signal on where deals were stalling.
Pipeline Management A visual Kanban-style pipeline giving both staff and admin a clear picture of where every lead sits in the sales funnel.
Stages mapped to the actual loan consultation workflow:
New Lead → Contacted → Qualified → Proposal Sent → Negotiation → Closed Won / Closed Lost
Each card surfaced: lead name, loan amount, assigned executive, and days in current stage — giving managers an immediate signal on where deals were stalling.
FINTECH
Pipeline view
Features
WhatsApp Chat Interface
One of the more unique and technically interesting parts of the project. Leads that entered through the WhatsApp widget on the website needed to be handled inside the CRM — not in a separate WhatsApp tab.
Designed as an inbox-style interface within the tool:
Conversation list with unread indicators
Full chat thread with the lead
Quick-link to the lead's full profile from within the chat
Ability to log the conversation outcome directly to the lead timeline
This eliminated a major context-switching problem for executives and kept all lead communication in one place.
WhatsApp Chat Interface
One of the more unique and technically interesting parts of the project. Leads that entered through the WhatsApp widget on the website needed to be handled inside the CRM — not in a separate WhatsApp tab.
Designed as an inbox-style interface within the tool:
Conversation list with unread indicators
Full chat thread with the lead
Quick-link to the lead's full profile from within the chat
Ability to log the conversation outcome directly to the lead timeline
This eliminated a major context-switching problem for executives and kept all lead communication in one place.
FINTECH
WhatsApp integration
Testing & Validation
Feature list and flows were validated with stakeholders before design began — reducing rework mid-build
Feature list and flows were validated with stakeholders before design began — reducing rework mid-build
Designs were reviewed iteratively with the development team to ensure Tailwind component alignment
Designs were reviewed iteratively with the development team to ensure Tailwind component alignment
Sales executives (the primary users) provided feedback during the build phase, particularly on the lead profile layout and pipeline stages
Sales executives (the primary users) provided feedback during the build phase, particularly on the lead profile layout and pipeline stages
Outcomes
5% sales increase
Measurable growth in conversions in a short period post-launch
5% sales increase
Measurable growth in conversions in a short period post-launch
Faster deal closing
Sales team reported closing leads more efficiently with centralised data
Faster deal closing
Sales team reported closing leads more efficiently with centralised data
WhatsApp leads managed
First time all lead sources were handled inside a single tool
WhatsApp leads managed
First time all lead sources were handled inside a single tool
Third-party dependency eliminated
No more costly or broken external CRM tools
Third-party dependency eliminated
No more costly or broken external CRM tools
Upsell potential unlocked
Product built to be market-ready and sold to other fintech businesses
Upsell potential unlocked
Product built to be market-ready and sold to other fintech businesses
What I learned
Designing for a data-heavy SaaS product requires a completely different UX mindset — every pixel of space carries information weight
Understanding the business model (loan consolidation, CA workflow, lead lifecycle) was just as important as understanding the UI patterns
This was my first large-scale product with a deep database architecture — it fundamentally changed how I think about systems-level UX design
Designing for a data-heavy SaaS product requires a completely different UX mindset — every pixel of space carries information weight
Understanding the business model (loan consolidation, CA workflow, lead lifecycle) was just as important as understanding the UI patterns
This was my first large-scale product with a deep database architecture — it fundamentally changed how I think about systems-level UX design