docs: add UI/UX redesign design document
Approach C: Map-First with Modern Chrome - Horizontal filter bar replacing sidebar - React Router for URL state / deep linking - Redesigned property cards with better visual hierarchy - Refined color palette and typography - Tabbed listing detail sheet
This commit is contained in:
Viktor Barzin
parent
c7c3331d30
commit
6f8eb8a0ba
1 changed files with 167 additions and 0 deletions
167
docs/plans/2026-02-28-ui-redesign-design.md
Normal file
167
docs/plans/2026-02-28-ui-redesign-design.md
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
# UI/UX Redesign: Map-First with Modern Chrome
|
||||
|
||||
**Date:** 2026-02-28
|
||||
**Status:** Approved
|
||||
**Approach:** C — Preserve map-first architecture, modernize filter UX, visual polish, URL state
|
||||
|
||||
## Context
|
||||
|
||||
The realestate-crawler frontend is a React 19 + Vite + Tailwind 4 + shadcn/ui SPA with Mapbox GL hexgrid heatmap, Tinder-style swipe review, POI travel times, and real-time WebSocket task progress. Competitive analysis of Rightmove, Zoopla, and ImmobilienScout24 identified best practices to adopt while preserving our unique differentiators.
|
||||
|
||||
## Pain Points Addressed
|
||||
|
||||
1. **Visual polish** — Functional but plain shadcn defaults; needs better typography, spacing, card design
|
||||
2. **Filter workflow** — Sidebar with collapsible accordions is hard to discover and use
|
||||
3. **Navigation & URL state** — No deep linking, browser back/forward doesn't work, can't share filtered views
|
||||
4. **Property cards** — Need richer info display, better image presentation, clearer hierarchy
|
||||
|
||||
## Design Decisions
|
||||
|
||||
### 1. Layout & Navigation Architecture
|
||||
|
||||
**Desktop (>= 768px):**
|
||||
```
|
||||
+------------------------------------------------------------------+
|
||||
| Header (h-12): [Logo] [Rent|Buy] [Health] --- [Tasks] [User] |
|
||||
+------------------------------------------------------------------+
|
||||
| Filter Bar (h-10): [Price ▾] [Beds ▾] [Size ▾] [More ▾] | chips |
|
||||
+------------------------------------------------------------------+
|
||||
| Main Content Area |
|
||||
| Map (default) | Split (map 60% + list 40%) | List | Saved |
|
||||
+------------------------------------------------------------------+
|
||||
| Status Bar (h-8): [1,234 results] [Avg: £2,100] [Map|Split|List] |
|
||||
+------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
Key changes:
|
||||
- Sidebar removed entirely — filter bar is horizontal, below header
|
||||
- Rent/Buy toggle promoted into header
|
||||
- Active filter chips inline in filter bar
|
||||
- View mode toggle in status bar
|
||||
- Full viewport width for map (no sidebar stealing space)
|
||||
|
||||
**Mobile (< 768px):**
|
||||
```
|
||||
+------------------------------------------+
|
||||
| Header (h-12): [Logo] ---- [Filter] [≡] |
|
||||
+------------------------------------------+
|
||||
| Full-screen Map + FABs |
|
||||
+------------------------------------------+
|
||||
| Bottom Sheet (draggable) |
|
||||
| Active filter chips (scrollable row) |
|
||||
| [Stats] [Horizontal card row] |
|
||||
+------------------------------------------+
|
||||
```
|
||||
|
||||
Mobile filter opens as full-screen modal (not sidebar sheet).
|
||||
|
||||
**React Router URL structure:**
|
||||
```
|
||||
/ → Map view, default filters
|
||||
/map?type=rent&minPrice=1000&maxPrice=2500&beds=2
|
||||
/split?type=buy&district=hackney
|
||||
/list?type=rent&sort=price_asc
|
||||
/saved
|
||||
/listing/12345678 → Deep link to listing detail
|
||||
```
|
||||
|
||||
### 2. Filter System
|
||||
|
||||
**Horizontal filter bar** replaces the sidebar:
|
||||
- Primary filters always visible as compact dropdowns: Listing type, Price range, Bedrooms, Min size
|
||||
- "More filters" button opens a popover panel with: Max size, Price/m², Furnishing, District, Available from, Last seen days, POI travel time filters
|
||||
- Active filter chips render in a second row when filters are applied (removable with ×)
|
||||
- "Show Listings" / "Scrape New" buttons right-aligned in filter bar
|
||||
- "Color by" visualization control moves to status bar
|
||||
|
||||
**Mobile:** Full-screen filter modal with stacked fields and sticky "Apply" button.
|
||||
|
||||
### 3. Property Cards
|
||||
|
||||
**Full card (list/split view):**
|
||||
```
|
||||
+---------------------------------------+
|
||||
| [Image Carousel - 16:10 ratio] |
|
||||
| 1/9 [♥] [↗ RM] |
|
||||
+---------------------------------------+
|
||||
| £2,500/mo ● Good Deal |
|
||||
| 2 bed · 65 m² · £38/m² |
|
||||
| Shoreditch, London E1 |
|
||||
+---------------------------------------+
|
||||
| 🚶 12min 🚲 8min 🚌 25min |
|
||||
| Foxtons · Listed 3d ago |
|
||||
+---------------------------------------+
|
||||
```
|
||||
|
||||
Key improvements:
|
||||
- Larger image carousel (16:10 aspect ratio)
|
||||
- Price as dominant element — large, bold
|
||||
- Deal indicator with colored dot + text
|
||||
- Key metrics on one line: beds · sqm · price/sqm
|
||||
- POI travel times as compact badges
|
||||
- Agency + freshness de-emphasized at bottom
|
||||
- Heart + external link overlaid on image
|
||||
|
||||
**Compact card (mobile bottom sheet):**
|
||||
```
|
||||
+------------------+
|
||||
| [Photo 4:3] |
|
||||
| £2,500 2bd |
|
||||
| Shoreditch |
|
||||
+------------------+
|
||||
```
|
||||
|
||||
### 4. Visual Design System
|
||||
|
||||
**Color palette:**
|
||||
| Role | Value | Usage |
|
||||
|------|-------|-------|
|
||||
| Primary | Slate 900 `#0f172a` | Headers, primary text |
|
||||
| Accent | Teal 600 `#0d9488` | CTAs, active filters, map |
|
||||
| Good deal | Emerald 500 `#10b981` | Price indicators |
|
||||
| Above avg | Amber 500 `#f59e0b` | Warning indicators |
|
||||
| Background | White / Slate 50 | Card surfaces |
|
||||
| Muted | Slate 100-200 | Filter bar bg |
|
||||
| Map dark | Slate 800 | Map overlay controls |
|
||||
|
||||
**Typography:**
|
||||
- Price: `text-xl font-bold tracking-tight`
|
||||
- Location: `text-sm font-medium`
|
||||
- Metrics: `text-sm text-muted-foreground`
|
||||
- Chips/badges: `text-xs font-medium`
|
||||
|
||||
**Spacing:** 4px base, 16px card padding, 12px card gaps, 8px inline gaps.
|
||||
|
||||
### 5. Listing Detail Sheet
|
||||
|
||||
Larger drawer (60% viewport desktop, 90% mobile) with tabbed sections:
|
||||
- **Photo gallery** — Full width, swipeable, with photo/floorplan toggle
|
||||
- **Header** — Price, deal indicator, key metrics, actions
|
||||
- **Tabs:** Overview (features + description), Travel (POI distances), Price History (timeline), Details (property attributes)
|
||||
|
||||
## What's Preserved (No Changes)
|
||||
|
||||
- Hexgrid heatmap visualization (Web Worker)
|
||||
- Tinder-style swipe review mode
|
||||
- POI travel time calculations
|
||||
- WebSocket real-time task progress
|
||||
- Streaming NDJSON data loading
|
||||
- Dual auth (Passkey + SSO)
|
||||
- Mobile bottom sheet with snap points
|
||||
- SwipeableCardRow horizontal scroll
|
||||
|
||||
## Technical Approach
|
||||
|
||||
- Add `react-router-dom` for URL-based navigation
|
||||
- Decompose App.tsx (713 lines) — extract filter state to context provider
|
||||
- Extract duplicated utilities (formatDuration, formatCurrency, etc.)
|
||||
- New component: `FilterBar` (replaces `FilterPanel` sidebar layout)
|
||||
- Refactor `PropertyCard` for new visual hierarchy
|
||||
- Update `index.css` with new color palette CSS variables
|
||||
- Add error boundaries
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- Backend API changes (all data already available)
|
||||
- New features (saved searches, alerts, text search)
|
||||
- State management library (keep React state, just decompose)
|
||||
Loading…
Add table
Add a link
Reference in a new issue