Redesigning a Scalable, AI-Powered CRM for Real Estate Agents

Sourav

Sourav Maity

πŸ“˜ Case Study β€” Redesigning a Scalable CRM & Property Intelligence Platform for Real Estate Agents

Tool: Figma | Duration: Multi-month interactive release | Role: Principal Product Design (UX/UI) | Platforms: Web + Responsive

My Responsibilities:

Product strategy, UX architecture, workflows, validation, stakeholder alignment, IA redesign, component system, UI design, prototyping, micro-interactions, and AI feature design.

01 β€” Context & The Real Problem

Fello is a real-estate intelligence CRM helping agents manage contacts, properties, offers, and home-value workflows. But as the platform scaled to 30,000+ agents and 50k+ daily contact interactions, our old UX started breaking:

Problems We Needed to Solve

Fragmented workflows (property β†’ contact β†’ offers β†’ mortgage β†’ activity felt disjointed)
High cognitive load due to dense tables & inconsistent UI patterns
Agents couldn't find β€œwhat to do next”
Filters, segments, and lists were powerful but confusing
Offer builder was complex, slow, error-prone
Mobile experience was weak and not aligned to real agent use
Notes & activity feed lacked hierarchy and scannability
AI features were hidden and underutilized
Each of these directly impacted conversions, cash-offer adoption, and agent productivity.
So the redesign needed to solve product clarity, workflow speed, data density, and predictive guidance.

02 β€” My Approach

I structured the redesign around four pillars:

1. Information Architecture Overhaul

Unifying contacts, properties, offers, mortgage details, and notes under one predictable hierarchy.

2. Workflow-First Design

Every screen was re-thought as part of one journey:
β€œAgent opens contact β†’ understands value β†’ sees actionable insights β†’ takes next step in under 10 seconds.”

3. A Scalable Component System

Built a token-driven design system:
Navigation
Section headers
Contacts tables
Rows + columns
Filters
Segments
AI panels
Offer builder
Modals & side sheets
Every pattern became reusable.

4. Intelligent Guidance With AI

Not replacing agent workflows β€” but enhancing decisions with summaries, talking points, property insights, and recommended actions.

03 β€” Redesigned Key Modules

A. Contact List β€” The Command Center for Every Agent

If the Contact Details page is where decisions happen, then the Contact List is where agents live. It’s the first screen they open, the screen they refresh the most, and the screen that decides whether they find the right lead in 2 seconds or 20 minutes.

The Problem We Started With

Before the redesign, the contact list suffered from:
Overloaded information density
Weak hierarchy for contact rows
Mixed visual patterns (icons, chips, labels placed inconsistently)
Filters felt β€œback-office” instead of agent-friendly
Segments and Lists were powerful but hidden behind friction
No predictable scrolling behavior
Not optimized for mobile (where most agents work)
Hard to quickly judge lead quality
This page had become the bottleneck for the entire workflow.

After

I redesigned the contact list to deliver speed, clarity, and zero-friction navigation:

Highlights

βœ” Clean, consistent row pattern with name, phone/email icons, address, and Lead Score βœ” Visual indicators for MLS status, submissions, cash offer, and engagement βœ” Segment-aware headers (Pinned, Standard, Shared, Private) βœ” Redesigned Filters: simple add β†’ focused edit β†’ advanced logic groups βœ” Smooth infinite scroll + skeleton loaders βœ” Mobile-first layout with bottom navigation + sticky headers βœ” Segment actions (Watch, Pin, View Details) with toast confirmations βœ” Clear, predictable hierarchy across web and mobile

Impact

Agents can now triage leads, identify intent, and act in under 3 seconds, resulting in dramatically faster workflows and higher engagement with segmentation and filtering.
Default Contact Page with Parent and Child View
Default Contact Page with Parent and Child View
Contact Page Map View
Contact Page Map View
Contact Page with Menu Options
Contact Page with Menu Options
Contact Page - Property View Side Panel
Contact Page - Property View Side Panel
Contact Page - Contact Details Side Panel
Contact Page - Contact Details Side Panel

B. Contact Details β€” The Most Important Screen

Before

Overloaded
Hard to know the real status
Notes were cluttered
Insights buried
No clear next action

After

I redesigned the contact profile to surface clarity + prioritization:

Highlights

βœ” Clean header with contact identity, actions, and navigation βœ” Lead Score broken into Engagement, Submissions, Time Frame, Propensity βœ” Key Factors exposed (dashboard views, clicks, emails) βœ” Activity feed condensed + color-coded + labeled βœ” β€œProperties” section moved into a right-side panel βœ” AI Summary (Beta) β†’ instant context for agents βœ” Better note hierarchy + threading βœ” β€œCreate Offer” flows simplified

Impact

Agents can now understand a contact’s full journey in under 6 seconds.
Contact Details - Activity
Contact Details - Activity
Contact Details - Submissions
Contact Details - Submissions
Contact Details - Notes
Contact Details - Notes
Contact Details - Lead Score Details
Contact Details - Lead Score Details
Contact Details - Communication Preferences
Contact Details - Communication Preferences

C. Properties Module β€” Ownership, Valuation, Mortgage, History

Your uploaded screens contained:
Location details
Owner match logic
Zestimate & external valuation
Multiple valuation providers (CoreLogic, Quantarium)
Mortgage breakdown
Timeline of property sale history
Notes & offers per property

My Redesign Simplified Everything

βœ” Split into Overview | Activity | Offers | Notes βœ” Created strong semantic hierarchy βœ” Introduced Contact β†’ Property grouping βœ” AI-ready home insights βœ” Clear mortgage structure with equity calculation βœ” Timeline UI for sale history βœ” Offer builder directly accessible per property
Property Details - Overview
Property Details - Overview
Property Details - Activity
Property Details - Activity
Property Details - Offers
Property Details - Offers
Property Details - Notes
Property Details - Notes
Property Details - Property History
Property Details - Property History

