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

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

По данным Google Analytics, аудитория «Комсомольской правды» — более 60 млн человек в месяц, при этом ярко выраженного социально-демографического показателя нет. «Комсомолку» читают все, от бизнесменов до студентов, а возраст 90% аудитории варьируется от 18 до 67 лет. Нам предстояло сделать редизайн «Комсомолки», учесть множество факторов, интересов, поведение пользователей и приоритетов.

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

Главные задачи:

1. Увеличить рекламный доход, при этом избавить сайт от раздражающих баннеров.

2. Создать новый дизайн, но сохранить народность и лояльность пользователей.

Первый этап — ППО и исследование

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

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

2. Провели опрос среди читателей «Комсомольской Правды» и выяснили их боли. Узнали, что нравится читателям на сайте, а какие блоки нужно переработать или вовсе удалить из дизайна. Выяснили любимые рубрики и недостающие темы.

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

4. Выяснили, какие баннеры эффективны, а какие можно безболезненно убрать из рекламной сетки. Так мы выделили заметные, но не раздражающие рекламные места.

Проблема:

19% пользователей на десктопе использует AdBlock, и они не видят баннерную рекламу. А те форматы, которые использовались, раздражали пользователей. Порой на одном экране можно было видеть 3-4 рекламных формата (поп-апы, растяжки и боковые баннеры)

Решение:

Мы проработали местоположение баннеров на десктопе, выделили их, разместив на подложке. Убрали агрессивные баннеры (например, те, которые раздвигали контент страницы), переработали логику рекламных мест и одновременного показа. Кроме того, проанализировали источники трафика и выяснили, что 73% всех пользователей читают «Комсомолку» с мобильных устройств. Поэтому с учётом анализа данных и опроса добавили рекламные размещения на смартфонах.

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

1. Сделали сегментацию

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

Для нас важным фактором стала лояльность группы и то, чем мы можем её повысить. Мы рассчитали, что лояльные пользователи в среднем «продаются» на 13% дороже (Cost per mille viewable ads). Стоимость дохода с визита лояльного пользователя в среднем больше на 248%. Это происходит за счёт большего количества страниц просмотренных за сессию и более высокой стоимости рекламы.

2. Визуализировали данные

Собранные данные из опроса, Яндекс.Метрики и Google Analytics нужно было визуализировать, чтобы принять решение по будущей структуре сайта. Поэтому мы выбрали инструмент DataStudio, который помог быстро собрать нужный нам дашборд, после загрузили данные для того, чтобы принять окончательное решение по UX-дизайну.

3. Подготовили прототип

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

О том, как мы делали проектирование для «Комсомолки», читайте в статье Дмитрия Подлужного на cossa.ru

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

Неудача

Мы гордились этим дизайном, он нравился нам и команде КП. Но «Комсомолка» переставала быть народной газетой, теряла свою душу, свою суть.

«Надо добавить праздника!» — попросила редакция.

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

Новый дизайн был принят без единой правки. Смотрите наш кейс на Behance.

Мы разработали подробный UI-кит для редакции «Комсомолки», который содержит более сотни макетов и рекомендаций: шрифты, отступы, размеры блоков или картинок, понтоны, рекомендуемое размещение баннеров.

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

Не удивляйтесь, если сегодня, зайдя на «Комсомолку», вы увидите дизайн, который будет отличаться от вчерашнего или завтрашнего.

Несмотря на то, что мы сделали только визуальную часть, нам важно знать, как дизайн будет выглядеть на живом продукте. Мы предложили команде «Комсомольской Правды» провести наш авторский надзор. Для этого наши QA-специалисты перед запуском проекта провели тесты, проверили сайт на баги и дали рекомендации.

Чтобы выпуск новой «Комсомолки» был максимально комфортным для аудитории и для бизнеса, мы посоветовали сделать сплит-тестирование:

1. Выпустить сайт с новым дизайном на 1-2%, чтобы посмотреть, как пользователи будут себя вести. Так у нас будет время и возможность что-то изменить без потери аудитории.

2. Замерить данные, снять метрики, провести анализ. При необходимости устранить неполадки.

3. Выпустить сайт с новым дизайном для всей аудитории России.

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