UX/UI DesignerResponsive WebPropTech / Real Estate

Embark Real Estate Platform

Embark Real Estate · 4 weeks · May 2024

Embark neighborhood-centric real estate brokerage platform

Design Process & Workflow

From Mood Board to Account Area

How the visual direction and the screen inventory came first, then the discovery screens, listings and new developments, search with the map, and the account area that brings buyers back.

Step 01

Visual Direction & Mood Board

Set the visual language before any screen was drawn: a muted palette of brown, deep blue and black against white, Cinzel for headings against Lato for body, and a single-weight line icon set. Referenced layouts from other premium property brands were collected alongside, so the direction was argued from evidence rather than taste — for a brokerage selling multi-million-baht listings, the interface has to read as expensive before it reads as usable.

Step 02

Sitemap & Screen Inventory

Mapped the whole platform as one screen inventory — public browsing, listing detail, new developments, editorial, account area and every modal in between. Seeing the full surface in one frame is what exposed how many screens were variations of the same listing shell, which is what the component library was then sized against.

Step 03

Core Discovery Screens

The three screens that carry the product: the homepage with its search bar over a hero, latest listings and the neighbourhood entry points; the property detail page; and the new-development detail. This is where the central idea lands — 'Find the Neighbourhood for You' sits on the homepage as a first-class path, not a filter buried in search.

Step 04

Brand & About Pages

Designed the About surface — Our Story, Our Mission, Our Beliefs and the office location with an embedded map. In a market where buyers are handing over large sums to an intermediary, these pages do commercial work: they are where a visitor decides whether the brokerage is credible enough to contact.

Step 05

New Development Flow

Built the flow for off-plan projects, which carry far denser data than a resale listing: a developments index, then a detail page holding the full unit table — floor, size, layout, price per sqm — plus building amenities and facts. Photo gallery, map and street view are pushed into their own views so the page opens on the decision-making information and reveals the rest on demand.

Step 06

Listing Detail & Media Views

Resolved the listing page and its media layer. The page keeps the enquiry form pinned beside the content, and the Photos / Floor Plan / Video / Map switcher opens into a full-bleed gallery and a single-image view. Separating media from the page body means a buyer can study the property without losing the contact path.

Step 07

Search, Map & Editorial

Designed search as a split view — results grid beside a live map with clustered pins, and a map-only mode for buyers who search by area first. The editorial section sits alongside it: a news index and article template that give the brokerage a reason to be visited before someone is ready to buy.

Step 08

Account Area

The logged-in surface: Just For You recommendations, saved listings, saved searches with per-search email alert toggles, sent inquiries and account settings. Saved searches are the retention mechanism — a property hunt runs for months, so the platform has to be able to bring the buyer back when new stock matches.

Executive Summary & Impact

Neighbourhood First

Browse by area

Neighbourhood entry points on the homepage and a map view in search, for buyers who start from where they want to live.

Progressive Disclosure

Dense listings, opened on demand

Photos, floor plan, video and map open in their own views, so the page leads with the information a buyer decides with.

Contact in Context

Enquiry beside the listing

The agent contact form stays beside the property, so a buyer can study it without losing the path to enquire.

Embark is a real estate brokerage platform for premium residential property. The design makes the neighbourhood a first-class way into the listings, keeps location and media on the property page, and holds the enquiry form beside the listing so a buyer never has to leave it to make contact.

01 / Discovery & Context

Problem & Baseline

Buying property is a decision about location as much as about the unit itself, but listings usually lead with specifications and leave the surroundings to be researched elsewhere. New developments add another layer of dense data, unit tables, building facts and media, that can overwhelm a page. And because a property search runs for months, the platform needed a way to bring a buyer back when matching stock appeared.

Location as context

Buyers needed to understand the area around a property, not only its specifications.

Dense project data

New developments carry unit tables, building facts and media that could overwhelm a single page.

Contact path

Enquiring needed to stay available while a buyer studied photos, plans and the map.

Long search cycle

A property hunt can run for months, so buyers needed a way to be brought back when new listings matched.

02 / Architecture & UX System

Key Design Decisions

01

Neighbourhood as a Way In

Placed 'Find the Neighbourhood for You' on the homepage as a first-class path, with area cards leading into listings, and added an 'Explore the area' map to the property page.

02

Search by List or by Map

Designed search as a split view, with results beside a live map of clustered pins, plus a map-only mode for buyers who search by area first.

03

Media and Data Opened on Demand

Photos, floor plan, video and map open from a switcher into their own views, and new-development pages lead with the unit table and building facts, so each page opens on the decision-making information.

04

Enquiry Pinned Beside the Listing

The agent contact form stays beside the listing content, so a buyer can study the property and its media without losing the path to enquire.

05

Saved Searches That Bring Buyers Back

The account area holds saved listings, saved searches with per-search email alerts, sent enquiries and recommendations, so a search that runs for months can pick up again when new stock matches.

03 / Verification & Evidence

Outcomes

Area	Before	After	Outcome
Neighbourhood research	Location context sat outside the listing	Area entry points on the homepage and an area map on the listing	More connected
Search	Results and location viewed separately	Split list and map view, plus a map-only mode	More flexible
Listing detail	Dense data and media competed on one page	Media and building data opened on demand	More focused
Agent enquiry	Contact needed to stay available while browsing media	Enquiry form pinned beside the listing	Always in reach
Return visits	Long searches needed a way to resume	Saved searches with email alerts	Easier to resume

04 / Retrospective

What I Learned

→

For property, location is part of the product, so the neighbourhood belongs in the main navigation rather than inside a filter.

→

Progressive disclosure worked best when the page opened on the information a buyer decides with and moved media into its own views.

→

Keeping the contact path beside the content mattered more than making it loud; a buyer should never have to leave a listing to ask about it.