MY ROLE :
UI Designer & Front-End Developer
stack :
Figma, WordPress, CSS
TIMELINE :
8 Weeks
How transitioning from a sluggish, unstructured database to a modular component framework turned search friction into a high-performance conversion engine.
The Latency Leak:
The Friction: Legacy IDX scripts and unoptimized listing images pushed page load speeds past 3 seconds.
The Code Fix: Re-engineered the platform with lazy-loading, WebP assets, and minified CSS grids to preserve a <3s load speed.
Mobile-First Spatial Scaling
Designing thumb-zone friendly interactive navigation and fluid grids tailored strictly to the 70% mobile-search demographic
Cumulative Layout Shift (CLS) Prevention
Enforcing pre-sized media containers in our CSS grid so pages load instantly without annoying layout jumps as property photos initialize.
Frictionless Tour Scheduling
Bypassing legacy scheduling bottlenecks by integrating a direct, 3-tap appointment engine that converts high-intent listing viewers into physical home tours.
Section 2 : Environmental Ergonomics
How real-world physical and demographic realities dictated our early Figma spatial wireframes.
To build an interface that survives the physical world, we bypassed generic, hypothetical user profiles and mapped our early low-fidelity layouts to strict environmental, physical, and generational constraints . Property search is overwhelmingly a mobile-first behavior: 70% of prospective buyers utilize mobile or tablet viewports, and 75% of renters search exclusively on mobile websites . By mapping the interface against real-world usage scenarios, I established three strict spatial layout rules on my early Figma canvas .
First, to accommodate the 42% dominant buyer market of Baby Boomers , I mandated a minimum 16px high-contrast typography scale to combat progressive visual acuity loss when browsing listings outdoors in direct, harsh sunlight glare . Second, I completely eliminated complex sidebar filtering , replacing it with a mobile-first, slide-up filter panel that consolidates search parameters without layout overflow . Third, I aligned our primary navigation triggers and action CTAs—like shortlisting and booking—strictly within the bottom natural thumb-sweep quadrant . This system-level positioning ensures comfortable, effortless, one-handed mobile navigation while multitasking or commuting in transit.
Search & Map
Listing Grid
Appointment Drawer
The Commuting Co-Shopper
Mapped to a mobile-first search reality. Core listings, map toggles, and filters are structured to load cleanly with pre-sized containers, preventing layout shifts on shaky, high-speed transit commutes.
High-Contrast Sunlight Legibility
Coded to address outdoor glare for aging demographics (42% Boomer cohort). Discarded thin, low-contrast UI text in favor of bold, highly legible pricing and status blocks.
The One-Handed Thumb Zone
Mapped to human ergonomics. Core interactive elements—the search bar, 'Add to Favourites' pill, and booking triggers—are aligned strictly in the lower-third viewport comfort zone.
Section 03 : Progressive Disclosure
How 155-source research insights structured our database pathways to maximize user trust.
Barry Schwartz’s Paradox of Choice proves that dumping excessive paths on a user triggers instant decision paralysis and exit behavior. In our post-research sitemap, I completely discarded the legacy, unstructured real estate directory in favor of a strict Progressive Disclosure model . By limiting initial entry-point options and deferring complex search filters, the interface guides the user's eye naturally from broad exploration to high-intent action without cognitive overload.
Crucially, I engineered two primary post-research interaction loops directly into our system flow . First, to resolve the friction where 77% of renters co-shop and struggle to share listings across devices, I created a native shortlisting and compare pipeline that lets users analyze properties side-by-side . Second, to address the industry bottleneck where booking a property visit is historically harder than ordering groceries, I integrated a direct, 3-tap appointment calendar directly within the listing detail page, streamlining the path to lead generation.
6
Automated comparisons eliminate external spreadsheet fatigue for co-shoppers
8
Replacing tedious, multi-page contact forms with a lean 3-field scheduling drawer directly on the listing page.
Progressive Discovery Routing
The Friction: Standard sites overwhelm users with dense filter menus and immediate forced-login prompts, causing a 19% immediate bounce rate.
The System Fix: We defer all complex parameters, letting users explore immersive media completely ungated and utilizing filter panels only as they dive deeper.
Integrated Comparison Matrix
The Friction: Co-shoppers waste hours copy-pasting listing links into external chat threads and manual spreadsheets to compare home values
The System Fix: Our updated sitemap routes saved listings directly into an automated side-by-side matrix, contrasting price, location, and commute details in one viewport .
Frictionless Tour Booking
The Friction: Legacy real estate portals force users through tedious, multi-page contact forms asking for highly personal financial data too early, which triggers immediate drop-offs.
The System Fix: We deployed a clean, single-screen "Schedule a Tour" form requesting only three high-intent data points (Name, Contact, and Preferred Time) . This minimizes cognitive load, routes leads immediately to local agents, and provides an instant success confirmation.
Section 04 : System Architecture
How we structured a scalable Figma design system and tokenized style guide to optimize visual processing and eliminate layout shift.
Ocular-tracking research proves that a real estate buyer’s visual journey is highly rigid . The hero property image is the absolute first element to capture attention, commanding the highest total dwell time . The gaze then shifts instantly to the quantitative metadata block (pricing, size, configuration), while written descriptions are processed last . To honor this cognitive hierarchy, I engineered our core property listing card using structured Figma Auto-Layout frames.
I defined pre-sized layout containers for our WebP assets to prevent Cumulative Layout Shift (CLS) as image files load late. Furthermore, to accommodate our 42% dominant Baby Boomer cohort under outdoor sunlight glare, I established a strict typographic and color scale. I leveraged our primary brand tokens—Acherus-Grotesque headings and a highly readable Inter body—and systematically re-engineered our responsive layouts to enforce a minimum 16px base font size on mobile viewports, ensuring clear visual contrast and accessibility.
Decision Story: Resolving the "Invisible Heart" Bottleneck
In my initial low-fidelity wireframes, I designed the property card following standard aesthetic trends: I placed a simple, floating heart icon directly over the top-right corner of the property image . However, during usability testing with representative users, this critical feature was completely ignored. Non-tech-savvy testers entirely bypassed the icon, causing the shortlisting flow to fail. When I analyzed the behavior, I realized the floating icon suffered from two distinct issues: a lack of explicit text affordance and a violation of the human eye's natural tracking pattern. Ocular tracking research shows that while a user's gaze fixes on the property photo first, their eye immediately drops down to read the property name and quantitative metadata below . By placing the icon on top of the image, I had positioned it completely outside the user's scanning trajectory .
To fix this, I restructured the component. I transformed the floating heart into an explicit, high-contrast visual pill reading 'Add to Favourites' and repositioned it directly underneath the property image, anchoring it next to the property name. This small structural adjustment dramatically increased visual affordance. In our next round of testing, even non-technical users interacted with the pill instantly, resulting in a 100% success rate for saving properties and completing the downstream appointment flow.
Phase 1 (Low-Fi)
Phase 2 (High-Fi)
1
Phase 1 (Low-Fi): Standard floating heart icon sat completely outside the user's natural scanning trajectory, leading to a 0% interaction rate among testers.
2
Phase 2 (High-Fi): Re-engineered text pill ('Add to Favourites' + Heart) moved into the primary visual zone, achieving a 100% engagement success rate
3
Round-Number Pricing Scale reduces user calculation fatigue and naturally ranks higher in low-to-high sorting indexes.
TYPOGRAPHY SCALE & TOKENS
Inter for Headings and body
Inter • 36/42 • Bold
H2 Heading
Inter • 27/32 • Bold
H3 Heading
Inter • 21/24 • SemiBold
H4 Heading
Inter • 16/24 • SemiBold
Body (Body Base)
Inter • 16/18 • Regular
Body Bold
Inter • 16/18 • Bold
Body SemiBold
Inter • 16/18 • Semibold
Body small (Body Small)
Inter • 12/16 • Regular
Caption
Inter • 9/12 • Medium
TOKENIZED COLOR SYSTEM
Primary
Primary
#AB054F
Hover
#960947
White
#FFFFFF
Neutrals
Light Text
#E6EFFA
Charcoal
#2B2B2B
Primary Text
#424242
Border
#DFDFDF
Symantics
Alert
#DC2F33
Warning
#C98A1C
Info
#1E67B9
Success
#1F9D55
Ocular-First Grid Alignment
We prioritize the layout strictly according to human visual processing: large, lazy-loaded visual assets command the top, followed instantly by highly structured, scannable data groups.
Round-Number Pricing Mask
We discarded traditional real estate charm pricing (like ₹ 449,900). Our UI-masking simplifies pricing into clean, round numbers (like ₹4.50 Lacs). This ensures Phrealtors listings default to the very beginning of standard database sort filters, maximizing click-through rates.
Rigid 16px Accessibility Bounds
Base body copy scale was programmatically locked at a minimum of 16px with high color contrast. This prevents visual fatigue and layout collapse under direct sunlight glare on mobile devices.
Section 05 : Cognitive Ergonomics
How we saved co-shoppers from external spreadsheet fatigue by engineering a live, localized comparison dashboard.
Real estate search is rarely a solo, single-session activity. Secondary research reveals that . Over a typical consideration window, the average renter plans to research at least 10 properties online but will narrow this extensive list down to seriously evaluate only three final contenders. On legacy platforms, this consideration phase is plagued by high interaction friction. Because standard sites lack integrated comparison tools, co-shoppers are forced to copy-paste URLs into messy external WhatsApp group chats or manual spreadsheets to contrast options. This fragmented workflow causes data loss, immediate decision fatigue, and eventual platform abandonment. To capture and retain these high-intent users, I designed a native, two-stage shortlist environment. First, clicking the text-labeled 'Add to Favourites' pill fires a low-latency micro-interaction, changing states instantly to provide visual validation. Second, this action feeds directly into an interactive, side-by-side comparison screen. By dynamically parsing saved listings and contrasting them across critical quantitative parameters—simplified round-number pricing, square footage, neighborhood walkability, and commute times—we eliminate cognitive overload and consolidate the entire collaborative search process into a single, cohesive viewport.
Active "Saved" state of the text pill.
The curated shortlist collection screen.
Side-by-side tabular comparison matrix.
Visualizing the seamless Save-to-Compare interactive loop
Co-Shopping Workspace Alignment
The Friction: 77% of property seekers hunt collaboratively, but lose progress and structure when trying to share disjointed links across independent mobile viewports.
The System Fix: Shortlisted items are cached locally, enabling prospective co-shoppers to quickly pass a single mobile device back and forth or scan options as a unified deck.
Quantitative Attribute Contrast
The Friction: Users suffer from cognitive fatigue when forced to click back and forth between browser tabs to compare prices, sizes, and commutes.
The System Fix: Our matrix automatically parses listing schemas, presenting direct side-by-side tables contrasting BHK configurations, clean pricing, and localized amenities in one glance.
Low-Latency State Transitions
The Friction: Sluggish server refreshes during "Save" actions break scanning momentum, causing user frustration.
The System Fix: Tapping "Add to Favourites" triggers an instant UI state change from empty to active fill, using cached micro-interactions to respect the user's temporal investment.
Section 06 : Usability Validation & Roadmap
How our streamlined, value-first booking pipeline repaired the 93% legacy bounce rate through structural usability testing.
A beautiful user interface remains a theoretical hypothesis until it is tested in the wild by real users. To validate our design decisions, I bypassed generic templates and subjected our high-fidelity Figma prototype to a series of usability tests with representative users. My goal was simple: prove that our restructured, thumb-friendly search-to-compare sitemap could convert high-intent traffic into physical leads. The quantitative results were definitive. By replacing the legacy unstructured directory with a clear Progressive Disclosure model and consolidating our co-shopping comparison matrix, users achieved a. More importantly, by enlarging touch targets to a minimum of 44px and aligning CTAs in the lower viewport thumb-zone, we limited the mobile. Testers comfortably navigated from initial landing page discovery to submitting a completed appointment request, completing the core business goal with absolute confidence.
PERFORMANCE VALIDATION METRICS
98%
Success Rate
Validates that our progressive navigation routing successfully eliminated mid-funnel cognitive friction.
15%
Misclicks
Proves the ergonomic efficiency of our larger touch targets and bottom thumb-zone CTA positioning.
2min
Completion Time
Demonstrates that transforming the complex booking flow into a 3-field drawer maximizes conversion speeds.
THE 3-PHASE PRODUCTION ROADMAP
Phase 1
Handoff
Phase 2
Deploy
Phase 3
Optimize
Validating layout changes through metric-driven engineering
Expert Peer Verification
Next Steps: I am actively initiating design system reviews with senior engineering and design peers to stress-test our component naming structures and ensure seamless developer handoff.
Live Funnel Analytics
Next Steps: Post-deployment, we will track visitor-to-lead conversion rates against our target >4.7% industry benchmark while monitoring automated screen recordings to isolate any potential rage-click clusters.
Production Performance Audits
Next Steps: Partnering directly with front-end developers to lock in a performance budget, enforcing WebP next-gen image compression and minified CSS frameworks to preserve a sub-3-second page load speed.