How We Generated Leads for the Real Estate Agency

I will run ahead and mention that it was a pleasure to work together with the agency team. They apply up-to-date sales methods, understand the importance of the content and its presentation, and are accustomed to making use of high-quality products and overall are attentive to details.

It seems to me that the team is able to change a general attitude towards real estate agencies, which are often nicknamed as unfair dealers with sticky fingers.

And now I will come to the project.

Research

We started working on the project by designing a customer journey map (CJM). We defined the touch points between the customer and the company and explored, in details, the ones relevant to the site development.

They also discussed the inner workings, in particular, how the leads move around the company. This affected the configuration of the forms and functionalities of the agents’ landing pages.

Prototyping

The site can be divided into four parts:

• The corporate part: The story about the company and team members, contact details, the customers’ feedback, vacancies; questions and answers are also placed here;
• Landing pages for key services: ‘ Sell’, ‘Buy’, ‘Exchange’;
• Feature stories;
• Property catalog, the coolest part of the site: We will devote the greater part of the story to it.

We proceeded to the prototyping phase a couple of weeks later only after the project started. All this time the agency team was working on the content. I cannot say that we took an active part in writing the content but we definitely gave some practical tips.

I suppose that the principle of ‘gaining pace slowly and then running fast’ is totally applicable to the development stage and to the project, in general. It was fruitful and pleasant to be handed a high-quality content and work with it.

We were aware that working on the project would last over four months while the client was eager to get the profit immediately. Therefore, we decided to split up the project into stages and initially start up the landing page for the main service, i.e. real estate sales.

So, the Page ‘Sell’

On the first screen, we give the main message ‘Sell your apartment in Minsk with profit’. The message immediately outlines the sales geography of the agency: Minsk, and its area of expertise: the sales of apartments. An additional message highlights one of the key features of the agency’s work: speed. On this page there is a form, in case the visitor is about to make use of their services.

The main means of contact between a potential customer and the agency is by telephone. Therefore, we placed two phone numbers and a call order form in the header.

The next block tells us about the advantages. Further, we reveal the details of how the agency carries out sales. There is another conversion form that offers a free property assessment.

We present the team and provide the main statistics about the company.

We disclose the work process. It is important that the agency works on exclusives and is bound to sign a contract with a customer, as well as the fact that services are paid for only upon execution.

We support a high level of the agency’s professionalism with the examples of successful transactions. In the block, there are two content types: a text and a video.

For a customer who’d like to sell an apartment and looks for an agency, it is important to know about a database of potential buyers available at the moment of the first contacts as it speeds up the terms of the sales. We offer an appropriate conversion form.

We follow up with a test-drive form of the service.

The story sounds logical, and we proceed to the design. Yes, against the logic, we did not go on to prototype the rest of the site pages but moved on to the landing page in order to, as we have mentioned above, start it up as soon as possible.

However, we will talk about the design in our story a little bit later, and now we will go on to the prototyping.

‘Buy’ Page

The story logic on the page ‘Buyer’ was similar. Of the features, the service can be divided into 2 parts:

• Property search;
• Registration and revision.

The service can be requested as a whole or in parts. Therefore, the page is divided into two units. To make it convenient, there are links to the corresponding blocks on the first screen.

‘Exchange’ Page

From a legal point of view, the ‘exchange of real property’ service is not available itself and is implemented through the sale of one property unit and the purchase of another one. However, in everyday life the ‘exchange of real property’ is a common phenomenon; therefore, we also make a separate landing page for this service.

On the page, there placed only one new block, i.e. a comparison of exchange options.

Home Page

Do not be surprised that we came to prototyping of the main page just now. After all, the most frequent entry points to the site will be landing pages of services.

To grab interest: the ‘Sell’ and ‘Buy’ forms on the first screen are of different logics. The first one is a two-step feedback form that allows us to obtain the visitor’s data. The second one is a filter, after applying which the visitor goes to the property catalog filtered by the corresponding criterion.

On the page, there are blocks of the team, articles and real estate objects. In the block of real estate objects, there is nothing remarkable. Everything interesting is located inside the section. A little bit of patience… two more paragraphs and we will come to its description.

Articles

There is nothing extraordinary: tagging, newsletter subscribing, social network sharing. From the unusual features: a possibility of insertion in articles a block with reference to the article with the relevant content and a useful stuff download block. You provide an email to the agency, and it sends you a brochure with (really) useful information. Certainly, we do not forget to get the subscriber’s consent for receiving further newsletters.

Team Members

