To develop a Real Estate Listings website which is quick to load with property details, wishlist properties and contact agents who are handing those properties. Client’s major requirement was to display the properties under our client and the agents who are associated with our client’s office.
Even though the website is planned to be developed in wordpress, the real estate data of the client is to be loaded into the website from the MLS listings provider called IDX Broker. Apart from these MLS features, the website also has 20+ pages with custom design and also an LMS system which provides real estate oriented courses for agents, buyers and sellers.
Sign-up to open the fenced box of hidden gems
Industry: Real Estate
Tools Used: WordPress, HomePress Theme, IDX Broker Plugin/API, LearnDash plugin, Landing Pages
Technology Used: WordPress, Php, Ajax
Region: United States
Project coordinator – 1
UI/UX designer – 1
Developer – 1
At the beginning of the project, the client selected a 3rd party theme(HomePress) from (themeforest.net). That theme has an inbuilt property management system and also supports IDX broker integration in a basic level. But since the client was looking for a customized design for IDX related pages, the suggested theme was of no use in terms of IDX related pages. Since ColorWhistle suggested (based on the initial discussion and requirement) the theme and the client had bought the same, we used the HomePress theme for non IDX related pages and for the LMS system and we planned to develop the IDX related pages using the IDX Broker API and by keeping the theme’s property related pages as a design reference.
Unlike other API projects, IDX broker’s API documentation was the major reference point for us and we had to be in constant contact with the IDX technical support team for doubts and clarifications. IDX Broker’s API documentation was hard to interpret and we had to almost contact the support for everything.
IDX broker’s API has various limitations in terms of API endpoints. Most of the API calls mentioned in their documentation were not available for production due to various reasons. There is no Search API call available to search properties by city, property type, sub property type etc. They provide 2 API calls for listings. 1. Featured Listings & Sold Listings.
Using this we need to store them in our own database and query it locally as per our requirement. And also, there was no API call to get the detailed listing data. Even for displaying the detailed data of a listing/property, we need to query through all the properties. This was a huge setback and this is not how an API development works usually. So we had to store the data returned from the API calls in our database and had to update the data at certain intervals to make sure the listing data was an updated one.
Planning for theme selection
Analyzing the impact of the third party theme(HomePress) which client purchased and its features, it was necessary for us to compare it with custom theme development and decide the best one based on various factors like time, cost and performance etc.
Website Design Plan
Even though the client selected a theme design, they demanded various changes in designs, colors, fonts etc.
So after installing the HomePress theme, we had to make various changes throughout the website with the client’s branding colors. Client also provided a detailed requirement about the changes they need in the existing theme design. So we had to make the changes in the design as per client’s requirement. Below are the major points which we considered while designing the website.
- Analyzing about client’s needs
- Brainstorming the immediate marketing goals
- Retaining only the required modules in the pages from the theme demo.
CMS pages development process
Even though this is a Real Estate Property listing website, the website had many CMS pages like About, Sellers, Buyers, Agents and Contact pages, and also an LMS system to be built using LearnDash. As there was always delay from the API side, we decided to complete the LMS work and other CMS pages work upfront. We finished the CMS pages development and LMS development along with mobile responsiveness.
Tour pages development process:
Since the client wanted the design of the property oriented pages to be like HomePress theme design, we developed property listing related pages using the IDX Broker API with HomePress theme designs as reference. Below are the property related pages we built using IDX Broker API.
- Listing active properties under the client.
- Listing properties under the client based on Property Type(Land, Residential, etc)
- Listing properties under the client based on Property Sub Type(Single Family Residence, Improved Land, etc)
- Listing properties under the client based on City(Autora, Parker, etc)
- Listing properties under agents associated with this account.
- Property details when clicked from the listing page
- Search and listing Properties (under the client) results based on the search.
We followed the below points while developing these pages.
- Compatibility analysis – HomePress theme with property listing related custom coding vs latest WP version & other plugins
- Analysis to make use of existing property layouts used in CMS pages which will help save time.
- Deciding on the right development strategy as this phase involves more custom work.
Other modules development process
Since the property listing data is coming from IDX Broker API and stored in our database, we built our own wishlist module by ourself without using any existing plugins.In this process, we had various obstacles as we had to use AJAX for wishlisting a property and removing a wishlisted property to make sure that the page doesn’t load on the process.
As the property listing data is coming from IDX Broker API and stored in our database, we used it to our advantage to build our advanced search module which provides various search filters like price, city, property type, property sub type, ares size, number of bathrooms, number of bedrooms and property status etc.
Change in Client’s Requirement
We have completed all the website development work and we were planning to migrate the website to live. Client was happy with the demo and the client checked a few of their competitor’s websites and the client felt it would be even better to display all the MLS properties which are in the United States to be listed in her website and not only the properties under their company. This was a big change in requirement which might have a huge impact in the development timeline and client was aware of that and client was okay even if there is an increase in cost and time.
We reached the IDX Broker’s API support team about the requirement and to get clarification about which API endpoints to use for displaying all the MLS properties in the United States.
IDX Broker responded that there is no API to display MLS properties due to MLS data security. The only way to show all the MLS properties on the website is to use their IDX Broker plugin. But the issue with IDX broker plugin is that they don’t have any custom designs. They just provide basic design templates which look basic.
Redevelopment Process & Obstacles
Since we cannot use API for this requirement, we had to take off everything we developed using IDX Broker API and start everything from scratch using IDX Broker plugin and use Dynamic Wrappers option which they provide.
When we use API, we always have the liberty to use the data like we want and to display it whatever way we want to. But when we use plugins, there are so many limitations and we have limited freedom to play with. The client wanted the same design to be in plugin data like which we developed using API. This was a major challenge because we already have a design loaded from the IDX broker plugin and dynamic wrapper and we have only a CSS option to make it look like the custom design.
This process was so challenging to make the property oriented pages look like the custom developed one. Using our extensive knowledge in designing, we almost matched everything like we developed in API right from property listing pages, search page, advanced search page, property listings under agent page, featured properties snippets, sold properties snippets and listing detailed pages. One advantage of using the plugin & dynamic wrappers over the API development is we don’t have to develop Wishlist, Virtual Tour, Mortgage Calculator, Gallery etc. IDX Broker plugin itself provides these features in the specific pages.
IDX Broker’s Dynamic Wrapper Functionality
While using IDX Broker plugin & Dynamic wrappers, Property related pages do not directly get displayed on the website. They are loaded on a subdomain of idxbroker.com. To present it in a way that the properties are loaded in our website, dynamic wrapper functionality will use the header & footer from our main website so the users will get a feel like they are in the same website but they are actually not. They also provide an option to make sure the URL also looks similar to our domain name by doing CName DNS configurations which will load the Property related pages in our subdomain instead of IDX broker’s subdomain.
Overview of Website before redesign
The website was 20+ pages with about us, team member pages, blog, contact us, seller, buyer, agent and other pages built in wordpress. The website had the following features.
- Custom designed homepage with Intro video, properties by cities, featured properties
- Custom designed page for sellers, buyers, agents and team members
- Properties by Cities
- Properties by Property type
- Properties by Sub Property type
- Properties by Price(Luxury, Affordable)
- Property detailed page with Mortgage Calc, Gallery, Virtual Tour etc
- LMS courses with enrol feature
- Login and Registration feature
- Free home evaluation
- New server loads the redesigned website 80% faster
- Easy navigation in the header increases 200% more clicks
- Pages speed has been increased and loads in 4 seconds
- Easy login/registration
- MLS Properties listings
- Contacting agents who represent those properties.
- Able to attract more conversions with improved user journey
- Overall the website is ready again for new marketing campaigns to attract more users
As one of the top providers of real estate website solutions provider, ColorWhistle can create, strategize, design and develop your website requirements . From integrating a third party tools to website development, we can create effective solutions that will cater to your business challenges and goals.