Web Development for Real Estate Builder

Technology Stack

Wordpress
jQuery
AJAX
HTML5
CSS3
MySQL

The Client

This website is owned by a US-based real estate builder committed to delivering beautiful homes and community areas. The website helps people search for townhomes, bungalows, and quick move-ins by size, price, and amenities. It provides property info, image galleries, and an array of land lot options. It also provides essential answers related to pet-friendly homes, furnished bungalows, contractors, etc.

The Challenge

The builder had already delivered innovative homes in various US locations. But, he wanted to grow his digital presence. So, he contacted Capital Numbers to develop his official website and expand his business digitally.

The client had the website content and layouts ready. He asked us to take care of the prototyping and development part. The development work had to be done in a month.

When the client contacted us, he stressed a few key points. For example, he needed personalized search boxes for users to search properties by budget, room, car garage, etc. He wanted the solution to be responsive across all viewports and screens. He needed a sophisticated theme that would draw the attention of the users. He required multiple pages for users to navigate back and forth. He also needed an extensive photo gallery to display hi-res property images.

The Solution

Capital Numbers first collected the layouts, content, and images sent to us by the client. Once we got all the PSDs, it became more precise about what the client wanted. Accordingly, we created the mocks using InVision, got them approved, and began the production work.

We used WordPress (WP) for the backend architecture. We chose WordPress because this project demanded using multiple plugins, and WordPress offers an array. WordPress is also largely pre-built. So, minor tweaks in code can help launch highly professional websites. Moreover, there’s a list of beautiful themes we could choose from and set up for the desired visual impact. All these reasons led us to select WP as the backend structure.

We adjusted the graphics, sliders, pages, forms, etc., using CSS3 and Bootstrap. We made the platform 100% ready for all screen sizes using HTML5.

Next, we worked towards unfolding the site content on scroll to enhance the user experience. So, we injected the AOS library for this. The AOS library dynamically displays site content as users scroll up or down a page. Embedding this library requires strong scripting skills. Thanks to our technically-proficient team that got this done well to create an excellent on-scroll animation effect on all the pages.

As for the search boxes, we used the jQuery AJAX function. Our engineers wrote custom code to retrieve information from the MySQL database and display search results in the exact combination typed in the input boxes.

We completed all these activities phase-wise. Breaking down the project into smaller phases helped us systematically execute the activities step by step without running into overlaps. Once done with the final testing, we pushed all the files to the GitHub maintained by the client.

Results

The resulting product is a polished website themed beautifully with large photos of homes. Although it doesn’t go overboard with too many CTAs, it has just the right ones for users to act on. It’s fast-loading, compatible with all browsers, and has a smooth information flow.

The client appreciated Capital Numbers’ contributions, among which the key ones that deserve mention are:

Waterfall Development Approach

Adopting the Waterfall method helped us meet each pre-defined goal sequentially and deliver better.

Advanced Custom Fields (ACF)

We custom-designed the search fields using the ACF plugin to help users filter properties by budget, sq ft, stories, rooms, baths, garages, etc.

Meta Query Mechanism

Our conditional logic retrieves metadata and reflects the correct combinations (like 3 beds, 2 garages, 3000 sq ft, etc.) as queried in search fields.

Smooth Paging

We split the website into distinct pages for users to go back and forth instead of scrolling for all the information on one page.

Slick JS Sliders

Our responsive, slick sliders offer perfect carousel pictures of homes that can be zoomed in and out on all devices.

Ninja Forms

We used Ninja Forms to collect custom entries like users’ names, emails, phone numbers, property preferences, budgets, and personalized messages.

Fancybox Pop-ups

Our well-placed Fancybox pop-ups show hi-res images of floor plans that users may be interested in.

Accordions

We added accordion-style FAQ pages to show answers only upon clicking, collapsing the page and offering a cleaner look.

On-scroll Page Load

Using AOS, we could add an effect that unfolds the page narratives on-scroll, adding fluidity to the navigation.

Lazy Load Design

We used lazy loading to show critical elements only when needed while fading out the rest to optimize website performance.

Maximum Test Coverage

After implementing everything above, we ran UI, functionality, and cross-browser tests to deliver a superior-grade product.

Timely Handover of Deliverables

Capital Numbers’ timely handover of all the files and templates helped the client with a high-quality go-live.

PSD to HTMLization

Our client was impressed with us turning multiple PSDs into pixel-perfect HTML5/CSS3 designs in a month.

Personalized Property Searches

With our solution, the client offers personalized property searches online, reaches out to a broader audience base, and collects more negotiation requests through embedded forms.