CASE STUDY: REDESIGN
Stay@Home: Engineering a Hyper-Local Rental Platform
*A comprehensive refactoring of Qatar’s premier vacation rental marketplace to improve search heuristics and conversion rates.*
Role
UX/UI Design & Frontend Dev
Stack
React, Mapbox GL JS, Figma
The Audit: Identifying Technical Debt
Initial telemetry and user session recording revealed critical friction points in the legacy architecture.
1. High Search Latency
The legacy SQL queries for geospatial filtering resulted in Time to First Byte (TTFB) exceeding 2.4s, causing a 65% bounce rate on the search results page before map tiles rendered.
2. Fragmented Mobile UX
Touch targets on the booking calendar were below 44px, and the map interface lacked gesture handling, making it nearly impossible for mobile users (70% of traffic) to filter by location.
3. Trust & Hierarchy
Listing pages lacked a clear information hierarchy. Critical amenities and cancellation policies were buried in unstructured text blocks, leading to increased support tickets regarding property details.
The Strategy: Modular & Map-Centric
01. React Architecture
We migrated to a React-based frontend to facilitate instant state updates for filters. This allowed for a “no-refresh” experience when toggling between price ranges and amenities.
02. Mapbox GL Integration
Replaced static maps with Mapbox GL JS, enabling vector-based rendering. Clusters now dynamically explode into individual pins based on zoom level, improving performance by 40%.
03. Localized Discovery
We restructured the taxonomy to highlight Qatari specificities (e.g., “Majlis” availability), creating a competitive advantage over global generic platforms.
High-fidelity prototyping of the filter logic.
Comparison Showcase
Visualizing the evolution from a static directory to a dynamic application.
Split-Screen Search UX
The previous design forced users to choose between a list or a map. The redesign implements a persistent split-screen view.
- Synchronized Hover States: Hovering a card highlights the map pin, and vice-versa.
- Sticky Filters: Top bar filters remain accessible while scrolling results.
Booking Conversion Flow
We redesigned the property page to focus on trust and clarity. The isometric view below highlights the modularity of the new “Booking Widget” which floats on desktop to ensure the Call-to-Action is always visible.
Accessibility (WCAG 2.1 AA)
Color Contrast
Primary CTA color #c2185b was tested against white backgrounds to ensure a ratio of 5.8:1, surpassing the AA requirement of 4.5:1.
Typography Scale
Body text was bumped from 14px to 16px (Roboto) to improve legibility on mobile devices, with line-height increased to 1.6 relative units.
Touch Targets
All interactive elements, including calendar dates and filter tags, were padded to meet the minimum 44x44px target size for touch interfaces.
Mobile view demonstrating accessible touch targets.
Technical Performance
Optimization strategies for low-bandwidth environments.
Lazy Loading
Implemented Intersection Observer API to lazy load property images. LCP (Largest Contentful Paint) improved from 2.8s to 1.1s.
Map Tiling
Utilized vector tilesets rather than raster images, reducing data transfer for the map component by approximately 75% per session.
Code Splitting
Route-based code splitting ensures users only download the JavaScript required for the specific page they are viewing.