UI Design for Real Estate Platform
Budget: ₹12,500 – ₹37,500 INR
PROJECT OVERVIEW
We are building House True, a premium trust-first real estate platform focused on verified residential properties in Delhi (Rent + Buy).
Unlike typical property portals, the platform must feel:
• Calm
• Premium
• Advisory
• Trust-focused
THE INTERFACE MUST AVOID COGNITIVE OVERLOAD AND PRESENT INFORMATION USING PROGRESSIVE DISCLOSURE. A DETAILED UX DOCUMENT FOR THE THREE CORE PAGES — HOME PAGE, LISTING PAGE, AND PROPERTY DETAIL PAGE — IS ATTACHED, EXPLAINING THE STRUCTURE, LAYOUT, CONTENT HIERARCHY, AND INTERACTION FLOW. THE UI DESIGNER’S ROLE IS TO TRANSLATE THIS UX INTO A POLISHED VISUAL SYSTEM AND COMPLETE UI DESIGN. THE DESIGN SYSTEM DEVELOPED FROM THESE CORE PAGES (INCLUDING TYPOGRAPHY, COLORS, SPACING, COMPONENTS, AND LAYOUT PATTERNS) MUST THEN BE APPLIED CONSISTENTLY ACROSS ALL OTHER PAGES OF THE PLATFORM, INCLUDING THOSE WHERE DETAILED UX WIREFRAMES ARE NOT PROVIDED, WHILE MAINTAINING THE SAME DESIGN LANGUAGE, STRUCTURE, AND VISUAL CONSISTENCY THROUGHOUT THE WEBSITE.
RESPONSIVE DESIGN
• Traffic mix- 65% mobile, 25% desktop,10% tablet
• Mobile-First Design- Layout should first be optimized for mobile devices.
• Responsive Layout- Design must adapt properly to mobile, tablet, laptop, and large desktop screens.
• Breakpoint Adaptation- Layouts should restructure appropriately at each breakpoint as per the screen sizes
• Desktop Adaptation- Use multi-column layouts, increase information density, Utilize available horizontal space
• Navigation- Mobile navigation should use compact navigation patterns, Desktop navigation should show visible navigation elements. Navigation must remain clear and consistent across all pages.
• Filters- Mobile filters must open in a bottom sheet panel. Desktop filters should appear as sidebar filters on listing pages.
• Cross-Browser Compatibility- Design must render correctly on: Chrome, Safari, Firefox, Edge
PROJECT SCOPE
This project focuses on three core pages that define the entire UI system and 13-14 additional pages.
Core Pages:
Home Page
Listing Page
Property Detail Page
Additional Pages:
Using the same design system, create UI for:
Insights / Blog Home
Category Pages (Rent / Buy / Market Reports)
Article Detail Page
Login Page (OTP interface)
Media Unlock Flow
Shortlist Page
Compare Page (Focus Mode)
FAQ Page
Contact Us Page
For Owners Page
Static Documentation Page
404 Page
A DETAILED UX DOCUMENT FOR THE THREE CORE PAGES — HOME PAGE, LISTING PAGE, AND PROPERTY DETAIL PAGE — IS ATTACHED, EXPLAINING THE STRUCTURE, LAYOUT, CONTENT HIERARCHY, AND INTERACTION FLOW. THE UI DESIGNER’S ROLE IS TO TRANSLATE THIS UX INTO A POLISHED VISUAL SYSTEM AND COMPLETE UI DESIGN. THE DESIGN SYSTEM DEVELOPED FROM THESE CORE PAGES (INCLUDING TYPOGRAPHY, COLORS, SPACING, COMPONENTS, AND LAYOUT PATTERNS) MUST THEN BE APPLIED CONSISTENTLY ACROSS ALL OTHER PAGES OF THE PLATFORM, INCLUDING THOSE WHERE DETAILED UX WIREFRAMES ARE NOT PROVIDED, WHILE MAINTAINING THE SAME DESIGN LANGUAGE, STRUCTURE, AND VISUAL CONSISTENCY THROUGHOUT THE WEBSITE.
DESIGN PRINCIPLES
1. Low Cognitive Load
The interface must feel calm and easy to scan.
Avoid:
• clutter
• excessive badges
• dense information blocks
Use:
• generous spacing
• clear typography hierarchy
• minimal color usage
• progressive disclosure
ONLY THE MOST IMPORTANT DECISION-MAKING INFORMATION SHOULD APPEAR FIRST.
2. MEDIA
Media lock indicator-visible pre lock
3. Progressive Disclosure
Property information must appear in layers.
Immediate Information
Progressive Information
• AI reasoning
• points to keep in mind
• inspection transparency
Detailed Information
• passive property details
• secondary insights
These sections should be collapsible or expandable.
4. AI-Assisted Advisory
The platform includes AI-generated reasoning sections.
Examples include:
Why You May Consider This Home
3–4 bullet points summarizing advantages.
Points To Keep In Mind
3–4 bullet points highlighting considerations.
These must be:
• concise
• visually calm
• clearly structured
Avoid long paragraphs.
COMPONENTS TO DESIGN
The UI designer must create reusable components including:
Header
Sticky mobile navigation
Search bar
Filter chips
Breadcrumb
Property cards
Trust badges
CTA buttons
Modals
Bottom sheets
Alerts
Recommendation modules
DELIVERABLES REQUIRED
The designer must provide:
1. Complete Figma File
Including all pages and UI components.
2. Design System
Including:
Typography scale
Spacing system
Color system
Buttons
Form inputs
Chips
Cards
Navigation elements
Modals
Bottom sheets
3. Component Library
Reusable components such as:
Property cards
Search components
Filter chips
Trust badges
CTA buttons
Components must use Figma auto-layout and variants.
4. Responsive Layouts
Mobile
Tablet
Desktop
5. Interactive Prototype
Prototype must demonstrate:
Search interaction
Filter bottom sheet
Media unlock flow
Expandable sections
Navigation behavior
6. Developer Handoff
Figma must include:
Spacing specifications
Typography specifications
Component naming
This ensures smooth implementation by the frontend developer.
DESIGN STYLE
The design should feel calm, minimal and premium, closer to platforms like Airbnb rather than crowded property portals.
QUESTIONS
Q1 — Marketplace / SaaS Experience
Please share 2 Figma projects where you designed a marketplace or SaaS product interface (not landing pages or graphics).
Q2 — Mobile-First Thinking
Our platform is 65% mobile traffic. How would you design the Listing page to remain clean and readable on mobile while showing multiple filters and property cards?
Q3 — Progressive Disclosure
The UX uses progressive disclosure for property information to avoid cognitive overload. How would you visually structure this on the Property Detail page?
Q4 — Component Systems
When designing in Figma, how do you structure a component system so that developers can reuse elements easily?
Q5 — Design Handoff
How do you prepare Figma files so frontend developers can implement them easily?
We are building House True, a premium trust-first real estate platform focused on verified residential properties in Delhi (Rent + Buy).
Unlike typical property portals, the platform must feel:
• Calm
• Premium
• Advisory
• Trust-focused
THE INTERFACE MUST AVOID COGNITIVE OVERLOAD AND PRESENT INFORMATION USING PROGRESSIVE DISCLOSURE. A DETAILED UX DOCUMENT FOR THE THREE CORE PAGES — HOME PAGE, LISTING PAGE, AND PROPERTY DETAIL PAGE — IS ATTACHED, EXPLAINING THE STRUCTURE, LAYOUT, CONTENT HIERARCHY, AND INTERACTION FLOW. THE UI DESIGNER’S ROLE IS TO TRANSLATE THIS UX INTO A POLISHED VISUAL SYSTEM AND COMPLETE UI DESIGN. THE DESIGN SYSTEM DEVELOPED FROM THESE CORE PAGES (INCLUDING TYPOGRAPHY, COLORS, SPACING, COMPONENTS, AND LAYOUT PATTERNS) MUST THEN BE APPLIED CONSISTENTLY ACROSS ALL OTHER PAGES OF THE PLATFORM, INCLUDING THOSE WHERE DETAILED UX WIREFRAMES ARE NOT PROVIDED, WHILE MAINTAINING THE SAME DESIGN LANGUAGE, STRUCTURE, AND VISUAL CONSISTENCY THROUGHOUT THE WEBSITE.
RESPONSIVE DESIGN
• Traffic mix- 65% mobile, 25% desktop,10% tablet
• Mobile-First Design- Layout should first be optimized for mobile devices.
• Responsive Layout- Design must adapt properly to mobile, tablet, laptop, and large desktop screens.
• Breakpoint Adaptation- Layouts should restructure appropriately at each breakpoint as per the screen sizes
• Desktop Adaptation- Use multi-column layouts, increase information density, Utilize available horizontal space
• Navigation- Mobile navigation should use compact navigation patterns, Desktop navigation should show visible navigation elements. Navigation must remain clear and consistent across all pages.
• Filters- Mobile filters must open in a bottom sheet panel. Desktop filters should appear as sidebar filters on listing pages.
• Cross-Browser Compatibility- Design must render correctly on: Chrome, Safari, Firefox, Edge
PROJECT SCOPE
This project focuses on three core pages that define the entire UI system and 13-14 additional pages.
Core Pages:
Home Page
Listing Page
Property Detail Page
Additional Pages:
Using the same design system, create UI for:
Insights / Blog Home
Category Pages (Rent / Buy / Market Reports)
Article Detail Page
Login Page (OTP interface)
Media Unlock Flow
Shortlist Page
Compare Page (Focus Mode)
FAQ Page
Contact Us Page
For Owners Page
Static Documentation Page
404 Page
A DETAILED UX DOCUMENT FOR THE THREE CORE PAGES — HOME PAGE, LISTING PAGE, AND PROPERTY DETAIL PAGE — IS ATTACHED, EXPLAINING THE STRUCTURE, LAYOUT, CONTENT HIERARCHY, AND INTERACTION FLOW. THE UI DESIGNER’S ROLE IS TO TRANSLATE THIS UX INTO A POLISHED VISUAL SYSTEM AND COMPLETE UI DESIGN. THE DESIGN SYSTEM DEVELOPED FROM THESE CORE PAGES (INCLUDING TYPOGRAPHY, COLORS, SPACING, COMPONENTS, AND LAYOUT PATTERNS) MUST THEN BE APPLIED CONSISTENTLY ACROSS ALL OTHER PAGES OF THE PLATFORM, INCLUDING THOSE WHERE DETAILED UX WIREFRAMES ARE NOT PROVIDED, WHILE MAINTAINING THE SAME DESIGN LANGUAGE, STRUCTURE, AND VISUAL CONSISTENCY THROUGHOUT THE WEBSITE.
DESIGN PRINCIPLES
1. Low Cognitive Load
The interface must feel calm and easy to scan.
Avoid:
• clutter
• excessive badges
• dense information blocks
Use:
• generous spacing
• clear typography hierarchy
• minimal color usage
• progressive disclosure
ONLY THE MOST IMPORTANT DECISION-MAKING INFORMATION SHOULD APPEAR FIRST.
2. MEDIA
Media lock indicator-visible pre lock
3. Progressive Disclosure
Property information must appear in layers.
Immediate Information
Progressive Information
• AI reasoning
• points to keep in mind
• inspection transparency
Detailed Information
• passive property details
• secondary insights
These sections should be collapsible or expandable.
4. AI-Assisted Advisory
The platform includes AI-generated reasoning sections.
Examples include:
Why You May Consider This Home
3–4 bullet points summarizing advantages.
Points To Keep In Mind
3–4 bullet points highlighting considerations.
These must be:
• concise
• visually calm
• clearly structured
Avoid long paragraphs.
COMPONENTS TO DESIGN
The UI designer must create reusable components including:
Header
Sticky mobile navigation
Search bar
Filter chips
Breadcrumb
Property cards
Trust badges
CTA buttons
Modals
Bottom sheets
Alerts
Recommendation modules
DELIVERABLES REQUIRED
The designer must provide:
1. Complete Figma File
Including all pages and UI components.
2. Design System
Including:
Typography scale
Spacing system
Color system
Buttons
Form inputs
Chips
Cards
Navigation elements
Modals
Bottom sheets
3. Component Library
Reusable components such as:
Property cards
Search components
Filter chips
Trust badges
CTA buttons
Components must use Figma auto-layout and variants.
4. Responsive Layouts
Mobile
Tablet
Desktop
5. Interactive Prototype
Prototype must demonstrate:
Search interaction
Filter bottom sheet
Media unlock flow
Expandable sections
Navigation behavior
6. Developer Handoff
Figma must include:
Spacing specifications
Typography specifications
Component naming
This ensures smooth implementation by the frontend developer.
DESIGN STYLE
The design should feel calm, minimal and premium, closer to platforms like Airbnb rather than crowded property portals.
QUESTIONS
Q1 — Marketplace / SaaS Experience
Please share 2 Figma projects where you designed a marketplace or SaaS product interface (not landing pages or graphics).
Q2 — Mobile-First Thinking
Our platform is 65% mobile traffic. How would you design the Listing page to remain clean and readable on mobile while showing multiple filters and property cards?
Q3 — Progressive Disclosure
The UX uses progressive disclosure for property information to avoid cognitive overload. How would you visually structure this on the Property Detail page?
Q4 — Component Systems
When designing in Figma, how do you structure a component system so that developers can reuse elements easily?
Q5 — Design Handoff
How do you prepare Figma files so frontend developers can implement them easily?