Сайт апарт-комплекса работал и приносил какие-то результы, но у маркетолога и отдела продаж было ощущение, что можно получать больше. Мы переделали сайт объекта недвижимости, внедрили несколько несложных инструментов и заказчик стал получать больше заявок с сайта, а поддержка сайта стала проще, быстрее и дешевле за счет экономии времени сотрудников.
Постановка задачи
Заказчик обратился с понятной задачей: надо обновить сайт. Удалить старую и ненужную информацию, добавить новую, переделать некоторые блоки и сделать сайт более читаемым. Также нужно было упростить процессы редактирования материалов на сайте силами сотрудников. Все необходимое для работы было собрано в документе, как техническое задание.
Из ограничений в проекте был только некоторый дефицит визуальных материалов, по срокам и бюджету быстро согласовали комфортные для всех рамки.
Аудит сайта выявил некоторые особенности, характерные для архитектуры проектов на Tilda. Регулярные материалы, например, отчеты о ходе строительства, верстались вручную с помощью Zero-блоков. Такой подход отнимал неоправданно много времени на добавление простейших материалов из пары фоток и текста. Это надо было исправить и для раздела с новостями, и для раздела с документами стройками.
Сами страницы были собраны так, что редактировать их было достаточно сложно: один и тот же блок имел две версии для разных экранов, большое количество отключенных блоков, занимающих пространство, устаревшие блоки, которые никак не использовались в проекте.
Визуальная система сайта строилась на фирменных цветах и реализация была неконтрастной, трудно читаемой. Дизайн система в некоторых местах страницы не соблюдалсь, а отдельные страницы выглядели очень разнородно. Зачастую важная информация, например, навигация была спрятана за кнопки, табы и вкладки. Такой способ затрудняет изучение сайта и плохо сказывается на поведенческих факторах.
Также к недостаткам визуальной системы можно отнести некоторую разнородность представления информации: часть блоков занимала всю ширину экрана, а часть была в определенных рамках. Контент на странице визуально был неоднороден, ломались паттерны считывания.
Поиск решения
Для исправления выявленных недостатков были предложены следующие решения:
- использовать ТЗ как основу, но вносить изменения не точечно, а работать сразу со страницами в целом;
- изменить дизайн-систему, оставляя узнаваемые элементы, но сделать ее более контрастной и читаемой;
- изменить архитектуру страниц и блоков для более простого и понятно редактирования, подключить Потоки для регулярных публикаций;
- переработать навигацию по сайту, она становится двухуровневой: глобальная по всем страницам и локальная по конкретной странице
- сделать в общей стилистике страницы информационного и служебного разделов сайта.
В ходе работы над проектом маркетолог заказчика предложил внедрить несколько решений, которых не было в ТЗ, но реализация сильно не влияла на договоренности. Поэтому на сайте появились: дополнительные формы обратной связи для минимально стрессовых действий, интерактивная карта с точками интереса, обратная связь с фото сотрудников.
Давайте смотреть, что у нас получилось в итоге!
Внедрение решений
Основная задача: изменить внешний вид на более читаемый и строгий. Изменить порядок подачи информации, удалить неактуальную информацию. Сделать визуальный язык сайта более упорядоченным и консистентным. Для решения задач использовать наработки в бренде; нельзя терять идентичность фирменных признаков, делающих бренд узнаваемым.
Внешний вид и дизайн
Для решения задачи была разработана концепция визуального вида.
Главные отличия концепции:
- упор на изображения - картинка считывается в 15 раз быстрее, чем текст, поэтому больше изображений и меньше текста;
- “резиновая верстка” - контент равномерно распределен по ширине экрана и растягивается, заполняет отведенное ему место на разных экранах, от смартфона до экрана компьютера;
- увеличение контрастности текста - для улучшения читаемости и восприятия текстовой информации;
- работа с типографикой - приведение текстовых блоков в единую сквозную систему по всем страницам;
- уменьшение визуального шума - удаление необязательных элементов и анимаций со страницы, изменение приоритета композиции;
- создание цельности образа - элементы сайта визуально однородные и подходящие по смыслу, соответствующие требованиям брендбука.
Концепция была утверждена практически без правок, благодаря хорошо поставленному техническому заданию и слаженной работе отдела маркетинга с исполнителем.
Технические особенности
Делаем дизайн более спокойным и удобным для использования, облегчаем жизнь и работу контент-редакторам, добавляем интерактивности для роста поведенческих факторов.
Переработана навигация по странице и сайту: элементы не прячутся, доступны сразу; информация разнесена на 2 уровня; основной уровень закреплен при скролле страницы.
Слайдер на главном экране заменен на статический баннер с преимуществами.
Акции и предложения видны явно сразу под главным баннером и не мельтешят.
Преимущества состоят из подразделов, упор на изображения и галереи.
Для раздела Расположение разработана интерактивная карта с точками интереса.
Раздел Доступные планировки переделан в карточки апартаментов с возможность получить консультацию.
Выведены стримы потокового видео для камер, снимающих ход строительства. Отчеты о ходе строительства теперь работают в Потоках, встроенном инструменте Tilda для регулярного контента; добавление и редактирование отчета теперь оптимизировано и упрощено.
Для проекта использовано три скрипта JS: закрепление меню, открытие своего окна вместо корзины в карточке товара, автоскейл стандартных блоков. Используется интеграция с Домопланером, тоже через скрипт.
Написано 60+ строк CSS для правки стандартных блоков.
Маркетинговые механики
В ходе работы над редизайном отделом маркетинга были предложены некоторые доработки, которых не было в первоначальном задании. Их реализации могла повысить ценность предложения для потенциальных покупателей, поэтому доработки были приняты в работу.
Для внедрения этих изменений была принята гипотеза: основная часть посетителей не хотят разибраться в тонкостях, им нужна консультация по интересующей теме. А для более мотивированных есть виджет Домопланера, где можно выбрать конкретный объект, узнать его стоимость и забронировать.
Были разработаны форма обратной связи для посетителей, чтобы они могли оставить заявку по интересующим их темам. Каждая форма подписана, чтобы было квалифицировать лид. Аналитика по формам собирается и передается в системы.
На основе технологий Яндекс была сделана интерактивная карта с различными объектами, представляющими интерес для потенциальных покупателей.
Разработан блок о строящемся многоуровневом паркинге, с преимуществами и возможностью выбрать машиноместо в Домопланере.
Добавили в блок информацию о застройщике, его успеха и кнопку перехода на сайт.
Добавили блок с вопросами и ответами на них, и «очеловечили» блок с обратной связью, добавив фото сотрудников.
Информационный раздел
Для привлечения трафика по информационным запросам на сайте был сделан раздел Полезная информация. На странице 10 карточек, которые вели на небольшие текстовые материалы, "оптимизированные" для поисковиков, но по сути - просто текстовки с ключевыми словами.
Все этим материалы были переработаны и перенесены в Потоки.
Каждая статья получила техническую оптимизацию: Title, Description, структуру H1-H3, где уместно, изображение. Со старых страниц настроили редиректы, чтобы не терять трафик.
Служебный раздел
Обычно под служебным разделом мы понимаем страницы, которые обслуживают работу сайта: всякие политики и соглашения, спасибо и 404. На этом проекте добавились страницы со строительной документацией, которая нерегулярно, но обновляется.
Для облегчения работы сотрудника, публикующего эти разрешения и декларации, перевели раздел в Потоки. Теперь опубликовать новую версию документа очень просто и быстро. Все публичные документы собраны в простую и понятную систему на странице.
Страницы с юридической информацией - тоже часть сайта и единой дизайн-системой, мы так считаем. Поэтому даже на таких страницах мы стараемся сделать подачу информации удобной и структурированной.
Итоги редизайна
В текущей реализации редизайн выполнил все поставленные задачи:
- упростил сотрудникам поддержку и развитие сайта;
- повысил ценность предложения для посетителей, внедрив простые и понятные механики взаимодействия;
- сайт стал приносить больше обращений, которые легко квалифицировать;
- дал отделу маркетинга возможности делать более точные гипотезы и предложения для покупателей.
Заложена визуальная платформа и дизайн-система для дальнейшей работы над элементами страниц и самими страницами сайта. Мы продолжаем сотрудничество с заказчиком.
Разительно легче и удобнее все это, уже обратил внимание, когда фотоотчеты делали!
Маркетолог апарт-комплекса
Время на разработку и внедрение обновления сайта заняло 21 рабочий день, и еще 7 дней на работы по изменению всех страниц, включая служебные и информационные.
Хотите запустить свой проект: сделать редизайн или разработать сайт с нуля? Оставьте заявку удобным вам способом, обсудим детали и прикинем сроки реализации.
