Real Estate Web Platform.

A 1.5-month solo design engagement spanning user flows, wireframes, a component system, and 30 high-fidelity screens covering browsing, single-property details, seller-lead capture, content pages, and agent-facing tools. The brief was to take a fragmented existing site through a full visual rebuild, end to end — strategy through pixel — with a Figma file the engineering team could pick up and ship without rework.

The visual direction is a dark editorial base with yellow accents. Real estate is a category most often dressed in glossy white and stock luxury photography, which makes every brand in the space look the same. Pulling the canvas dark gave the property photography room to lead the page without competing with white surfaces; the yellow accent kept the brand recognisable across calls-to-action, agent badges, and key data points. The result reads less like a typical real estate site and more like a publication that happens to sell property.

User flows came first — buyer browsing, seller listing, agent dashboard, and content discovery — because the existing site’s biggest issue was not visual, it was that each surface assumed a different mental model. Once the flows were settled, wireframes blocked structure across the 30 screens, then the component library was built before any one screen was polished. Building the library first meant every subsequent screen used real components with real states, so the developer handoff inherited the same atomic vocabulary the design used.

The Figma file ships with proper auto-layout on every responsive element, named design tokens (colour, type, spacing, radii), and named component states. Every interactive surface has its hover, active, and disabled variants. The four representative screens shown below are slices of the full file, which covers every flow end to end — the goal being that the engineering team’s first task is to wire components, not to reverse-engineer intent.