Name: Migrating the Myfood website from Tilda to WordPress and adapting it to cater to delivery services
Brand: Outsourcing Team
Rating: 5 (1 reviews)

Adding house 6 to the EDEM residential complex website

Client Information

The EDEM residential complex is a modern business-class residential complex designed for those who value a balance between technological comfort and tranquility. The project concept is based on creating a "city within a city," where architectural aesthetics are combined with high functionality.

CLIENT REQUEST

The main task was to integrate a new property, Building No. 6, into the existing visual real estate selection system. We needed to not simply add an information page, but implement a full cycle of interactive interaction: from displaying the building on the complex's general master plan to creating detailed surface plans with the ability to select each individual apartment and view its characteristics in real time.

Input data

Market:

Ukraine

Niche:

Construction

Progress of work

The project implementation process was divided into several stages: from preparing graphic content to programming the interaction logic with the database.

1. Preparation of Graphic Materials and Renders

The first stage involved working on the visual component. Since the site is based on the principle of Visual Selection, it was necessary to prepare high-quality renders of House No. 6 from various angles.

General Plan: We updated the overall map of the complex, adding an active zone for House No. 6. For this, we used the SVG-masking method (polygon mapping) on a static image.
Facades and Floors: Separate plans were created for each floor of House No. 6, taking into account the architectural features of this specific construction phase.
Apartment Layouts: Each layout was converted into a vector format for fast loading and correct display on mobile devices.

2. Creating the Data Structure in the CMS

To make House No. 6 part of the overall ecosystem, the administrative panel was configured:

Creation of a new “House No. 6” entity linked to existing categories.
Setting up a hierarchical model: House -> Section -> Floor -> Apartment.

3. Programming Interactive Selection (Frontend)

The most critical stage was the development of the navigation logic. We implemented the functionality of “drilling down” into the object:

Level 1 (General Plan): When hovering over House No. 6, the contour lights up. Upon clicking, the user is redirected to the section/floor selection page for this specific building.

Adding House 6 to the LCD «EDEM» website 3

Level 2 (Floor Plan): An interactive grid was implemented. Each floor of House No. 6 is a separate object that shows the number of available apartments upon hovering.

Adding House 6 to the LCD «EDEM» website 2

Level 3 (Apartment Selection): On the floor plan, each apartment is a clickable zone. We used an SVG manipulation library to ensure smooth color transitions during hovering.

Adding House 6 to the LCD «EDEM» website 5

Adding House 6 to the LCD «EDEM» website 4

4. Synchronization with CRM and Database

To ensure information regarding apartment availability in House No. 6 stays current, we set up synchronization. Any status change in the developer’s database is automatically reflected on the website. Validation scripts were written to check data integrity before publishing the new building to the public.

5. Adaptation and Testing

Since real estate selection often occurs on mobile devices, we paid special attention to the UX design of House No. 6 on smartphones. Instead of complex hovers, a tap system with pop-up tooltips was implemented. Loading speed testing for the plans was conducted, as the large number of SVG elements could potentially slow down the page.

The result obtained

As a result of our work, Building 6 has been fully integrated into the digital space of the EDEM residential complex. We successfully expanded the website’s functionality while maintaining its high performance and user-friendly interface.

The addition of a new property allowed the developer to launch full-fledged online sales for the new construction phase. Now potential buyers can see the current availability of apartments in Building 6 in real time, explore their floor plans and locations relative to the cardinal directions and the complex’s infrastructure.

In summary, we have created a comprehensive sales tool that automates the customer journey: from a first glance at the complex to a detailed examination of a specific apartment. This not only increased the website’s information content but also significantly simplified the work of the sales department, as customers now contact us with specific inquiries based on the options they selected on the website. The system operates reliably, maintains high loading speeds, and displays correctly on all types of devices.

If you need to develop complex functionality for your website, implement interactive elements, or automate product or service selection, the internet marketing agency Outsourcing Team has extensive expertise in such solutions. Contact us, and we’ll help you implement a project of any complexity!