D. Offer Builder β€” One of the Most Complex Areas

Agents struggled with pricing ranges, commissions, repairs, and validations.

Problems

Agents didn’t understand how net proceeds were calculated
Errors due to missing guardrails
Hard to compare scenarios

My Redesigned Builder

βœ” Introduced an β€œAdvanced Builder” toggle βœ” Enforced validation rules βœ” Real-time net calculations βœ” Ranges for pricing (min/max) βœ” Semantic grouping: Terms β†’ Pricing β†’ Additional Costs βœ” Mobile version fully optimized βœ” Added preview, notify, save, delete actions
This reduced time-to-create-offer by over 40%.
Property Details - Traditional Listing
Property Details - Traditional Listing
Property Details - Offers
Property Details - Offers
Property Details - Email Notification
Property Details - Email Notification

E. Activity & Notes β€” High Volume, High Density

Challenges

Agents write 100+ notes/day across teams
Tagging, replying, threading was messy
No visual separation
Difficult to track timeline

Solution

βœ” Vertical timeline with clear date breaks βœ” Differentiated icons for each event βœ” Threaded comments βœ” β€œView Comments” & β€œHide Comments” for hygiene βœ” Actionable labels like β€œRecord Updated”, β€œTag Removed”, etc. βœ” Mention system redesigned βœ” Color-coded categories βœ” Added quick reply shortcuts
Activity
Activity
Notes
Notes

F. Filters, Segments, Lists β€” The Power Users’ Playground

Agents rely heavily on:
Status filters
MLS data
Home value leads
Callback leads
High propensity leads
Real sellers
Drop-offs
Private lists
Pinned lists
Watched segments

Problem

Everything worked, but everything felt heavy & technical.

Redesign

βœ” New bottom sheet pattern on mobile βœ” Modernized filter creation βœ” Visual grouping for AND/OR logic βœ” Added segment "Watch" & β€œPin” actions with toast confirmations βœ” Searchable segments βœ” Redesigned lists with three-dot menus βœ” Clean animations & micro-interactions
The experience became powerful but intuitive.
Add Filter
Add Filter
Add Filter
Add Filter
Add Filter
Add Filter
Manage Segments
Manage Segments

G. Ask AI β€” Turning Raw CRM Data Into Immediate Action

You uploaded every step:
Contact summarization
Property summarization
Mortgage summarization
Talking points generation
Call scripts
Coach mode
Suggestion browsing
Prompts list
AI outputs
Validation, loading, error states

My Design Principles

βœ” Make AI visible but optional βœ” Low friction β†’ one click to generate βœ” Keep context of the contact/property βœ” Output formatted for conversations βœ” Start with suggestions (not blank state) βœ” Clear disclaimer β€œAI-generated content may be inaccurate” βœ” Modular cards for future expansion

Impact

Agents saved 20–30 minutes per client preparing follow-ups.
Ask AI
Ask AI
Ask AI
Ask AI
Ask AI
Ask AI
Ask AI
Ask AI
Ask AI
Ask AI

04 β€” System-Level Design Decisions

A. Navigation System

Sidebar for global context
Sub-nav for module-level context
Breadcrumbs for deep context
Mobile nav optimized for thumb zone

B. Section Headers

Unified pattern:
Title
Meta info
Quick actions
Secondary actions
Filters/sort where applicable

C. Tables & Rows

Checkbox patterns
Hover actions
Inline edit states
Badge system for statuses
Right-aligned currency
Left-aligned identifiers
Responsive collapse logic

D. States

Empty
Partially filled
Error
Success
Warning
Loading (skeletons + shimmer)

E. Toasts

Confirmation for watch/pin/unpin
Success for tag edits
Warning for validation errors
Non-intrusive placement

F. Components

Built a fully reusable system:
Inputs
Dropdowns
Multi-select
Sliders
Date pickers
Alerts
Chips
Timelines
Cards
Segment tree
Tabs
Bottom sheets
Modals
AI cards
Everything coexists with a scalable token system.

05 β€” Visual Design Principles

1. Density + Clarity Balance

Real-estate data is heavy. design had to be:
Informational
Calm
Hierarchical
Actionable

2. Neutral Base With High-Contrast Actions

Fewer colors β†’ clearer priorities. Used color meaningfully for:
Status
Valuation
Equity
Owner match
Warnings
CTA

3. Spatial Rhythm

Consistent spacing tokens:
4 / 8 / 12 / 16 / 20 / 24

4. Interaction Feedback

Every interaction β†’ immediate feedback.

06 β€” Outcomes & Impact

Although internal metrics are confidential, the redesign contributed to:

βœ” 40% Faster offer creation

βœ” 30% Faster contact qualification

βœ” 25% Increase in AI tool usage

βœ” 50% Reduction in support tickets related to segments/filters

βœ” Higher adoption of mobile CRM

βœ” Better alignment across engineering, sales, customer success

Most importantly, agents reported:
β€œI finally know what to do when I open a contact.”

07 β€” Final Reflections

What made this project meaningful was the depth of workflows, the data complexity, and the real-world business impact. As Head of Design, I wasn’t just redesigning screens β€” I was building a system:
predictable
scalable
flexible
intelligent
A system that could power the next 5–10 years of Fello’s evolution.
Like this project

Posted Nov 21, 2025

Redesigned an end-to-end scalable CRM for real estate agents, improving clarity, workflows, lead intelligence, and overall productivity across web & mobile.