Кейс: как создать и продвинуть сайт для миллионной аудитории на примере ТРЦ
- Заказчик
- Торгово-развлекательный центр «Весна»
- Задача
- Разработка онлайн-представительства ТРЦ и его продвижение.
Ежегодная посещаемость ТРЦ «ВЕСНА!» – более 23 млн человек. Многие из этих людей сначала заходят на сайт, выбирают магазины и товары, смотрят акции, репертуар кинотеатра, время работы, карту проезда. Вся информация должна быть предоставлена быстро и удобно. Поэтому разработка онлайн-представительства ТРЦ – ответственная задача. Как раз такая, как мы любим.
Кроме того, у этого проекта есть еще один уровень сложности. Как правило, заказчики сайтов обращаются к нам за продвижением после запуска своего нового ресурса. Здесь речь изначально шла и о разработке, и о рекламной кампании. Причем требования по обоим видам работ были довольно жесткие. Как и сроки – поэтому наши проектные команды работали параллельно.
Рассказываем о том, какие сюрпризы ждали нас на проекте, и что в итоге получилось.
Навигация
Меню, разделы, кнопки для перехода между внутренними страницами, списки брендов и заведений – все должно быть на виду. Но при этом не занимать лишнего места, не отвлекать внимания. И учитывать требования SEO. И соответствовать брендбуку ТРЦ. И актуальным трендам web-дизайна. И многое другое.
Так обманчиво простые страницы, на которых «воздуха» больше, чем контента, превращаются в поле битвы аналитиков, дизайнеров, специалистов по юзабилити и поисковому продвижению. Наконец, золотая середина была найдена и воплощена в аскетичной верстке сайта.
Вся ключевая информации на виду, в «шапке» сайта. При выделении магазина показывается этаж
Особое внимание уделяется схеме ТРЦ. Это навигационное сердце сайта, потому что именно здесь посетители смотрят где какой магазин находится, решают куда и в какой последовательности заглянуть. По сути, планируют свой шопинг. И не только покупки, ведь в ТРЦ помимо магазинов еще развлечения, кафе, сервисные, другие заведения.
На схеме ТРЦ показано все, от парковки до туалетов
Возникает вопрос – как поддерживать схему в актуальном состоянии? Арендаторы появляются и уходят, в одном месте идет ремонт, в другом объединяют соседние помещения. ТРЦ функционирует как живой организм. В нем часто что-то меняется, и карту нужно обновлять.
Интеграция с инфо-стендами и сайтом кинотеатра
Вместо того, чтобы создавать отдельный интерфейс для редактирования карты магазинов в «админке» сайта, мы выполнили интеграцию с сетью информационных стендов. Речь о стойках с интерактивными экранами, которые давно уже стали привычным удобством торговых центров.
Афиша киносеансов тоже обновляется интеграцией, с сайтом кинотеатра. Свежие анонсы и описания фильмов появляются на сайте моментально, как только их опубликовали прокатчики. И никаких забытых «хвостов» – устаревшая информация удаляется автоматически.
Аскетичная «админка» на фреймворке Yii 2
Безупречная административная панель, или попросту «админка» – критично важный элемент в экосистеме сайта, который будет обслуживать миллионы посетителей. Продумать нужно каждую мелочь. Например, в каком порядке показывать новости – по дате события, дате размещения на сайте или по дате последней правки? А что делать, если совпадут специальные поля для дополнительной сортировки, которые контент-менеджер вводит вручную? На стадии прототипирования и отладки были проработаны различные сценарии, которые легли в основу «автопилота». Он помогает управлять системой, и защищает от ошибок.
«Админка» сайта такая же удобная, как публичный интерфейс
Чтобы избежать перегруженного интерфейса «админки», было решено не собирать ее из готовых модулей с избыточной и запутанной навигацией, а написать самостоятельно. В качестве платформы для разработки выбрали Yii 2 – мощный, надежный фреймворк. Он повышает скорость работы и отказоустойчивость сайта, что важно, учитывая вероятные пиковые нагрузки. Кроме того, фреймворк «развязывает руки» программистам, а значит и дизайнерам, специалистам по юзабилити.
Конечно, работы получилось больше, чем при сборке из софтверного конструктора. Зато отшлифовали управление на совесть. Все лишнее отключили, нужные функции разместили на расстоянии пары кликов.
Рекламная кампания
Наперегонки с разработчиками запуск сайта готовила вторая проектная команда – специалисты по медийной и контекстной рекламе.
Им нужно было провести точечную, «прицельную» имиджевую рекламную кампанию. Целевая аудитория – девушки и женщины от 20 до 45. География показов – территория рядом с ТРЦ. Жесткие ограничения по стоимости привлечения покупателей. Непростая задача, особенно если учесть, что в Москве больше двухсот торговых центров и все они стремятся оказаться на первых местах в поиске.
Как одновременно получить достаточный трафик, жестко таргетировать его и при этом остаться в рамках бюджета? Мы задействовали баннерную и контекстную рекламу, социальные сети. И главное – свои наработки по автоматизации аналитики.
Некоторые из баннеров ТРЦ «ВЕСНА!»
Все гипотезы по семантике объявлений, креативы и дизайны прошли отбор по A/B тестам. Каналы публикаций также оценивались по результативности, что немедленно учитывалось в перераспределении рекламного бюджета. Наконец, полуавтоматическая игра ставками при показах с учетом нужной гео-локации и других условий.
Быстрый отсев слабых вариантов и каналов помог сфокусироваться на хороших – после чего они также циклично проверялись и шлифовались дальше, снова и снова. Таким образом, получилось удержаться в рамках бюджета и при этом выполнить все задачи по KPI. Некоторые позиции даже перевыполнили почти в 2 раза.
Рекламная поддержка
Новый сайт ТРЦ давно работает в штатном режиме, рекламная кампания его открытия отработана и сдана в архив. Но информирование покупателей, разумеется, продолжается – и не только в виде обновлений контента или подписок.
Например, мы регулярно пересматриваем тематический план и содержание контекстной рекламы. Выдвигаем и тестируем гипотезы, собираем данные по результативности, отбираем «финалистов» и запускаем их приоритетную ротацию. Посетители ТРЦ «ВЕСНА!» всегда в курсе акций и новинок.
Примеры контекстной рекламы
Резюме
Этот проект стал хорошим испытанием с несколькими вызовами:
- Команда разработчиков помимо «обязательной программы» по созданию сайта выполнила также «произвольную», собрав админскую часть с нуля на фреймворке ради идеальной навигации и упрощения поддержки. При этом решили все поставленные задачи и уложились в первоначальные сроки.
- Команда рекламы оказалась «зажатой» между различными ограничениями, в том числе рамками ставок и таргетинга. Благодаря конвейеру креатива и автоматизированной аналитике им удалось выжать максимум из каждой копейки рекламного бюджета, выполнить и перевыполнить план. Тоже вовремя!
- Наконец, параллельная работа двух команд, плюс координация с внешними партнерами по интеграциям – все это создало дополнительные измерения и сложности, но результаты говорят сами за себя.
Разработкой и рекламой сайта ТРЦ «ВЕСНА!» занимались сотрудники, представляющие большинство отделов студии «МЕДИАСФЕРА»:
- Аналитики
- Верстальщики
- Дизайнеры
- Программисты
- Проектировщики
- Специалисты по медийной и контекстной рекламе
- Специалисты по SEO
- Тестировщики
Много разных ролей, люди решали разные задачи – но видели перед собой общую цель, и действовали как единое целое. Так и выглядит синергия. Производительность сыгранной команды выше, чем механическая сумма отдельных компетенций.
РЦ «ВЕСНА!» современный, успешный проект. Сайт должен соответствовать этой планке
Чек-лист разработки сайта ТРЦ
Онлайн-представительство торгового центра сложная задача, потому что целевая аудитория огромна. Любая мелочь в проектировании, интерфейсе или работе «движка» перестает быть мелочью. Задержки в доли секунды при пиковых нагрузках обрушат хостинг. Неудобно расположенная кнопка в «админке» может привести к ошибкам.
Несколько примеров того, на что следует обратить внимание при работе над проектом для ТРЦ.
Адаптивный дизайн
Расчет на разные виды устройств давно уже аксиома. Специфика в том, что нужно не просто «запихать» верстку в экраны от самого маленького до самого большого, но и продумать изменения в навигации, визуальных и смысловых акцентах. Люди по-разному ведут себя в офисе и за рулем, дома и на ходу. Сайт должен это учитывать.
Скорость мобильной версии сайта
Особое значение имеет скорость работы адаптивных версий сайта, на смартфонах, планшетах и других видах гаджетов. Уже более 70% аудитории заходит на онлайн-ресурсы с мобильных устройств. Значит, разработка должна оптимизировать загрузки, и потом регулярно мониторить этот показатель в ходе поддержки.
«Одно окно» для ввода данных
Покупатели видят информацию о магазинах, рекламных акциях и распродажах не только на сайте ТРЦ, но и на информационных стендах. А киноафишу – на сайте кинотеатра или прокатчика. Все эти сведения должны обновляться одновременно и быть абсолютно идентичными. Поэтому вместо дублирования баз данных и отдельных модулей для редактирования лучше автоматизировать синхронизацию с помощью API, выгрузок, других технических методов.
Автоматическая актуализация
Сайт должен упрощать, а лучше автоматизировать отключение устаревших анонсов и публикаций, обновление сведений о магазинах и других заведениях организации, учитывать смену сезонов, наступление нового года, возможно еще какие-то события. Посетителям нужна только верная информация.
Гибкая верстка
Иногда арендаторам ТРЦ недостаточно аскетичных маленьких баннеров, они хотят написать о себе больше, добавить фото-галереи, видео. Дизайн сайта должен предусматривать достаточно гибкую верстку, чтобы не приходилось делать доработки и все вместе смотрелось органично.
Настраиваемая фокусировка
Приоритет показа в списке арендаторов, внутри тематики, отображение на главной странице сайта, увеличение размера баннера и всего блока по конкретному магазину или заведению, опции для дополнительного информирования аудитории – умная «админка» сайта позволяет в несколько кликов вносить сложные правки, которые иначе потребовали бы полной переделки онлайн-ресурса. Таким образом, можно как улучшить сервис для арендаторов, так и управлять их сортировкой при показах. Внутренний таргетинг на сайте может окупаться в виде отдельной платной услуги, либо использоваться для маркетинговых целей.
Форматы файлов
Еще один критерий качественной «админки» – возможность использовать файлы в разных форматах, особенно графические. Хороший сайт не требует дополнительного программного обеспечения, аскетичен по запросам к компетенции контент-менеджера. Арендаторы ТРЦ присылают присылают информацию о себе в крайне разнообразном виде, какие есть. Для того, чтобы быстро и качественно использовать эти данные, сайт должен быть «полиглотом» и понимать различные форматы.
Контактные данные
Одна из причин, по которой люди заходят на сайт ТРЦ – уточнить адрес, точное местонахождение конкретных торговых точек, где какие выходы находятся, как проехать или пройти. Сайт должен давать наглядные, исчерпывающие ответы. Причем важно сделать показ локаций легким не только для восприятия, но и технологически. Не забываем про пиковые нагрузки.
Ничего лишнего
В погоне за оригинальным дизайном легко отойти от оптимального юзабилити и проверенных практик онлайн-торговли, учитывающих поведенческие факторы. Пусть лучше сайт будет похож на лучших представителей отрасли, зато и работает с максимальной эффективностью – держит нагрузку, дает быстрые наглядные ответы на запросы посетителей, повышает рентабельность бизнеса.
Чек-лист продвижения
Мало сделать хорошо, нужно оповестить целевую аудиторию. При этом современная онлайн-реклама в целом не про креатив или дизайн. Конечно, качественный контент необходим. Но ключевой фактор успеха — кому и как показывать рекламные сообщения. Поэтому фокусироваться следует на «скучных» и эффективных задачах.
Геотаргетинг
Начните с создания сегмента в Яндекс.Аудиториях, указав локацию вокруг продвигаемого объекта. ТРЦ собирает гостей со всего города, но местный органический трафик очень важен – и речь не про онлайн, а про поток живых людей на улице. Это потенциальные покупатели.
Корректировка ставок
Таргетинг по геолокации полезно дополнять уточняющим, по составу целевой аудитории. Управляйте ставками для показов тем людям, которые оказались неподалеку. Например, по полу и возрасту. Это ощутимо повысит конверсию в рамках рекламного бюджета.
Автоматический биддер
Вручную балансировать ставки, охваты и трафик – в принципе выполнимая задача, но гораздо продуктивнее автоматизировать этот процесс. С помощью специализированного программного обеспечения можно на порядки повысить скорость и точность коррекций. Таким образом, отдача на каждый рубль рекламного бюджета станет выше, как и качество привлекаемых лидов.
Мониторинг показателей
Автоматизация игры ставками дает преимущества, но личный контроль все равно необходим. Оптимально различать ежедневный мониторинг расходов и прогресса по выполнению KPI – а также еженедельный анализ сводки по всем основным показателям.
Перераспределение рекламного бюджета
На основании выводов по мониторингу обновляются приоритеты рекламных кампаний, площадок, каналов, конверсионных запросов, конкретных объявлений, изображений. Онлайн-реклама представляет собой сложное уравнение со множеством разных показателей. «Подкручивая» их, вы меняете фокусировку и результативность. Так в ходе быстрого естественного отбора рынок сам определяет, какие методы лучше подходят в данном случае – а вам нужно успевать реагировать на эти сигналы.