JOIS. Website of a residential complex by MR Group

Context and objective

Our goal was to engage the user in exploring the project and convert the initial interest into a booking request or a visit to the sales office.

The work was carried out in stages: when the construction permit was obtained, we launched the landing page, then it was redesigned into the homepage of the website and the rest of the pages were launched, including the listing of apartments and integration with the CRM.

UX design

We used industry analysis to identify familiar patterns of interacting with the interface to choose premium-class apartments. Based on this, we compiled a feature list, which allowed us to find a balance between the promotional part and the service part of the website.

The apartment page is designed in a way to provide maximum information on the first screen. However, this information is sorted according to its relevance to the user.

Using the brand platform, quotes from in-depth interviews and benchmarking of business and premium class complexes, we made hypotheses on the structure of the homepage narrative.

A gradual general-to-specific narrative ensures a native perception of the information. The first blocks of the page contain the introduction of the complex, followed by details about the architecture, location, landscaping, and finally the corporate part.

Design

We adapted the JOIS brandbook identity to the digital environment, reflecting it in visual elements, gradient highlights, and characters.

Digital attributes: grid, block layout, operation principle of specific interface elements, micro-animations, develop and complement the brandbook. As a result, the website looks very cohesive and visually reflects the idea of the brand.

Frontend

We are using NextJS as stack, GSAP for creating animations.

Interaction with CRM via API.

The core sections of the website include two selection pages: a large list-catalog with flexible filters and a visual section — a master plan. This was the most demanding part of the front-end development. We added the ability to select a building, floor and apartment on the scheme to the basic parameters of the master plan. With the help of the master plan one can get detailed information about the apartment, price, number of rooms and square footage, as well as use 3D panorama. In the development of the master plan, we paid a lot of attention to adaptability and user-friendliness, taking into account interactivity and UX details.

Expanded functionality

There is a mortgage calculator in the purchase information sections. It integrates the GraphQL-based DVIZH service, which provides a wide range of opportunities for working with real estate, from booking to mortgage selection.

We worked with dynamic PDF structure — based on the available data, we generated a PDF presentation for each apartment with its own layout and parameters. This is a small but nice detail of the user experience.

Based on the floor plans provided, we drew floor plans in the style of the project and prepared them for integration into the website.

Backend

The project feature from the backend point of view is integration with MR Group CRM. After analyzing the technical requirements, we set up integrations with the customer’s external CRM system, prepared the admin panel and developed a REST API.

Despite the fact that Bitrix is not usually used to create APIs, we successfully managed to launch a working product.

Result

The JOIS website is a bright project that combines the spirit of the brand with thoughtful functionality. We made a complex integration with CRM, masterplan development, and presented the advantages of the housing estate, in which one would like to live, enjoying the opportunities.