Search Results
1. Overview
The Search Results Page displays listings that match the user’s search criteria in a clear, scannable layout.
Each listing is presented as an interactive Listing Card containing essential information to help users make quick decisions.
A Filter Menubar allows users to refine their results without leaving the page, supporting iterative search behavior and encouraging discovery.
The design prioritizes balance between information density and visual clarity, while remaining adaptable to different marketplace needs.
2. Visual References
Search Result Page
Filter menubar
Filter modal (All filters)
3. User Experience
3.1 Listing Cards
Each search result appears as a card displaying the most important details of a listing at a glance. Clicking a card leads users to the Listing Detail Page.
Key elements:
- Cover/Thumbnail Image
- Title
- Set by the Seller during listing creation.
- Example: “Natural Light Studio in San Francisco.”
- Reviews
- Shows average rating and total review count.
- Example: ★5.0 (182)
- Primary Highlight
- A standout attribute chosen by the Platform to emphasize a critical listing feature.
- Example: “10 guests” → capacity is highlighted.
- Other Highlights
- Quick facts to help users scan secondary attributes.
- Example: “Stage, Exterior, Furniture.”
- Price
- Shows the hourly rate e.g., “From $100/day”. Can be configured to display a range if multiple packages/options exist.
Modular by design
The codebase is structured in a modular, component-based way—making it easy for your team to modify, replace, or extend individual flows to fit your unique marketplace model. Whether you’re adjusting pricing logic, onboarding steps, or messaging behavior, customization is straightforward and isolated.
3.2 Filters
To help users narrow down results, Users have access to three filter components:
- Dropdown Menus (for range/selection filters):
- “When” → Date picker dropdown.
- “Price” → Min-max price range selector.
- “Attendees” → Capacity range selector.
- Toggles (boolean filters):
- Instant Booking → toggle listings with Instant Booking enabled
- Amenities → toggle listings with specific amenities available
- Filter Modal (for comprehensive filtering):
- A modal opens to present multiple filters in one view.
- Example filters inside modal:
- Space Type
- Amenities
- Instant Booking
Users can combine filters freely, and filtered results update dynamically or upon clicking Apply Filters depending on Platform preference.
4. Step-by-Step Flow
- User arrives at the Search Results Page after submitting a search query.
- Initial results display as Listing Cards, populated based on search inputs.
- User browses cards.
- User optionally interacts with Filter Menubar to refine results:
- Opens dropdowns to adjust date, price, attendees.
- Opens filter modal to choose advanced criteria.
- Toggles specific features (e.g., Instant Booking).
- Results refresh to reflect updated filters.
- User clicks a Listing Card → navigates to Listing Detail Page.
5. Common Platform Configuration
Platforms can adjust:
- Which listing attributes appear in cards.
- Order and prominence of attributes.
- Whether price shows as single value or range.
- Whether reviews are shown or hidden.
- Which filters are available in dropdown vs modal vs toggle.
- Whether filters apply automatically or require “Apply” button.