For each team member, we designed a landing page with a story about them, some feedback on their work and real estate objects sold. We do not forget to supplement with a few words about the agency.

Real Estate Objects

Finally, we got to the biggest and sweetest piece.

The catalog provides two basic view options: ‘tile + map’ and ‘list’;
And two additional ones: only ‘tile’ and only ‘map’.

We chose the option ‘tile + map’ as the main one. It is the most informative as due to the large photos it gives a good visual representation of the object, describes the main features and allows us to understand where the object is located. I must admit that while developing this option we were inspired by AirBnB catalog.

We predicted the situation where the user could interact exclusively with the map and implemented informative pop-ups that appear by clicking on the labels of objects.

The ‘list’ view option has significantly fewer visuals, but it gives more information about the features of objects.

Each type of the object contains its own set of features. The most important (= frequently used) ones were taken out to the basic view of the filter display, the rest were placed at the extended one.

A separate task was to develop the catalog interface for mobile devices. For them, we left two view options: ‘tile’ and ‘map’. The buttons for switching options were moved to the bottom of the screen. This order allows us to manage the page with one hand. There, there is also a button for calling the filter block.

Object Details Page

‘The first screen’ is occupied with the visual content: photo and video gallery. Since the customer had certain preferences about the gallery layout and its functionality, it had to be customized. We will talk about it in the ‘Frond-End’ block.

The headline is placed under the gallery. Next is the object type and the address. The address serves as a reference to ‘move’ to the map with the object marked on it. Below them, there are object features, supplemented with icons for better visualization.

The right column of the page contains an object cost and a square meter price. Below them, there are the contacts of the agent and the agency. Further, there are the buttons to add to favorites, to share in social networks and to print.

At the end of the page, we offer options to continue: to subscribe to the objects or to go to similar objects.

And here we finished this stage of development. The remaining pages were implemented immediately in the design.

Design

The agency addressed to us with a ready-made logo and a basic set of elements of corporate identity. However, we had to adapt the logo to using it on the site. Originally, the text part was placed below the graphic one; thus, the logo unjustifiably increased the header height.

We redistributed the logo elements and adapted their size. The logo compactly fitted into the header. In the ‘Navigation’ block, we will tell you what versions of the header were worked out, and why they are more than one.

Service Landing

As we remember, we started designing with the ‘Sell’ landing page. The task to arrange the interface elements was solved out at the prototyping stage, and now we had to deal with color and graphics.

The background was chosen as white. We took the brand color as the main one because it contrasts well with the white background. The additional color is gray and its shades.

For forms, we chose a contrasting gray background as it singles them out well from the rest of the page blocks.

We paid attention to the details:

• supported two blocks of advantages with icons;
• worked over background patterns;
• made a custom video preview.

We decided to use the logo to the best effect in the ‘test-drive services’ block: a knight, who arranges a test drive for a horse. However, it turned out more vulgar rather than funny. In the end, we abandoned this idea.

Without waiting for the design of the remaining pages, we sent the ‘Sell’ landing page to coding; later, we programmed the forms. We deployed the page to the production server, set up analytics tools and launched the contextual advertising. The site has already begun to bring the leads.

The pages ‘Buy’ and ‘Exchange’ inherited the elements of the page ‘Sell’, and their design did not take a long time.

Object Landing

One of the agency’s marketing ploys is creating landing pages for the objects.

As the description of the objects could be very different, there was a problem in implementation. In some of them, the emphasis is worthy making on a visual part with adding a video gallery and a 3D tour to the page; in the others, for example, on infrastructure and figures.

We designed a landing page with 14 different types of blocks, which fully represent all the content.

Managing the blocks is flexible. We will talk about it in the ‘Back-End’ block.

Front-End and Integration with Yandex.Maps

Technologies

A stack of technologies is standard: HTML+CSS+JS. AJAX was used in filtering.

Map of Objects

The most interesting piece of work at this stage was the visualization of objects on the map, which employed the integration with Yandex.Maps. We will talk about it in details.

In the basic view version on the desktop device, the user sees the object tiles in one part of the screen and a map with object labels in the other one. The blocks are interconnected: with hovering over a tile, the corresponding label on the map reacts. With clicking on a label, the pop-up of a similar tile displays at a smaller scale.

Closely located to each other objects are combined into clusters. By clicking, we open a pop-up with a pager, allowing us to switch between objects inside the cluster.

The checkbox ‘Look for objects in a visible area of the map’ allows us to filter quickly objects by geography: the marked checkbox leaves in the tile only those objects that are visible on the map.

Depending on view preferences, the user can expand the tiles or the map to the full screen.

