Rental Search UI

 

Project
Overview

A 2 days design challenge project of designing a search UI for a real estate product.

 
 
 

Design
Challenges

Challenge Requirements

  • A search bar with predictive text or access to recent searches

  • A way to refine searches (filters, advanced search options, etc.)

  • Search results that include thumbnails and metadata

Bonus Requirements

  • Micro-interactions or interactive states

  • Consideration of edge cases.

  • Accessibility optimizations.

Due to the hypothetical nature of the design challenge and time constraint, I am focusing the solution toward refining the search interface focus on potential renters looking for a more efficient, personalized, and intuitive way to find rental properties.

They range from Efficiency Seekers who want quick results to relocating Renters who need more information and guidance about a new area to Comprehensive Researchers who want all the controls and details.

 
 
 

Research

Competitor Research

analyzed leading real estate platforms (Zillow, Redfin, Rentals.com) to benchmark search patterns and identify UX gaps. Additionally, I explored cutting-edge AI search interfaces to uncover innovative approaches that could enhance rental discovery. This dual-focus research revealed key opportunities to reimagine property searches through intelligent assistance.

Takeaways

  1. The Knowledge Gap in Rental Search
    Current platforms expect expertise to generate relevant results, demanding users to know precise search parameters upfront, understand neighborhood nuances, and manually refine results repeatedly. This creates a barrier for uncertain renters who need discovery support rather than just search functionality.

  2. Lack of Proactive Guidance

    Most platforms offer hinted suggestions at the first level based on location but lack other relevant suggestions or follow-up suggestions after the first level search. The hinted suggestion also lacks filter options, which is a content-heavy section. Sometimes, the user will spend more time to seek target filters.

  3. Limited Personalization in Results

    Search results are often generic, prioritizing listings over user fit.

  4. No Seamless Transition from Exploration to Decision

    Users toggle between maps, lists, and filters with no clear path forward.

Target Platform

Mobile Dominance

  • In recent years, most real estate product platforms have significantly shifted toward mobile usage.

  • Industry reports suggest that 70-80% of real estate app users prefer mobile devices (smartphones and tablets) over desktops for browsing rental and property listings.

  • Mobile apps offer convenience, location-based features (e.g., map search), and instant notifications, which users highly value.

  • Estimated Breakdown (Based on Trends):
    - Mobile Users: ~70-80%
    - Desktop Users: ~20-30%
    This estimate aligns with the shift toward mobile-first experiences in real estate and rental platforms.

    *Sources: NAR Report, Statista, Pew Mobile Fact Sheet, Comscore Report, Zillow, Realtor.com & more.

 
 

User Personas

 

Persona #1

Relocating Renter

“I don’t know much about and open to all suggestions”

Needs
- Help to understand the neighborhood and housing cost.
- A stress-free way to explore options without feeling lost.

Desires
- To feel confident in their choices without spending hours searching.
- Quickly find multiple housing options tailored to the user's needs.

 
 

ersona #2

Efficiency Seeker

“Time is Money, show me the best results.”

Needs
- Accurate and fast recommendations.
- Visual aids to validate search suggestions.

Desires
- The most efficient decision-making process.
- Reliable and personalized recommendation base on the user needs.
- Streamline contact, schedule and application experience.

 
 

Persona #3

Comprehensive Researcher

“I know exactly what I want and I like to see all the details.”

Needs
- Comprehensive information on properties in order to make sound decision.
- A way to save and organize desirable listings for later review.

Desires
- To feel in control of the search process.
- A tool that helps the users to make informed decisions without missing critical details.

 
 

Opportunites

For Relocating Renters
How might we provide a friendly, supportive experience that feels like they have help from the locals?


For Efficiency Seekers
How might we deliver the most efficient and reliable recommendations without requiring users to review all the details?


For Comprehensive Researcher
How might we deliver comprehensive search options to help users make informed decisions?

 
 

Low Fidelity
Wireframe

A traditional text input search UI flow was recreated with the additional for advance hint suggestion while search term been inputted.

Search feature is added to “filter options” in order to quick-find the filter option for the user instead to scroll down a very long section.

The second wireframe was made for the AI-assisted search flow. With the help of voice-over text, the CUI will process the captured search criteria in the background in real time, then create GUI feedback on the screen as confirmation. Meanwhile, the number of matching results from the search will be displayed to inform the user and provide access to the search result.

Users can continue to refine the search criteria to add, subtract, and/or modify existing criteria.

Upon encountering an error or hitting no results, a suggestion from AI Assist appears for modification based on popular or past search terms.

The key here is to conduct the rental search by taking as many criteria details as possible, refining them through the conversation via AI assistance, and providing the most desired result.

 
 

Micro-Interactions

  1. AI-Assist CTA change to wave animation to indicate active mic session.

  2. Input content processed by AI and matched attribute will be display in GUI above. Attribute content displays by 3 animated dots indicating the processing status.

  3. Glowing and running gradient color border animation runs around the dialog border indicating AI-assist process in process.

  4. Processed and recognized attribute label displays in primary color (purple in this case).

  5. Input box expands while input information increase. Input box displays 4 text lines at max, then become scrollable as previous input text disappears from top.

  6. Attribute label text color change to default text color after 3 seconds after been recognized and displayed.

 
 

Final Design

 

After thought

The balance between intrusion & control
Through user feedbacks to identify what is the most sufficient level of AI-assist and manual control to receive effective result.

Refine filter options to be relatable to the users
Explore more relatable

Result Comparison
A better way to compare potential properties.

Bulk Arrangement and Tracking
Send bulk requests for application, schedule, and/or contact agent/landlord.