Punsara WijetungaCV
← Back to work
PropTechAI-AssistedWeb AppRole-Based Workflows

Real Estate Brokerage Platform

A premium brokerage with agents in districts across Sri Lanka was running its business on spreadsheets, a paid cloud drive for recorded calls, and WhatsApp for sharing properties. Agents re-entered the same information across tools and matched buyers to properties by scanning sheets by hand. No one could see a client's full history in one place, and management had no practical way to know how a deal was progressing without asking.

Role
Product Designer (sole designer): requirements, wireframes, iterations, design system and developer handoff
Project type
Client Project
Timeline
6 months
Outcome
Roughly 10% productivity growth (client's estimate); launched and in active use
The staff dashboard of recently engaged properties, a property's communication trail of colour-tagged seller and buyer activity, and the buyer-matching window
~10%Productivity growth (client's estimate)
3 → 1Tools replaced by one platform
6Staff roles, one shared layout

01 — Discovery

Designing around how agents really work

Agents sit between two sides of every deal: sellers and landlords who list properties, and buyers and tenants looking for them. Most enquiries begin with a phone call, and the confidential client information gathered on those calls is one of the brokerage's most valuable assets.

Discovery drew on three sources. Client meetings showed how the business operated and how work moved between roles. The client's existing spreadsheets showed which client details agents were already collecting, so the system reflected their real data rather than an idealised version of it. A detailed requirements document, which arrived after the first discussions, let me validate and correct my early wireframes before costly decisions were locked in.

Four insights shaped the design. The person on the call isn't the person doing data entry: agents focused almost entirely on calls, so we introduced a dedicated data entry role and kept agent screens lean. Recorded calls were an untapped source of insight, archived but never replayed. With agents near zero in tech confidence, every extra click or hidden menu was a real risk to adoption. And deals don't end at matching: the platform had to support the full lifecycle, through to legal completion.

02 — Users & Roles

Six roles, one closed system

The platform is used only by the brokerage's own staff, and its role structure mirrors how the company operates across the country. Before designing any screens, I mapped every role in FigJam and annotated the permissions for each module: who can view, add, edit or delete, and whether that applies to all records or only the ones assigned to them.

  • CEO (super admin)Oversees the entire businessAccess: Full visibility across every district, agent, client and property
  • Second-level adminsSenior management oversightAccess: Business-wide oversight and approvals
  • District adminsManage agents and activity in their districtAccess: Their district's agents, clients and properties
  • AgentsDay-to-day client relationships: calls, matching and sharing shortlistsAccess: Their own clients and assigned properties
  • Data entry staffEnter and maintain client and property recordsAccess: Record creation and maintenance, without deal actions
  • Transaction coordinatorCollects and verifies legal documents and owns each deal through to completionAccess: Deal documents and the later stages of each transaction

Buyers and tenants never log in. They receive a standalone link showing only the properties their agent selected for them, with no access to the system itself.

Annotated Figma page for the properties, projects and buyer modules, with arrows from each screen to notes on which roles can view, add and edit
Annotated permissions for the properties and projects modules: who can view, add and edit, and what each role sees.
Annotated buyer details screen with notes on who can edit a buyer, which roles can change a buyer's state, and which roles can use each action button
Buyer permissions down to individual buttons, including which roles can move a buyer between states.

03 — Wireframing & Testing

One layout for every role

Rather than separate dashboards for each role, I designed one consistent layout around a left-hand navigation panel. The system shows or hides menu items and actions based on each user's permissions, so anyone moving between roles, or a manager helping an agent, always finds things in the same place. The core modules are the Dashboard, Sellers and Buyers, Properties (organised by house, apartment, commercial property and land), Projects, where apartment developments are saved once so new units inherit shared building details, and Staff.

Each property moves through a defined lifecycle, from registration to sold or rented, with permissions controlling which roles can move it to each stage. That gives every deal a clear, trackable status across the business.

I wired every module into a clickable Figma prototype, so each flow could be walked through end to end before development.

The client's needs evolved throughout the project, so the design went through several rounds of iteration rather than one linear pass. A new data entry role kept agent screens lean, a transaction coordinator role added mid-project extended the platform through to legal completion, and the communication trail gained attachments it was never scoped for.

I ran guided usability tests with agents. Because the interface was deliberately simple, they navigated the core flows comfortably once walked through them. The one learning curve was the communication trail itself, since an AI-generated record of client conversations was new to them. Once it was explained, they used it without difficulty, which told us the design was sound and that onboarding mattered as much as the interface.

The Figma prototype: every module wired up screen by screen, from the dashboard and sellers through to buyers, properties and data entry.
State label components for properties, sellers, buyers, franchisees and staff, beside a list of each lifecycle's states and which roles can set them
Lifecycle states for every record type, and which roles are allowed to set each one.

04 — Key Design Decisions

Three decisions that shaped the product

Very low tech confidence among agents became the defining constraint. Every flow had to need as few clicks as possible, with the most-used actions always within easy reach, while handling a large data model and keeping client information strictly confidential.

Decision 1

The communication trail

The problem

The client's biggest concern was losing track of a property's progress. One deal can involve a seller, several prospective buyers, viewings, offers and promotions over weeks or months, and that history was split across spreadsheets, audio files and WhatsApp chats.

The solution

A chronological trail for each property, powered by AI summaries of recorded calls. The calls arrive through a companion mobile app with no interface of its own: it runs in the background on agents' phones, records calls and syncs them to the system, showing a short message once each recording has synced, so agents have nothing new to learn. Every entry shows the date, who was involved, what happened, and a one-line summary such as "Visit: Done. Not happy. Need more space." Colour-coded tags mark the stakeholder (seller or buyer) and the action (visit, offer, link shared, promotion, close). Deal-stage markers such as "Sell in progress" break the timeline into phases, outcome markers like "No interest" show where a buyer dropped off, and call audio, images and shared links attach to the entry they relate to. Deleted entries stay visible as struck-through records, so the history can never be silently rewritten.

On the admin dashboard, management sees a summary of every property's trail and status. Sorting by date lets them spot stalled properties and step in before a deal goes cold.

Why it works

Tags let agents and managers scan a deal's history in seconds, and short, structured summaries replaced hours of audio no one had time to replay. The core layout stayed unchanged for the entire project, only expanding to support new roles and attachments, which showed the original structure was flexible enough to grow. This feature turned a data entry and matching tool into an insight-driven system.

CEO dashboard listing recently engaged properties with their states, with one property's communication trail open on the right and a manager comment field
Management view: recently engaged properties, with a trail opened alongside for a manager's comment.
Seller and property details page with the communication trail on the left and an Add New Entry panel on the right, with action tags and audio, image and link attachments
Adding an entry: pick who it's about, tag the action, attach the call, images or a link.
Decision 2

The client information form

The problem

The client information form is very long, and data entry staff needed to complete it quickly and accurately without feeling overwhelmed.

The solution

My first approach was a step-by-step form showing one section at a time, with a progress bar. The client wanted to see the entire form at a glance, so that design was discarded.

The final solution is a single-page form split into collapsible sections. Staff collapse each section as they complete it, so the page stays manageable without hiding anything, and mandatory and optional fields are clearly marked, so staff always know what must be filled before a profile is complete.

Why it works

It met the client's need for full visibility while keeping the original goal of reducing overwhelm, meeting a stakeholder requirement without sacrificing usability.

Add unit form for an apartment: required fields such as sale division, property ID, seller status and project at the top, then a Project Details section expanded into collapsible General Details, Tower Details, Common Facilities and Recreational Features
Collapsible sections in the add unit form: required fields first, then details that open one section at a time.
Overview of the single-page add forms for a seller, franchisee, buyer, project, apartment unit, house and land
The full set of single-page add forms, from sellers and buyers to projects, units, houses and land.
Decision 3

Automated matching and the buyer link

The problem

Matching buyers and tenants to properties meant searching spreadsheets by hand, then sending options one at a time over WhatsApp. It was slow and inconsistent, and the brokerage's property data ended up scattered across chat threads.

The solution

Once a buyer's or tenant's profile is complete, the agent generates matches with a single button, removes any properties they don't think fit, and sends the final shortlist as a standalone link. Automation does the heavy lifting, while the agent's judgement stays in control of what the client sees.

The link opens a clean, read-only page of compact cards showing a photo, property type, city, project and price. Buyers expand any card for a full gallery and complete details, and each property type has its own detail layout because buyers care about different things: houses show room counts, floor-by-floor details and amenities grouped by area; apartments show building and tower details, shared facilities and unit specifics; land shows survey approval, shape, soil, level, flood risk and boundaries.

Why it works

Collapsed cards let buyers compare options at a glance, with full detail one tap away. Because the link gives no access to the system, the brokerage can share property details freely while its client information stays fully protected.

Add New Requirement window: the buyer's criteria on the left and a list of matching properties on the right, with checkboxes to select, Request Permission buttons for other agents' listings, and a Share button for the link
Matching: the buyer's requirement on the left, generated matches on the right. The agent ticks what to send, and listings held by other agents need their permission first.
Buyer link page titled Matching properties for your requirement, with two collapsed property cards and one expanded card showing a photo gallery
The buyer link: collapsed cards to compare, expanded for the full gallery.
Three property detail layouts side by side: house details and features, apartment tower and unit details, and land details with boundaries and utilities
Detail layouts for a house, an apartment and land, each shaped around what buyers ask about.

05 — Handoff & Outcome

From scattered tools to one workflow

As the only designer working with two backend developers, one frontend developer and two QA engineers, I made the Figma file the team's single source of truth. Handoff included an annotated page with instructions for every screen and flow, a separate role map showing what each role could see and do in every module, a component library, and a design system covering colour and typography. At the client's request the product uses a single light theme, with red accents drawn from their brand. Walkthrough sessions with developers covered intent, edge cases and role behaviour.

After moving to the new platform, the brokerage reported roughly 10% productivity growth (the client's estimate), one unified workflow in place of spreadsheets, a shared drive and WhatsApp, fewer properties left sitting idle, and higher staff satisfaction thanks to far less manual work. The platform is launched and in active use, with post-launch support from one of the project's QA engineers.

Component library page with navigation items, tab sets, property-class tabs, buttons, role tabs, a document table, checkboxes, radios and a confirmation dialog
Part of the component library handed to developers: navigation, tabs, buttons, form controls, a document table and a confirmation dialog.

06 — Reflection

What I'd do differently

Research the landscape first

If I started again, I'd study existing real estate management platforms before designing, as I later did on a stock brokerage project. Understanding established patterns earlier would have sharpened my first wireframes and reduced rework.

Turn visibility into insight

The admin dashboard shows stalled properties, but admins still have to find them by sorting. Today I'd add an AI-powered summary card showing how many properties are stuck in their current stage, with alerts when a property stops moving forward.

Protect the scope

When the client requested features well beyond the agreement, design was paused at management's direction. Next time I'd document the agreed scope clearly from day one and log new requests as a future roadmap.

Showcase

A closer look

01

Staff web app

The closed workspace the brokerage's staff use every day. One layout for every role, with menus and actions shown or hidden by permission.

Dashboard of recently engaged properties grouped by date, each with its state, days in that state and latest activity
Dashboard: recently engaged properties
Sellers list with contact details, state and counts of properties and active buyers
Sellers
Seller details with contact information, state and the seller's property list
Seller details and property list
Apartment properties list with owner, address, unit number, transaction type, state, area, furnishing and parking
Properties: apartments
Property details opened on the Images tab, with a main photo, a thumbnail strip and options to add images or change their order
Property images
Sales agreement flow: seller details, agreement email preview with agreement type options, and an error when the seller has no name
Sales agreement email, including the error state
02

Offers on the trail

Offers move through the communication trail: an offer sheet goes to the buyer, their offer is verified, then shared with the landlord for a decision.

Offer sheet templates for commercial and residential properties, with header and email fields to share with the tenant
1. Send an offer sheet template
Offer verification checklist: offer sheet received, no suspicious content, consistent information, dependable referral details and the tenant's offer
2. Verify the buyer's offer
Offer form from the buyer with a title and a link, ready to share with the landlord
3. Share the offer with the landlord
Landlord's verification: offer shared, feedback received, offer accepted or declined, or a re-offer requested
4. Record the landlord's decision
03

Buyer link

The read-only page buyers and tenants receive from their agent. Each property type expands into its own detail layout; open any screen to see the full page.

Buyer link page with collapsed and expanded property cards
Matching properties
Full house detail page: gallery, location, house details, floor details and grouped features
Property details: house
Full apartment detail page: gallery, project details, facilities, tower details and unit details
Property details: apartment
Full land detail page: gallery, location, land details, boundaries and utilities
Property details: land

Next up

More work on the home page

View all projects