A separate task was to develop the catalog interface for mobile devices. For them, we left two view options: ‘tile’ and ‘map’. The buttons for switching options were moved to the bottom of the screen. This order allows us to manage the page with one hand. There, there is also a button for calling the filter block.

Object Details Page

Immediately after loading the page, the user can control the gallery by arrows on the keyboard.

One of the customer’s requests was to display the photos of objects in the maximum size. To do this, we had to customize the gallery: a click on the photo opens an expanded gallery. We simplified the control elements as much as possible and partially hid the panel with preview images. The panel appears only when we hover over it. This way we were able to expand the photos literally to the full screen.

Back-End

Technologies

As a platform for the project, we chose the Yii 2 framework. It allowed us to implement the project custom functionality within a reasonable time limit and budget. In the future, the site can be scaled without exerting excessive efforts.

What is important is that the framework provides a high speed of the site and easy controllability.

Landing Page Builder on a Subdomain at One Click

We have already begun to describe the object landing pages in the ‘Design’ block. Now we will talk about managing them.

A landing page can be created from the object details page by simply marking the checkbox on the editing page of the object. Meanwhile, all the data from the card ‘is pulled up’ to the landing, though in a different visual design.

Further, the block system comes into operation. In addition to the information from the object card, the site administrator can insert additional content blocks into the landing page in any sequence and in an unlimited number. We can choose one of the fourteen pre-specified styles. It turned out a kind of builder.
We also thought of making it convenient to the administrator: the block is created in two clicks – and it is immediately ready to be filled with the content.

The same functional was implemented for landing pages of team members.

Shortcodes

For text pages, we implemented the insertion of certain content blocks through shortcodes. For example, we can add a gallery, a video player, or a feedback block by a single click.

Bulk Image Upload

In general, there is nothing special. As a rule, over 10 photos are uploaded in the gallery of each object. Uploading each photo would be dubious fun.

We implemented the bulk upload. The administrator can select all the object photos on a local computer and upload them at once, or can upload them through drag & drop: drag the photos to a specific area of the editing page of the object.

Favourite Objects

There is no registration/authorization tool on the site. However, there is a possibility of adding objects to your favorites.

We implemented the functionality through cookies, i.e. the data that is stored in the user’s browser. If the users return to the agency’s website, they will find the selected objects added by them over the past 12 months.

Similar Objects

The algorithm to build up similar objects by features and cost on the object details page takes into account three criteria, each of which is given a certain priority. We also added a ‘backup’ list of similar objects in case there are no objects in the catalog that meet the main criteria.

Navigation

2.5 Headers

Some of the site pages are landing pages, which in most cases will be both entry and exit points. These pages are themselves able to convert a visitor into a lead, and the links to the other site pages will seldom be used. For these pages, by default, we folded the menu into a burger. Besides the burger in the header, we left a block of phones and definitely a logo.

For landings of team members and objects, located on subdomains, the menu was completely removed, since such landings are separate mini-sites.

On the remaining pages, the header contains an extended menu. With scrolling down the page the header disappears as well as it appears with scrolling up. This way helps save 75 pixels of screen height and fill them with useful content.

Meanwhile, the content management system settings allow us to apply any of the three header types for each site page.

Footer

The footer options are of the same logic. Landing pages contain a shortened version, in which there is no site map. In the footer of the remaining pages, a site map is displayed.

In addition, the content management system allows us to hide the company’s general contacts in the footer. The option is used in landings, on which the personal contacts of real estate agents are important.

Progress Bar

We provided a progress bar at the top of the page. It allows the visitors to understand where exactly on the page they are. The progress bar is especially useful on long landing pages and article pages.

Optimizing Page Loading

In addition to the basic measures to optimize a page load speed, the following steps were made:

• To animate banners when scrolling, we used the requestAnimationFrame function. It saves the CPU resources and makes the device run faster and generally function longer.
• We had to get rid of the custom scrollbar in the object catalog as it slowed down the tile loading when scrolling.
• In the tile slider, we implemented a lazy load: by default, only the first photo of the object is loaded, and the rest – while interacting with the slider.

As a result, the heaviest site page, i.e. the catalog of objects, is fully loaded within 4-6 seconds.

Launch and Development

We started up, as is customary, on Friday, December 29th, being accompanied by an unvoiced clatter of plastic cups at the office.

Afterward, we set up the goals and context for new pages.

At the moment, we are collecting data on the site users’ activities and will work on improving the functionality. After implementation, we will undoubtedly update the case.

So, to be continued…

The website is available here.