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

1. Вводная задача от заказчика, проблематика, цели

ГК ТОЧНО – лидирующая инвестиционно-строительная компания Юга России.

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

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

• объединять в себе все сервисы компании в одном месте для удобства пользователя;
• погружать пользователя в новый образ компании, знакомить с новой бренд-платформой и ценностями ТОЧНО
• минимизировать взаимодействие клиента с третьими лицами;
• иметь понятный дизайн и интуитивный пользовательский интерфейс, чтобы клиент мог осуществлять все действия самостоятельно;
• новой customer ecosistem и поможет компании шагнуть далеко вперёд в цифровизации.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

1 этап: Анализ и сбор материалов

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

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

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

2 этап: Рекомендции SEO

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

• рекомендации по структуре и концепции;
• карта редиректов.

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

3 этап: Структура и архитектура сайта

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

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

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

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

4 этап: Прототип

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

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

5 этап: Разработка дизайн-системы

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

Для этого:

• проработали палитру цветов, исходя из брендбука компании;
• собрали шрифты и прописали в стилях размеры текстов;
• разработали пак иконок под стиль сайта;
• определились с сетками для всех доступных размеров экранов.

6 этап: Концепты и дизайн

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

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

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

7 этап: Анимация

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

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

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

8 этап: Разработка

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

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

• vue.js – front-end
• node.js, hapi.js – back-end.

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

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

9 этап: Запуск

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

• выбор городов и привязку объектов к городу присутствия
• массовое редактирование карточек объектов: присвоение скидок, тегов, компаса, отделки, ремонт и т.д.
• возможность генерации ЧПУ страниц для SEO продвижения.
• функция для выдачи ключей – возможность фиксировать на сайте дату выдачи ключей (отображается в виде календаря).
• функцию “Виртуальный тур” для каждого ЖК.
• и многое другое.

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

3. Результаты сотрудничества

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

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

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

4. Заключение

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