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

Описание

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

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

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

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

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

Поставленная задача и ее решение

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

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

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

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

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

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

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

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

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

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

Скриншоты

Достигнутые цели и KPI по итогам запуска

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

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

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

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