Website of the Novye Akademiki Residential Complex

Website of the Novye Akademiki Residential Complex

UI/UX design, Next.js, Bitrix development, back-end and CRM integration

M. Timashova

marketing director

Glavstroy LLC would like to thank digital-agency Only for the work done on planning, design and development of the website of the Novye Akademiki residential complex.

M. Timashova

marketing director

Glavstroy LLC would like to thank digital-agency Only for the work done on planning, design and development of the website of the Novye Akademiki residential complex.

Novye Akademiki is a unique spot for urban family life surrounded by nature from the developer Glavstroy.

We were tasked with creating a website that could fully represent the future complex and be the primary platform for booking and selling apartments. In addition to the main website, we also had to develop a master plan and a booking module.


Step-by-step launch:


- development of the lending page,
- development and launch of the main website,
- design and development of the booking module.
CSSDA

Website of the Day. Best UI/UX Design and Innovation

Runet Rating

1st place. Construction

Mixxrussia

Bronze. Craft. Web-sites. UX/UI

WOW Awards

Short-list. Website of the project.

WDA

Gold. Real estate

Task

Novye Akademiki Residential Complex is a new business-class residential complex and a flagship project in Glavstroy’s lineup. Our task on the project was to create a website that not just sells apartments, but helps the user to see themselves in this space.

The key idea of the project is to live together with the family surrounded by nature and harmony, without compromises between the comfort of a city apartment and the freedom of a suburban lifestyle. It was important for the client to build communication in such a way as to talk not only about the characteristics of the object, but also about the dreams, needs and lifestyle of future residents.

In addition to UX tasks, the business aspect had to be taken into account: the site was launched in stages, synchronizing with the sales schedule and advertising campaigns. This required a well-thought-out strategy and flexibility in implementation.

Decision

In order to create a website that really helps the user to choose a dream apartment, we approached the task comprehensively:
1) In-depth analysis: we studied the site and its competitors, layout features, brand positioning and buyer behavior;
2) Strategic design: based on the collected data and hypotheses we developed a convenient and logical structure of the site, optimizing the user’s path to purchase;
3) Concept and Design: created a visual concept that not only supports the brand of the housing estate, but reinforces it by conveying the key values and atmosphere of the project.
4) Technical implementation: developed a user-friendly system where users can not only explore the project, but also go through the entire buying process online.

The launch took place in three stages. From a promo-lending site turned into a full-fledged service with a wide range of functionality and a convenient personal account, which allows you to completely close the entire process of buying an apartment.

Key modules:
— Mortgage programs and calculator — a convenient tool for choosing financing terms.
— Apartment Library — a detailed database with filters that helps you easily find suitable options.
— Reservation module — the ability to immediately book an apartment online, making the buying process even easier. And this is just the beginning — the site continues to develop and add new features.

Overall vision of the project

This project has several key features that distinguish it from other solutions on the market.

1. Not a real estate marketplace, but a presentation of an LCD. Developers’ websites and aggregators are useful at the stage of market research, when the user is just getting acquainted with the available options. LCD site is relevant later — when a person has already chosen a neighborhood and class of housing and is considering a particular complex. Here it is important not just information, but an in-depth presentation that helps to visualize life in this space.

2. Thoughtful design, not overloaded with effects. We have studied business and premium-class housing websites and noticed that many of them are overloaded with complex animations. It may look spectacular, but it often interferes with the perception of information. In our project, we emphasized a calm and intelligent presentation that reflects the academic nature of the brand and meets the expectations of the target audience.

Who buys and how? Target audience research

For the business class audience, not only rational choice is important, but also the feeling of future life in the complex. That is why we organized the narrative on the website around the values of the audience. Through the stories of the characters, we showed a lifestyle without compromise: the harmony of nature and the urban environment.

To create a tool that really works, we deeply studied the product, business processes and brand of the housing estate. This allowed us to highlight key communication accents and express them in the design, interface, animation and visual content.

A website that sells emotions, not just meters.

We studied the target audience in detail: we broke down the home buying funnel, determined at what stage users come to the website of the housing estate, what their priorities, motives and expectations are. Then we delved into the portrait of a potential resident, their lifestyle, values and key needs.

This allowed us to approach the design from two sides: to create functionality that solves business problems and highlights the rational advantages of the project, and at the same time to find emotional points of contact with the target audience.

What am I dreaming about?

I dream of balance — for example, I don’t want to choose between a measured life in a country house and all the professional and cultural opportunities that the city center offers both me and my children.

Choosing an apartment: rational aspects

— Class of housing — quality of offerings and community
— Location — convenient and close
— Layouts — more spacious, comfortable and interesting
— Amenities — lifestyle support and enhancements

Choosing an apartment: emotional aspects

— I want to feel an emotional connection with the place where I live, I want to feel a «match» with my home
— I want to immerse myself in the atmosphere and visuals of the project, feel its uniqueness

Barriers and difficulties

— Developers have few offers for a family with two children and a request for two children’s rooms
— Small selection of apartment options, and we would like something interesting
— Too often requires personal presence, solving issues offline
— Unclear parameters of the apartment in advance

