Context
SACCOs (Savings and Credit Co-operatives) are the backbone of financial inclusion across Sub-Saharan Africa. In Kenya alone, over 14,000 registered SACCOs serve more than 14 million members — yet almost none offered a digital-first experience. Members still queued at offices, passbooks in hand.
Kwara's proposition was bold: build a full neobank layer on top of existing SACCO core banking systems, so members could access loans, savings, statements, and peer transfers — without the institution abandoning the trust it had built over decades.
The problem
Credit unions wanted digital products but lacked engineering capacity. Kwara's platform bridged that gap — but the real UX challenge was layered:
- SACCO core banking data models differ wildly across institutions, creating non-standardised data flows that had to be designed around
- Members ranged from digitally fluent urban professionals to first-time smartphone users in rural counties
- Compliance and internal approval workflows (e.g. loan guarantors, committee approvals) needed to be faithfully translated into async mobile flows
- Trust was fragile — any friction or error in a financial transaction could cause members to abandon the app entirely
"The interface had to feel simpler than M-PESA — but handle the complexity of a full credit union on the back end."
— Design brief, Kwara product team · 2022Design process
Contextual research
On-site SACCO visits, member interviews, operational staff shadowing across 3 counties.
Data structures first
Mapped core banking data models to UI patterns before a single screen was drawn.
Design system + flows
Built a component library from scratch in Figma, co-designed with engineers in React Native.
Usability testing
Prototype testing on Maze with 80+ participants; iterative rounds every 2 weeks.
Research & discovery
Before designing a single screen, I ran a comprehensive discovery phase covering three inputs: SACCO institution assessments, member interviews, and competitive benchmarking of digital banking apps across Africa and Southeast Asia.
What we learned from members
Members trusted their SACCO brand far more than any "app" brand. The app had to feel like the SACCO's own product — not Kwara's.
Loan guarantor flows — where members had to vouch for peers — were the single biggest drop-off point. Async approval states were confusing.
Statement downloads mattered enormously. Members used them for housing loan applications, school fee financing, and visa applications.
Push notifications for balance and transaction updates were rated the single most-wanted feature — above transfers.
Design decisions
Data structures before pixels
The most important design work happened before Figma was opened. Every SACCO on Kwara's platform had slightly different data structures for accounts, shares, loan products, and repayment schedules. I worked with the back-end team to map these into a normalised UI data model — so the same component library could flex across institutions without needing custom screens.
Design system
I built and maintained the full Kwara design system in Figma — tokens, components, patterns, and documentation — so that as the product scaled from 2 to 8 engineers, the experience stayed coherent. The system was built to mirror the React Native component API, reducing handoff friction and speeding up feature shipping.
Loan flow — the hardest problem
The multi-step loan application flow (eligibility check → guarantor selection → committee review → disbursement) was the most complex UX challenge. Each step could be blocked by an external party, and wait times ranged from hours to days. We designed explicit "pending" states, push-notification hooks at every transition, and a loan timeline view so members always knew where their application stood.
Prototype — React Native MVP
The interactive prototype below shows the complete React Native neobank MVP across onboarding, home dashboard, loan application, and account management flows. Navigate directly in the embed or open in Figma for the full annotated file.
Key flows covered in the prototype:
- Onboarding & KYC — phone verification, national ID capture, biometric consent
- Home dashboard — account summary, share balance, quick actions, notification centre
- Loan application — eligibility check, product selection, guarantor flow, document upload, status tracking
- Transfers & payments — member-to-member, withdrawal to M-PESA, scheduled payments
- Statements — date-range filter, PDF generation, share/download
Outcomes
The neobank launched to a pilot group of 3 SACCOs in Q4 2022 and rolled out to the full network through 2023. The combination of research-led design, a robust design system, and close collaboration with engineering produced measurable results:
Beyond the headline numbers, loan application completion rates improved significantly after redesigning the guarantor flow. Statement download adoption exceeded projections within the first quarter, validating the research finding that members needed documents for third-party financial processes.
What I learned
- Data architecture is UX. Investing two weeks in understanding core banking data models before opening Figma saved months of redesign later. The UI is only as good as the model it sits on.
- Trust is designed in states. In financial products, the scariest moment is ambiguity — a "pending" status with no timeline. Investing in transition states, push notifications and timeline views converted anxious users into confident ones.
- Co-design with engineers from day one. Building the design system to mirror the React Native component API meant shipping was faster and the experience drifted less from the designs than on any project I'd worked on before.
- Test with the actual audience, in the right context. Remote Maze testing had limits; in-person testing at SACCOs with real members surfaced issues — around literacy, trust language, and connectivity — that no remote session would have caught.