Сайт для застройщика АтомСтройКомплекс

Главное о кейсе

— We adapted the client's new corporate identity to the web. It's mega-cool in its own right. We appreciate that we were entrusted to adapt it for digital.

— We implemented the website - the starting point of Atom's digital transformation.
The marketing team has ambitious goals, and the site is just the beginning.

— We implemented a single backend and laid the foundation for the future ecosystem of marketing projects. Now the data for apps, web displays of developer facilities, and other special projects are managed centrally. What's left to scale!

— We started working on improving the user experience when buying apartments.

***

— Адаптировали к вебу новый фирменный стиль клиента. Сам по себе он мегакрут. Мы ценим, что нам доверили сделать адаптацию под диджитал.

— Реализовали сайт — отправную точку в цифровой трансформации Атома.
У команды маркетинга амбициозные цели, и сайт — только начало.

— Мы реализовали единый бэкенд и заложили основу для будущей экосистемы маркетинговых проектов. Теперь данные для приложений, веб-витрин объектов застройщика, других спецпроектов управляются централизовано. Осталось масштабировать!

— Начали работать над улучшением пользовательского опыта при покупке квартир.

Бизнес-задача и ее решение

The design concept went through more than one iteration: the first concept failed to pass the defense within the team. After that, they decided to change the approach - now the concept was handled by three people, each developing a different version.

As a result, we developed three very different visions:

1) The first one was simple, functional and familiar to most users. In fact, it was similar to the sites of competing developers, but with the brand style of Atom.

2)In the second concept, we were able to preserve the familiar functionality, but show it from a fresh point of view. We designed it in a dark theme, with large typography and large cards. The content was revised, texts became more friendly.

3) The third concept went beyond the usual understanding of the site-developer. It turned out to be an airbnb among real estate developers.

At the meeting, the client evaluated all 3 concepts, but decided to make a symbiosis of the first and second options. The site was expected to have the usual functionality, but fresh, with great typography and user-friendliness. Also, a trick of the final concept was the use of two themes, light and dark.

When choosing a stack for frontend development, React.js was chosen, and here's why:
- React.js, with its component-based approach, achieves a 100% "as-in-market" result.
- Interface speed is many times faster than on less modern platforms
- The framework allowed us to make and optimize the site's interactive tools: calculator and interactive maps faster.

For the backend we used the Symfony framework. It allowed to:
- Develop flexible API for integration with various external systems
- Build a maximally custom admin panel for a convenient work of a content manager.
- In parallel independently lead development of the backend and frontend.

During development we stuck to the idea of a single backend - we make a backend for the client's ecosystem (e.g., API), which can then be accessed by any client product: website, app, frontend, and so on. The backend is not strictly tied to the site itself, it just transmits the information that the frontend outputs afterwards.

The backend and frontend interact with each other by means of GraphQL queries. It provides a good integration with the frontend. GraphQL allows to query only what is needed at a particular time and supports nested queries.


***

Дизайн-концепция пережила не одну итерацию: первый концепт не прошёл защиту внутри команды. После этого решили поменять подход – теперь концептом занимались три человека, при этом каждый разрабатывал свою версию.

В итоге получилось 3 совсем разных видения:

1) Первый получился простым, функциональным и привычным большинству пользователей. По сути, он был похож на сайты застройщиков-конкурентов, но с учетом фирменного стиля Атома.

2)Во втором получилось сохранить привычный функционал, но показать его свежим взглядом.Оформили его в темной теме, с крупной типографикой и большими карточками. Копирайтинг был пересмотрен, тексты стали более дружелюбными.

3) Третий концепт выходил за рамки привычного понимания сайта-застройщика. Получился такой airbnb среди застройщиков.

На встрече клиент оценил все 3 концепта, но решил сделать симбиоз из первого и второго варианта. От сайта ожидали привычный для пользователей функционал, но свежее, с крупной типографикой и юзер-френдли. Также, фишкой финального концепта стало использование двух тем – светлой и тёмной.

При выборе стека для фронтенда выбор пал на React.js, и вот почему:
— React.js со своим компонентным подходом позволяет добиться результата “как-в-макете” на 100%.
— Скорость работы интерфейса в разы быстрее, чем на менее современных платформах
— Фреймворк позволил быстрее сделать и оптимизировать интерактивные инструменты сайта: калькулятор и интерактивные карты.

Для бэкенда использовали фреймворк Symfony. Это позволило:
— Разрабатывать гибкие API для интеграции с различными внешними системам
— Собрать максимально кастомную админ панель для удобной работы контент-менеджера.
— Параллельно независимо вести разработку бэкенда и фронтенда.

В ходе разработки, мы придерживались идеи единого бэкенда — мы делаем бэк для экосистемы клиента (например, API), к которой потом сможет обратиться любой продукт клиента: сайт, приложение, личный кабинет и так далее. Бэкенд не имеет строгой привязанности к самому сайту, он лишь передаёт информацию, которую впоследствии выводит фронтенд.

Взаимодействие бэкенда и фронтенда происходит путем запросов на языке GraphQL. Технология обеспечивает хорошую интеграцию с фронтендом. GraphQL позволяет запрашивать только то, что необходимо в конкретный момент времени и поддерживается вложенные запросы.

Прочая информация о кейсе

Atomstroycomplex is the largest construction holding in the Urals region, which has its own design institute, contractors and its own fleet of equipment.

The company is engaged in construction of residential and commercial real estate, reconstruction of social facilities, production of materials for construction and finishing of houses, Atom has 11 own plants.

The purpose of the new site: to simplify the process of selecting real estate.

The old site had a number of disadvantages:
- Was saturated with information that turned into visual noise due to poor navigation
- Outdated design that did not match the new corporate identity of the company

The new interface was designed to solve these problems.

***
Атомстройкомплекс — крупнейший строительный холдинг в Уральском регионе, имеющий свой проектный институт, подрядные организации и собственный парк техники.

Компания занимается постройкой жилой и коммерческой недвижимости, реконструкцией социальных объектов, производством материалов для строительства и отделки домов, у Атома 11 собственных заводов.

Цель создания нового сайта: упростить пользователю процесс подбора недвижимости.

Старый сайт компании обладал рядом недостатков:
— Был насыщен информацией, которая превращалась в визуальный шум из-за плохой навигации
— Устаревший дизайн, который не соответствовал новому фирменному стилю компании

Новый интерфейс был призван решить эти проблемы.

Скриншоты