Project Overview
Ilé is a trust-driven property operating system built for the Nigerian real estate market. The platform addresses two fundamental pain points that have plagued Nigerian property transactions for decades: fraud and opacity. By placing escrow-protected payments and KYC-based identity verification at the core of every interaction, Ilé creates a trustworthy environment where renters, landlords, buyers, sellers, realtors, and agents can transact with confidence.
The name Ilé is derived from the Yoruba word for home, a deliberate choice that grounds the product in its cultural context while signalling warmth, belonging, and rootedness.
This case study documents the end-to-end process, from initial product concept through to a fully deployed frontend demo across all six live user roles. One person. Zero shortcuts.
The Problem
Nigerian real estate is one of the most active property markets in Africa, yet it remains crippled by systemic trust deficits. There is no single platform that manages the complete lifecycle of a property transaction from discovery to completion.
- Payment fraud, funds sent directly between parties with no protection or recourse
- Identity opacity, no standardised way to verify landlords, tenants, buyers, or sellers
- Document insecurity, title deeds, C of Os, and lease agreements shared informally
- Fragmented workflows, each user type using disconnected, undigitised tools
- No escrow infrastructure, large property transactions completed on trust alone
- Poor digital experience, existing platforms are transactional directories, not operating systems
Platform Architecture, 6 Live Roles
One of the defining design challenges was building a single cohesive product that serves six fundamentally different user types without any role feeling like an afterthought. Each workspace has its own navigation, data priorities, and interaction patterns, while sharing a unified design system and visual language. A seventh workspace, Admin, is designed and planned but not yet built.
| Role | Key Capabilities |
|---|---|
| Renter | Property discovery, search & filter, rental application, lease management, rent payment via escrow, maintenance tracking, in-app messaging |
| Landlord | Portfolio management, unit management, tenant management, rent collection, maintenance operations, financial reporting |
| Buyer | Property search, saved listings & comparison, offer & negotiation flow, escrow purchase flow, mortgage calculator, document vault |
| Seller | Property listing management, offer review & negotiation, transaction tracking, document management, analytics |
| Realtor | Listing management, CRM & lead pipeline, viewing scheduler, deal tracking, commission tracker, brokerage workspace |
| Agent | Today dashboard, assigned viewings, field operations, deal pipeline, commission tracking, find work marketplace |
| Admin (planned) | Platform health monitoring, user & property verification queue, escrow operations, dispute resolution, fraud monitoring & risk scoring |
Design System
Ilé's design system was built from scratch to serve a data-dense, multi-role platform. Every decision, from the colour palette to the corner radius scale, was made in service of the product's core promise: trust.
IBM Plex Mono, monetary values, escrow figures, transaction IDs.
Corner radii: 6px, 10px, 14px, 20px, 28px, 999px (pills). Deliberately soft and warm, trustworthy without clinical coldness.
Every screen ships with 4 states: Loading, Empty, Error, Success. No exceptions.
Key Design Flows
A full state machine: splash and role selection → sign up with OTP verification → identity verification (ID upload and selfie match) → property verification for landlords and sellers (Title Deed, C of O). Trust signals are embedded throughout. Users understand why verification matters at every step, not just at the end.
The most critical interaction in the product, designed to be transparent at every step. Escrow explanation screen → payment method → funds held confirmation → milestone tracker (Deposit · Verification · Final Payment · Completion) → release confirmation with receipt. Users never wonder where their money is.
A chat-style negotiation thread that records every counter-offer with timestamps and party attribution. Offer states, such as Submitted, Countered, Accepted, and Rejected, surface via status chips throughout. The flow naturally leads into the escrow engine once an offer is accepted.
The Realtor workspace functions as a standalone CRM. The lead pipeline tracks prospects from New → Contacted → Viewing Scheduled → Negotiation → Closed. Commission tracking surfaces pending and released amounts per deal. Realtors can create or join a brokerage and manage agents under them.
Frontend Build
Each of the six role apps is a standalone HTML page loading React from a CDN, with JSX transpiled live in the browser by Babel. There is no bundler and no build step. It is a deliberate choice for a solo-built demo: no install step, no compile step, and every screen editable and viewable by just opening a file.
No build step is not a shortcut here. It removes an entire category of setup and tooling friction for a project still validating product direction, while keeping every screen just as real and just as live.
Process & Timeline
The entire product, from initial concept through to a fully deployed frontend, was executed as a solo project, following a deliberate sequence: design system before screens, shared components before role-specific ones, every layer verified before the next.
-
Phase 1
Brand & IdentityProduct naming (Ilé, Yoruba for home), brand strategy, colour system (Forest Trust Green + gold), typography (Hanken Grotesk + IBM Plex Mono), logo design with door-frame mark and accent grave detail. -
Phase 2
Design SystemFull token system (colour, spacing, typography, radii, elevation), component library covering all states (Loading, Empty, Error, Success), shared patterns for verification badges, escrow trackers, status chips, and trust indicators. -
Phase 3
UX & ScreensAll screens designed across the 6 live user roles plus the planned Admin workspace, onboarding state machine, all dashboards, all transactional flows (application, lease, payment, offer, negotiation, escrow), CRM. Every screen designed with 4 states. -
Phase 4
Frontend BuildCDN React, no bundler. Design system implemented as CSS custom properties. Each role app built as a standalone HTML file with in-browser Babel transpiling JSX live. Shared components and fixed demo personas kept consistent across all six apps. -
Phase 5
DeploymentDeployed as static HTML to Vercel, no build pipeline required. Database schema and backend integration are the next phase. Live at ile-by-blue-fantasy.vercel.app.
Key Design Learnings
The biggest insight: treat trust not as a feature but as a primitive, present at the component level, not bolted on at the end. The Verification Badge appears in 23 different contexts across the product. The Escrow Timeline Tracker appears in 4 different flows. This consistency is what makes the trust promise feel real.
Serving 7 fundamentally different user types on one platform required strict component architecture. The shared design system had to be expressive enough to differentiate roles visually while consistent enough that a user switching roles didn't feel lost. Solution: one shared AppShell with role-specific navigation and colour accent usage.
Nigerian users are predominantly mobile-first. Designing data-dense dashboards, rent trackers, CRM pipelines, commission tables, for 390px screens required rethinking every layout decision. Progressive disclosure, bottom navigation, and collapsible panels became essential patterns throughout.
Escrow is a concept most Nigerian property users have never encountered digitally. Designing the escrow flow required explaining the concept within the flow itself, not in a help article. The escrow explanation screen, milestone tracker, and fund status indicators were all designed to answer "where is my money?" without the user having to ask.
Outcomes & Current State
Ilé represents a complete, navigable frontend demo for one of the most ambitious proptech products built for the Nigerian market. The product is live, fully navigable, and ready for backend integration. A backend plan exists in the project's handoff documentation. The component and design token architecture is clean and shared across every role app.
What's next: Backend API (Node.js, Express, Prisma/Supabase), Paystack integration, KYC via Prembly/Youverify, real-time messaging via Socket.io, and soft launch with initial Lagos landlords and renters.
See it Live
The full demo is deployed and navigable across all six live user workspaces.