Real Estate Portal: Interactive Booking Experience

A US semi-custom home builder, building in large master-planned communities with pools, parks and shared amenities, wanted to rebuild its website. It sells in two ways: home plans that buyers customise before construction, and homes that are finished or nearly finished, ready to move into.

I worked on it with the Twelve Legs Marketing team, owning the UX/UI design of the whole site and part of the research; my colleagues handled project management and development. The project is confidential, so the brand, neighbourhood and plan names shown in the images are fictional.

The information architecture was chaotic. Promotions were hidden several clicks deep, there were no base prices, lot maps sat at the bottom of each neighbourhood page, and testimonials lived on a page nobody visited.

Behind it was a complex reality: each neighbourhood has its own rules, and not every plan can be built in every one. The two ways of selling also work differently. A move-in ready home has an exact address, price and features; a plan has a different base price in each neighbourhood, plus ranges for square footage and bedrooms.

In our sessions with the client we kept coming back to the same reference: Airbnb. There you choose where you want to be first, filter by what matters to you, and see each option’s photos and key details without opening it. The same holds here: people buying a new home choose the neighbourhood before the house.

From there I defined three entry paths: start from a neighbourhood and see which plans fit it, start from a plan and see where it is available, or go straight to move-in ready homes. The goal across all of them was fewer clicks, with the important information always in view.

I also researched pagination versus a “load more” button for the listings, weighing both user experience and SEO, so the decision could be made together with the development team.

• Airbnb-style filters. Features (ranch, main-floor primary suite, covered patio…), neighbourhood, price, square footage and minimum bedrooms, bathrooms and garage spaces, with the number of results for each option.
• Cards you can explore without opening them. Each card has its own photo carousel, the neighbourhood where it is available, the price and the basics. Move-in ready cards show exact values and a single neighbourhood; plan cards show ranges.
• Pages with the essentials up top. Gallery, base price per neighbourhood, floor plans, standard features and the virtual tour, with share, download and save always in view.
• Favourites with an account. The heart on each card saves a plan or a home, and keeping them requires signing up. In the account, favourites are split into move-in ready homes and plans.
• Forms with context. Forms capture the plan, the neighbourhood and the filters each person used, so the sales team knows what they are looking for before calling them.

The site is also designed for mobile. The menu opens full screen with search at the top, search filters open in their own panel with the result count on the button, and on the plan page the request for information stays fixed within thumb reach.

The site is live, with sign-up favourites and the interactive lot map in place. Buyers can see base prices, filter by what they need and save their options without having to call anyone.