Как запустить проект для 60 млн человек: опыт Agima и «Комсомольской Правды»

История о том, как Agima создавала новый дизайн для «Комсомолки». Делимся нашим подходом к разработке такого масштабного проекта.

По данным 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-й заместитель главного редактора «Комсомольской правды»

Подписывайтесь на наш дизайн-канал в ТГ, там мы публикуем удачные работы, которые создают по всему миру.

0
24 комментария
Написать комментарий...
Мария Петрова

Комсомолка стала еще круче!

Ответить
Развернуть ветку
AGIMA
Автор

Спасибо!

Ответить
Развернуть ветку
Anton Reut

Зашел на сайт, на самых важных местах ОГРОМНЫЕ рекламные баннеры, любезно заблокированные моим АдБлоком но все равно съедающие более 50% пространства страницы, а новости где то в жопе внизу. Эй ребята, я новости пришел почитать, а не рекламу кликать, алё! 

Ответить
Развернуть ветку
AGIMA
Автор

Спасибо за замечание! Реклама, действительно, должна сворачиваться, если стоит блокировщик. Команда KP.RU уже работает над этим.
Подробные макеты дизайна можно посмотреть на Behance https://www.behance.net/gallery/101737771/Komsomolskaya-Pravda

Ответить
Развернуть ветку
Anton Reut

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

Ответить
Развернуть ветку
Олег Малахов

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

Ответить
Развернуть ветку
Anton Reut

Хлеб журналиста это НЕ реклама, прикинь.

Ответить
Развернуть ветку
Дмитрий Воробей

а что?

Ответить
Развернуть ветку
Александра Лябина

Круто) 

Ответить
Развернуть ветку
Олег Малахов

А это что? 

Ответить
Развернуть ветку
AGIMA
Автор

Совсем скоро тут появятся блоки с колумнистами и дополнительными материалами: погода, опросы, цитаты дня.

Ответить
Развернуть ветку
Олег Малахов

Ждем!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Anton Reut

Красота...

Ответить
Развернуть ветку
AGIMA
Автор

Серые горизонтальные блоки должны сворачиваться, если в них нет рекламы. Блоки в правой колонке тоже должны сворачиваться, сейчас у них просто прописан размер. Коллеги из KP.RU работают над этим. 

Ответить
Развернуть ветку
Дмитрий Воробей

Отличная большая работа! Жаль, что вся задумка дизайна убита страшными огромными блоками рекламы не по формату и содержанию. Даже теряешься куда попал)

Ответить
Развернуть ветку
Кристина Ляпцева

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

Ответить
Развернуть ветку
misha

это все кончено хорошо, но вы вообще видели что происходит рядом с нами? Полный абзац...

Ответить
Развернуть ветку
Anton Reut
Ответить
Развернуть ветку
Олег Малахов
Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Vladislav
«Комсомолку» читают все, от бизнесменов до студентов, а возраст 90% аудитории варьируется от 18 до 67 лет 

Вы там под чем? Если трое 20-ти летних читают комсомолку сидя в уличном деревенском сортире, это не повод утверждать, что молодежь читает это. Комсомолку читают люди, которым уже за 40 и скоро помирать

Ответить
Развернуть ветку
AGIMA
Автор

Статистика Google Analytics говорит нам об обратном. Всего около 60 млн. читателей, а количество 20-х пользователей более 10%. 

Ответить
Развернуть ветку
Алексей Фролов

Где предупреждение о cookies? (в разделе промокоды оно есть, но там и дизайн иной)
Почему среди социалок нет телеграмма? Он уже не под запретом. Зато есть ICQ (?!)

Ответить
Развернуть ветку
Виктор Гаврилов

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

Ответить
Развернуть ветку
21 комментарий
Раскрывать всегда