По данным Google Analytics, аудитория «Комсомольской правды» — более 60 млн человек в месяц, при этом ярко выраженного социально-демографического показателя нет. «Комсомолку» читают все, от бизнесменов до студентов, а возраст 90% аудитории варьируется от 18 до 67 лет. Нам предстояло сделать редизайн «Комсомолки», учесть множество факторов, интересов, поведение пользователей и приоритетов.
Рассказываем, как мы создавали новый дизайн, который улучшает бизнес-метрики сайта и закладывает основы гибкой дизайн-системы для дальнейшего развития.
Главные задачи:
1. Увеличить рекламный доход, при этом избавить сайт от раздражающих баннеров.
2. Создать новый дизайн, но сохранить народность и лояльность пользователей.
AGIMA мы выбрали потому, что их кейсы были очень успешные и с точки зрения дизайна, и с точки зрения аудиторных показателей. Издания после их работы не теряли лицо, оставались по-прежнему узнаваемыми, и перезапуски проходили достаточно гладко, без потерь.
Олеся Носова, Издатель KP.RU и 1-й заместитель главного редактора «Комсомольской правды»
Первый этап — ППО и исследование
Для того чтобы начать полностью менять газету, которую читают миллионы, нужно понять, какие проблемы есть сейчас, что нужно добавить, переработать, полностью исключить из процесса или внедрить.
1. Провели глубинное интервью с бизнесом и редакторами, чтобы понять, что важно для них, и какие цели и задачи они хотят решить новым дизайном. Мы выяснили, что у редакции бывают разные типы новостей: новость-молния, несколько главных новостей, новости в видеоформате. Так, мы решили сделать главную страницу составной. Редактор может сам из блоков собрать главную страницу в редакторе и лучше подсветить повестку дня.
2. Провели опрос среди читателей «Комсомольской Правды» и выяснили их боли. Узнали, что нравится читателям на сайте, а какие блоки нужно переработать или вовсе удалить из дизайна. Выяснили любимые рубрики и недостающие темы.
3. Провели анализ, какие статьи дочитывают до конца, а какие бросают на половине. Это помогло нам понять, в какие материалы мы можем ставить баннеры в начале статьи, в середине и в конце, чтобы они приносили коммерческий результат.
4. Выяснили, какие баннеры эффективны, а какие можно безболезненно убрать из рекламной сетки. Так мы выделили заметные, но не раздражающие рекламные места.
Проблема:
19% пользователей на десктопе использует AdBlock, и они не видят баннерную рекламу. А те форматы, которые использовались, раздражали пользователей. Порой на одном экране можно было видеть 3-4 рекламных формата (поп-апы, растяжки и боковые баннеры)
Решение:
Мы проработали местоположение баннеров на десктопе, выделили их, разместив на подложке. Убрали агрессивные баннеры (например, те, которые раздвигали контент страницы), переработали логику рекламных мест и одновременного показа. Кроме того, проанализировали источники трафика и выяснили, что 73% всех пользователей читают «Комсомолку» с мобильных устройств. Поэтому с учётом анализа данных и опроса добавили рекламные размещения на смартфонах.
Второй этап — Проектирование
Чтобы создать дизайн, который понравится всем, мы изучили поведение всех групп пользователей.
1. Сделали сегментацию
Мы определили для себя пять сегментов, которые характеризовались вовлеченностью и лояльностью: от группы совсем не лояльных пользователей до лояльного ядра. И для каждого сегмента выделили типовые паттерны поведения и триггеры перехода аудитории из одного блока пользователей в другой.
Для нас важным фактором стала лояльность группы и то, чем мы можем её повысить. Мы рассчитали, что лояльные пользователи в среднем «продаются» на 13% дороже (Cost per mille viewable ads). Стоимость дохода с визита лояльного пользователя в среднем больше на 248%. Это происходит за счёт большего количества страниц просмотренных за сессию и более высокой стоимости рекламы.
2. Визуализировали данные
Собранные данные из опроса, Яндекс.Метрики и Google Analytics нужно было визуализировать, чтобы принять решение по будущей структуре сайта. Поэтому мы выбрали инструмент DataStudio, который помог быстро собрать нужный нам дашборд, после загрузили данные для того, чтобы принять окончательное решение по UX-дизайну.
3. Подготовили прототип
Мы начали с прототипов ключевых страниц и сделали несколько разных вариантов решений, которые отличались по подаче материалов. Для нас было важным показать разные подходы к редизайну, чтобы вместе с редакцией КП обсудить преимущества каждого из решений, после чего уже двигаться по выбранному.
При проектировании я видел главную задачу в том, чтобы создать баланс между удобством для пользователей и бизнес-эффективностью нового сайта. Центральной идеей проектирования стала забота о лояльности пользователей, а на техническом уровне она была выражена в множестве метрик, на которых мы фокусировались при работе. На мой взгляд, акцент на лояльности позволил более консистентно подойти к решению основных задач и обеспечить лучшее понимание проекта у всех его участников.
Дмитрий Подлужный, Руководитель направления проектирования интерфейсов AGIMA
О том, как мы делали проектирование для «Комсомолки», читайте в статье Дмитрия Подлужного на cossa.ru
Третий этап — UI-дизайн
Мы очень хотели изменить жизнь миллионов людей и сделать новую «Комсомолку» модной и отвечающей трендам. Так, у нас получился первый концепт в едином синем пантоне, шрифтами без засечек, чтобы снизить шум на странице, широкими полями, чтобы дать читателю больше воздуха на странице. Дизайн был похож на модный иностранный журнал.
Неудача
Мы гордились этим дизайном, он нравился нам и команде КП. Но «Комсомолка» переставала быть народной газетой, теряла свою душу, свою суть.
«Надо добавить праздника!» — попросила редакция.
Попытка № 2 — UI-дизайн
После первой попытки визуализации мы нарисовали новый дизайн, сохраняя стиль прежней «Комсомолки». Мы сократили воздух между блоками, добавили шрифты с засечками, увеличили количество блоков, сделали комбинированные фотографии на главной странице и в разделах, а ещё добавили эмоджи в заголовки статей. А также разнообразили палитру цветов. Сделали сайт менее строгим и более живым. Мы выделили баннерные места, убрали раздражающие блоки и поп-апы, добавили новые по основе исследований и переработали мобильную версию.
Новый дизайн был принят без единой правки. Смотрите наш кейс на Behance.
Мы были готовы на эксперименты, но в определённых рамках. Всё-таки с такой большой аудиторией шутить не приходится. Больше всего нам понравилось то, что дизайн был основан на глубоких измерениях поведения нашей аудитории. Также AGIMA решила для нас важную проблему уменьшения рекламной нагрузки на пользователя.
Анна Шашлова, коммерческий директор KP.RU
UI-кит и конструктор главной страницы
Мы разработали подробный UI-кит для редакции «Комсомолки», который содержит более сотни макетов и рекомендаций: шрифты, отступы, размеры блоков или картинок, понтоны, рекомендуемое размещение баннеров.
Для редакции, в которой работает более 400 журналистов, мы создали конструктор главной страницы. С помощью различных блоков и компонентов можно собрать 4 варианта главной. Таким образом журналисты могут подсветить важные новости и сделать их более заметными без участия программистов.
Не удивляйтесь, если сегодня, зайдя на «Комсомолку», вы увидите дизайн, который будет отличаться от вчерашнего или завтрашнего.
Четвёртый этап — Авторский надзор
Несмотря на то, что мы сделали только визуальную часть, нам важно знать, как дизайн будет выглядеть на живом продукте. Мы предложили команде «Комсомольской Правды» провести наш авторский надзор. Для этого наши QA-специалисты перед запуском проекта провели тесты, проверили сайт на баги и дали рекомендации.
Чтобы выпуск новой «Комсомолки» был максимально комфортным для аудитории и для бизнеса, мы посоветовали сделать сплит-тестирование:
1. Выпустить сайт с новым дизайном на 1-2%, чтобы посмотреть, как пользователи будут себя вести. Так у нас будет время и возможность что-то изменить без потери аудитории.
2. Замерить данные, снять метрики, провести анализ. При необходимости устранить неполадки.
3. Выпустить сайт с новым дизайном для всей аудитории России.
Мы благодарны коллегам из «Комсомольской правды» за доверие к нам и возможность реализовать такой масштабный и интересный проект. Горжусь тем, что у нас получилось, и с нетерпением жду развития.
Наталья Романчук, руководитель проекта AGIMA
Это для нас первый опыт допуска в наша святая святых сторонних разработчиков. До этого все редизайны делались собственными силами. Поэтому мы искали тех, кто бережно обойдётся с нашим накопленным багажом, уважительно — к читателям и редакции, и при этом сможет переосмыслить наш сайт, вдохнуть новую жизнь. Мы очень довольны совместной работой и готовы к дальнейшему сотрудничеству.
Олеся Носова, Издатель KP.RU и 1-й заместитель главного редактора «Комсомольской правды»
Подписывайтесь на наш дизайн-канал в ТГ, там мы публикуем удачные работы, которые создают по всему миру.
Оригинал статьи: vc.ru