Redprop

UX/UI Design#

Designing for Efficiency in High-Stress Environments

The real estate environment is fast-paced and mobile. Agents spend 70% of their time out of the office. Therefore, the interface design of RedProp was not just about aesthetics; it was a mission-critical operational requirement.

Design Principles#

We established three core pillars to guide every pixel:

Cognitive Load Reduction: Real estate forms are notoriously long. We broke them down into “Wizards” (multi-step forms) to prevent user overwhelm.
Mobile-First Operationality: Unlike competitors who offer “lite” mobile versions, RedProp V1 offers 100% feature parity on mobile. An agent can upload a property from the living room of a house they just visited.
Trust through Consistency: Using a strict design system ensures the platform feels robust and professional, essential for managing high-value assets.

The Design System#

We didn’t just pick a library; we tailored a visual language.

Base: Built on Shadcn UI for its headless accessibility primitives, styled with Tailwind CSS for rapid iteration.
Typography: Inter for UI density and readability at small sizes (tables, technical data).
Color Palette: A “Trust Blue” primary scheme, with semantic colors strictly defined for status (Green=Active, Amber=Reserved, Red=Sold).
Dark Mode: Fully supported out-of-the-box, crucial for agents working late hours.

Key UX Solutions#

1. The “Smart Filters” Pattern#

Instead of burying filters in modals, we implemented a sidewall facet system similar to e-commerce standards.

Challenge: Large datasets of properties.
Solution: Immediate visual feedback. As the agent filters by “3 Bedrooms”, the URL updates instantly (via Nuqs), and the results skeleton-load, giving a sense of snappiness.

2. The Property Upload Wizard#

Registering a property involves 50+ data points.

Solution: A Step-by-Step Stepper.
- Step 1: Basic Location (Map integration).
- Step 2: Multimedia (Drag & Drop uploads).
- Step 3: Legal & Pricing.
Impact: Reduced abandonment rate during upload by estimated 40% compared to accumulated single-page forms.

We aimed for WCAG 2.1 AA compliance.

All interactive elements are keyboard navigable.
Forms use proper aria-labels and error announcements.
Color contrast ratios were verified for visibility under direct sunlight (common for agents working outdoors).