Digital-газета для фестиваля Яндекс Ecom Open Air

Частая проблема: пришел на крупный фестиваль и не успел охватить все лекции, посетить все интерактивы и собрать все инсайты. Именно так и родилась идея digital-газеты фестиваля, ссылку на которую получили все участники фестиваля.

Редакция Яндекс Рекламы позвала нас воплотить идею в жизнь и создать новостной сайт с экспертными материалами для всех участников фестиваля Yandex Ecom Open Air, чтобы поделиться актуальными трендами индустрии и интересно рассказать об успешных кейсах, полезных инструментах и решениях в интерактивном формате digital-газеты.

Всем привет! Мы — команда дизайн-агентства Bauns с экспертизой в дизайне и разработке для крупных выставок и фестивалей.

Совместно с командой Яндекс Рекламы мы разработали не только сайт, но и собрали оригинальные экспертные материалы про ecom, чтобы каждый участник фестиваля мог сохранить главные инсайты этого года от ведущий специалистов индустрии, узнать еще больше информации и поделиться ею с коллегами. А те, кто не успел посетить мероприятие — в любое время после фестиваля могут зайти на сайт и посмотреть лекции спикеров, которые прозвучали на Яндекс Ecom Open Air.

За 3 недели с нуля подготовили 25 оригинальных экспертных материалов: продумали рубрики, написали статьи и провели четыре больших интервью с экспертами из ВкусВилла, Lamoda, Eburet и UsabilityLab.

Сайт посетило более 7000 пользователей и более 2000 поделилось новостям в социальных сетях. Гибкое решение с новостным порталом и удобной CMS теперь можно использовать для будущих фестивалей, меняя и дополняя контент.

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

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

Так мы создали уникальную возможность для участников как Ecom Open Air, так и других мероприятий Яндекса: получить после любого события в интерактивном формате дополнительный контент по теме, а еще быстро и удобно найти все лекции и материалы от спикеров.

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

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

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

Ещё на этапе проектирования мы пришли к креативной идее: упаковать digital-газету как интернет-магазин — с карточками товаров-статей, «каталогом» с категориями. И чтобы пользователи могли откладывать статьи в избранное, как на любимом маркетплейсе. Команде Яндекса идея понравилась — и мы взяли её в работу.

Прежде, чем приступить к прототипу, мы откатились немного назад и снова отправились дособирать референсы, но в этот раз анализировали крупные интернет-магазины и их паттерны.

Позже от некоторых привычных решений в дизайне интернет-магазинов мы отказались. Например, боковое меню убрали, чтобы оставить больше воздуха в дизайне. А с кнопкой «Купить» проводили небольшое исследование и показывали на примерах ведущих маркетплейсов, что "купить" выступает в некоторой степени рудимент.

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

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

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

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

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

В дополнение к материалам спикеров с самого фестиваля мы написали уникальные статьи на основе интервью с экспертами из ВкусВилла, Lamoda, Eburet и UsabilityLab. Получилось 6 самостоятельных рубрик и 3 формата подачи информации: “Ecom в цифрах”, “PRO омниканальность: кейсы”, “Блицинтервью”, “Успешное решение на заметку”, “Инструменты в дело”, “База знаний специалистов”.

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

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

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

Мы предусмотрели форматы так, чтобы ключевая информация из рубрик воспринималась легко и понятно: для “Ecom в цифрах” — слайдер карточек с цифрами, для “Блицинтервью” — короткие кружки от специалистов с видео-ответами на вопросы, видео для “Базы знаний” и текстовый формат для остальных новостей.

Несмотря на разные функциональные решения мы объединили статьи, создав единый дизайн pop-up окна и уницированную навигацию. Это позволило сохранить узнаваемый паттерн для просмотра контента. 

В мобильной версии pop-up с новостями визуально превращаются в самостоятельные страницы. При этом технически мы сохранили код, оптимизировав бюджет и просто расширив размер pop-up на весь экран. Это было важным решением для удобства пользователя, чтобы увеличить площадь просмотра контента.

Финальные тексты для digital-газеты должны были появиться в последний момент, потому что фактуру для них эксперты могли предоставить только за три недели до запуска сайта. 

Если бы мы писали сайт только на frontend — успеть внести согласованные материалы на сайт было бы невозможно. Поэтому мы заранее продумали административную панель для быстрого заполнения новости для любой рубрики в нужном формате. В качестве CMS мы использовали ModX. Это решение позволило не только оперативно работать с контентом, но и создать из сайта универсальный инструмент для сбора новых материалов или инсайтов с фестиваля или конференции для всех участников в одном месте.

Для отслеживания эффективности сайта после публикации мы продумали ряд решений: 

— возможность поделиться любой статьей и сайтом, которая позволила отследить заинтересованность в конкретных материалах;

— форма обратная связи в виде простого pop-up окна с пятибалльной оценкой и отзывом, благодаря которой была получена средняя оценка газеты 4,8 и ценные комментарии для будущих обновлений. Форма появляется после 2-х минут, проведенных на сайте, по итогам аналитики среднего времени на чтение одной статьи.

В рекордные три месяца в совместной синергии с командой Яндекс Рекламы мы создали функциональную digital-газету и универсальный инструмент: придумали концепцию, отрисовали дизайн, запрограммировали сайт и разработали рубрики. А 25 оригинальных материалов написали вообще всего за три недели. Клиент доволен. Мы — тоже.