How do we talk to the user? Visual formula

We transferred Novye Akademiki’s identity into the digital space, creating a visual language that conveys the atmosphere of the project. For this purpose, we formed moodboards, developed the design attributes of the brandbook and worked on the content together with the client. The design concept of the interface is synchronized with the brand and works to reveal it.

The concept of «New Academicians» is inspired by the lifestyle of professors and academicians, their spacious apartments in Stalinkas with extensive libraries. We approached the design of the site as a premium architectural magazine: dense pages, large renderings, balanced typography. Reading it, the user gradually immerses into the project, tries on its atmosphere and begins to imagine his life in Novye Akademiki.

To achieve this effect, we used
— light, spacious layout,
— smooth animations that create a tactile effect,
— a calm palette emphasizing the aesthetics of the brand,
— image photos of people, helping the viewer to associate themselves with the atmosphere of the complex and its residents.

Identity development

We expanded the basic palette of the brandbook with additional shades and introduced colored accent blocks into the layouts. Multi-layered floral compositions create a sense of volume and space, and pleasant, unobtrusive animations bring a static image to life.

The shadows of the trees

The animated background element in the form of shade trees swaying in the wind creates an almost tangible mood of a country garden.

Visual content

Assembled a moodboard to work through the content.

Layouts

Adapted each layout to the site’s design system.

In what language?
Narrative formula

We built a narrative that does not simply broadcast the Novye Akademiki brand, but makes it alive and tangible. Instead of dry descriptions of the benefits, we introduced interactive and emotional elements that create an immersive effect:

— Stories from the characters. The complex tells its story through the stories of the characters — a family of modern «academics». They share their dreams and lifestyle, helping the user associate themselves with the project.
— Story of place. We added a cultural context: the neighborhood has always been closely associated with science and intellectuals, which means that a special environment close to the target audience is formed here.


Each of these elements strengthens the positioning of the project and helps the user feel part of the future community.

Actors


«It all started with a dream.» The narrative on the homepage is a story about a family and the transformation of a dream into an adventure. The images and desires of the main characters are implanted into a coherent story about the benefits of the complex.

Botanical Notes and Birdwatching

The section, designed like an encyclopedia, talks about the green areas of the complex, emphasizing its environmental benefits through an academic and systematic approach.

Developing the user journey

We built the user journey so that it was logical, convenient and involved in the atmosphere of the project. It was important not only to guide the user from first impression to booking, but also to maintain the integrity of the visual and semantic experience. The structure of the site combines functionality with emotional storytelling, supporting the concept of the project on all pages of the site.


The main goal was to make choosing an apartment simple and intuitive. For this purpose we worked out the key elements:


— Apartment library with convenient filtering, visualization of characteristics and the ability to select the ideal option by parameters.
— Live layouts that convey the aesthetics and spirit of the project.
— Interactive card with the ability to download the layout in PDF, save it to «Favorites» or send it to your loved ones.


As a result, we have managed to create a service that makes the choice of housing comfortable and meaningful.

UX design

The interface design is based on key user scenarios for selecting and booking an apartment. Following a preliminary study, we designed internal webpages and an apartment booking module with a personal account for managing booked lots.

Booking module

The booking module, unlike a simple application form, is a full-fledged service to simplify the process of buying an apartment. We have emphasized its intuitiveness, so that the user can go through all the steps without unnecessary complications.

The system allows you to:
— fill in all the necessary information, including the distribution of shares among the owners;
— upload documents for mortgage registration;
— receive notifications about the status of the reservation via iail and SMS.


For convenient and habitual authorization and registration we have implemented integrations with SendSay EMAIL service, Main SMS service and CRM-system, ensuring prompt communication with the client and automation of processes.

Personal cabinet

A full private office for multiple owners.

Development and integration of services

Our task was not only to implement conceptual solutions in code, but also to create a convenient, stable and easily manageable system.

Key areas of development:


1. Front-end of the open-source part
— Realized the conceived visual effects and animations, keeping high performance of the site.
— Developed a convenient mechanism for choosing an apartment on the master plan.


2. Back-end, CMS and CRM integration. The main priority — data security, relevance of information and convenient content management without loss in performance.
— Created an administrative panel with flexible settings.
— We implemented a mortgage calculator with real-time calculations.
— We set up integration with CRM and automatic updating of apartment information.


At the design stage we worked out technical limitations and requirements. As a result, we developed an API-agent that synchronizes CRM data with the site at specified intervals, and also implemented a system of recording for a closed presentation with a limited number of seats configurable in the administrative panel.

Apartment catalog

The apartment library and filters are implemented in such a way that the user can immediately read the basic characteristics and unique advantages of a particular apartment. We tried not to overload the apartment page with information and designed it taking into account CRM limitations.

Result

The result is a full-fledged product that not only convincingly presents all the features of the project, but also provides an opportunity to book and buy an apartment. Now we continue to develop the project, analyzing user metrics and introducing new tools to increase conversion.