Сайт для ГК ТОЧНО: создали новый сайт для ведущего девелопера в ЮФО

ГК ТОЧНО – лидирующая инвестиционно-строительная компания Юга России,, которая объединила под своим брендом крупнейшего застройщика ООО СЗ «ЮгСтройИмпериал», входящего в ТОП-10 крупнейших строительных компаний РФ, включен в список системообразующих предприятий Российской Федерации.

Прежний сайт существовал уже более 5 лет. Из-за его перегрузки и технических проблем было крайне сложно и затратно вносить корректировки. На момент старта работ сайт закрывал только потребности отдела продаж, а также устарел по функционалу, по сравнению с конкурентами.

Нашей главной задачей стало создание площадки, которая будет:

— объединять в себе все сервисы компании в одном месте для удобства пользователя;

— погружать пользователя в новый образ компании, знакомить с новой бренд-платформой и ценностями ТОЧНО

— минимизировать взаимодействие клиента с третьими лицами;

— иметь понятный дизайн и интуитивный пользовательский интерфейс, чтобы клиент мог осуществлять все действия самостоятельно;

— новой customer ecosistem и поможет компании шагнуть далеко вперёд в цифровизации.

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

Заказчик обратился к нам с предварительно собранной структурой веб-страниц, которую хотел бы видеть на новом сайте.

Компания только что провела масштабный ребрендинг, поэтому было важно разработать соответствующий дизайн, для комфортного погружения и знакомства пользователя в новую вселенную ТОЧНО.

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

К разработке нового сайта мы всегда привлекаем SEO-специалистов, чтобы сайт был готов к дальнейшему продвижению. Мы собрали семантическое ядро, провели SEO-аудит конкурентов и текущего сайта, результатом которого стали:

— рекомендации по структуре и концепции;

— карта редиректов;

Перенос сайта мы так же производим под надзором SEO-специалистов, которые контролируют, чтобы ни одна страница не потерялась из поиска.

Опираясь на все изученные материалы и рекомендации от SEO-отдела, мы приступили к разработке новой структуры сайта и страниц. Нужно было сделать удобный современный сайт для пользователя и обеспечить стабильную быструю скорость загрузки.

Мы создали архитектуру проекта, которая совмещает в себе не только текущий функционал сайта, но и имеет большое поле для масштабирования и внедрения новых “фишек”.

Также была внедрена технология SSR*, чтобы поисковые системы корректно индексировали содержимое страниц, представляющих собой большие массивы данных.

*Серверный рендеринг (SSR, от английского server side rendering) — это генерация HTML-кода всей страницы на сервере в ответ на запрос.

На этапе отрисовки прототипамы собрали референсы, под каждую страницу. Сайты строительных компаний имеют много общего, так как содержат UX (user experience) паттерны взаимодействия с тематикой недвижимости. Всего мы собрали около 60 скриншотов веб-страниц.

Расположение блоков продумано таким образом, чтобы пользователь мог найти ответ на любой вопрос и интуитивно осуществить действия от выбора квартиры до обращения в свою УК.

После согласования “скелета” сайта с клиентом, мы приступили к созданию дизайн-системы для MVP продукта. Для этого:

- проработали палитру цветов, исходя из брендбука компании;

- собрали шрифты и прописали в стилях размеры текстов;

- разработали пак иконок под стиль сайта;

- определились с сетками для всех доступных размеров экранов.

Концепт не пришлось долго выбирать и создавать множество итераций. Новый бренд-бук содержал все необходимые рекомендации для нас, мы наложили это на результаты нашей аналитики и пришли к одному единому варианту дизайна.

Отрисовка дизайна была постраничной, с целью оптимизации процесса правок и сонастройки с видением заказчика. Для начала мы создали варианты дизайна первой страницы с использованием узнаваемой буквы “Т”. Передавая ценности и философию нового бренда ТОЧНО в дизайне сайта, мы придерживались важнейшего приоритета — понятный пользователю user-friendly интерфейс.

Как только мы пришли к лучшей версии и финально определились с визуалом страниц, то перешли к полноценной разработке дизайна корпоративного сайта. Уникальных блоков получилось очень много, не учитывая адаптивные версии. Для демонстрации идей и проделанной работы над каждой отдельно взятой страницей нами использовались прототипы. Функционала Figma вполне хватило, чтобы визуализировать все идеи. А для согласования с клиентом мы разрабатывали кликабельные макеты страниц, в которых каждое действие имело свой отклик.

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

Мы ставили перед собой задачи:

- углубить погружение пользователя во взаимодействие;

- сделать сайт более живым и запоминающимся;

- увеличить среднее время пользователя на сайте;

- побуждать с помощью анимации пользователя к определенным действиям (нажатие на кнопки, обратить внимание на конкретный блок).

Изначально мы сделали структуру сайта и подготовили иерархию страниц. Для лучшего ранжирования и подключения контентной аналитики – мы использовали микроразметку (Shema.org), которая является важным параметром для поисковых систем, (так они лучше понимают контент, находящийся на странице). Это позволяет понять, какой контент нравится пользователям и какие источники приводят самую вовлечённую аудиторию.

Сайт был создан на Node.JS:

- vue.js – front-end 

- node.js, hapi.js – back-end. 

Данные фреймворки использованы для осуществления всех пожеланий клиента. В отличии от популярных CMS-систем с множеством ненужных функций, которые в большинстве проектов не нужны, современный фреймворк позволяет создавать высоконагруженные системы.

Исключительно для данного сайта был создан личный кабинет контент-менеджера. С его помощью сотрудник компании может самостоятельно наполнять необходимым материалом сайт, что значительно влияет на скорость работы сайта.

В ходе работы мы добавили следующие фишки:

- выбор городов и привязка объектов к городу присутствия

- массовое редактирование карточек объектов: присвоение скидок, тегов, компаса, отделки, ремонт и т.д.

- возможность генерации ЧПУ страниц для SEO продвижения.

- функция для выдачи ключей – возможность фиксировать на сайте дату выдачи ключей (отображается в виде календаря).

- функцию “Виртуальный тур” для каждого ЖК.

- и многое другое.

Проект уже опубликован и работает, однако, мы не останавливаемся на достигнутом. Во время работы над сайтом, как со стороны заказчика, так и нашей, возникла масса новых идей для масштабирования и улучшения, которые в скором времени тоже будут внедрены и реализованы. 

Это масштабный и интересный проект, в ходе которого мы смогли создать многофункциональную площадку для пользователя и передать новую концепцию, философию, позиционирование и фирменный стиль компании ТОЧНО.

Каждый желающий может убедиться в этом уже сегодня. Мы действительно добились желаемого результата: 

- сайт получил новый уникальный интересный дизайн; 

- представили все необходимые сервисы компании;

- новая платформа позволила расширить линейку интернет-продуктов компании и дала к ним доступ пользователю;

- так как сайт не обделён административной частью, его по-прежнему легко наполнять;

- сайт адаптирован к дальнейшим внедрениям, продвижению и готов к быстрому масштабированию;

- функционал обновления контента для администратора проработан с учетом удобства и просты, без необходимости дополнительной помощи от разработчиков.