Комсомольская правда

Редизайн сайта, который должен понравиться 57 млн. посетителей в месяц

Дизайн Проектирование Web-аналитика Системная аналитика

Что сделали

  1. Создали гармоничный дизайн, основываясь на данных. Добавили полезные функции и выстроили новый формат коммуникации.
  2. Переработали рекламный инвентарь: баннеры меньше раздражают читателей и эффективнее работают.
  3. Разработали UI-кит и прописали рекомендации для удобства поддержки.
  4. Проконтролировали, чтобы идеи со стадии дизайна воплотились в работающий сайт.

Блочная система контента

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

Превью проекта

Главная страница

Мы сократили воздух между блоками, добавили шрифты с засечками, увеличили количество блоков, сделали комбинированные фотографии на главной странице и в разделах, а еще добавили эмоджи в заголовки статей.

Превью проекта

Конструктор для редакции

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

Фотография
Фотография

Не удивляйтесь, что Комсомолка меняется каждый день

Баннерная сетка

Теперь реклама не раздражает и эффективнее работает

Сделали новые форматы баннеров и выделили их цветом, чтобы они не сливались с редакторским контентом.

Изображение до Изображение после

Дизайн для AdBlock

Если у читателя установлен AdBlock, на месте рекламных баннеров отображается специальный блок с мотивирующей информацией.

Превью проекта

Статьи и новости

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

Превью проекта

Фотография

Опрос и цитата дня, цифра дня

Новые форматы контента

Мы добавили новые блоки, которые в одном месте помогут дать читателям исчерпывающую информацию. 

Фотографии: лучшие презентации гаджетов, карнавалы, селебрити. 

Видео: смотрите ролики за ужином или в метро, или когда лениво читать.

Фотография

Да!

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

Превью проекта

Фотография

Блок с колумнистами стал ярче и заметнее.

Фотография

Сделали страницы со спецпроектами. Вся страница и брендирование посвящены одному важному событию.

Фотография
Фотография

Многие функции, которые к этому времени уже считались обязательными.

Адаптивный дизайн

По данным Google Analytics 76% всей аудитории заходит на сайт со смартфонов. Мы сделали мобильную версию удобной: крупный текст, большие фото, заметное меню и понятная навигация.

Превью проекта

UI-кит для редакции 

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

Фотография

Фотография

Фотография

Фотография

Фотография

Фотография

Фотография

Фотография

Процесс создания проекта

Прочитать статью о проектировании на cossa.ru, о ходе проекта на vc.ru и о задаче и результатах на Комсомольской правде.

Превью проекта

Интервьюирование бизнеса и журналистов

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

Превью проекта

Исследование

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

Превью проекта

Выяснили:

  • Какой путь проходит пользователь;
  • Что приносит больше денег — с точки зрения как форматов, так и разделов;
  • От чего мы можем отказаться на сайте;
  • Какие статьи дочитывают до конца, а какие бросают на половине;
  • Какие баннеры эффективны, а какие можно безболезненно убрать из рекламной сетки; 
  • С каких устройств читают Комсомолку и как сделать сайт удобным для всех; 
  • Как конвертируются различные группы аудиторий; 
  • Где возникают трудности у пользователей. 
Превью проекта

Опрос читателей

За 3 дня мы провели опрос среди 1000 читателей Комсомолки. 

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

1000

Количество участников, участвовавших в 3 дневном опросе

Фотография

Фотография

На основе данных мы смогли создать будущие прототипы.

Авторский надзор

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

Над проектом работали

  • Наталья Романчук

    Руководитель проекта

  • Дмитрий Кожевников

    Арт-директор и ведущий дизайнер

  • Алёна Лагойкина

    UI-дизайнер

  • Олег Рудаков

    Руководитель отдела аналитики

  • Наталья Сергеева

    Руководитель проектного офиса

  • Дмитрий Подлужный

    Руководитель направления проектирования интерфейсов

  • Елена Тимакова

    Руководитель направления системной аналитики

  • Виктория Левена

    Ведущий веб-аналитик

  • Татьяна Болдырева

    Технический руководитель проекта

  • Виталий Дощенко

    Коммерческий директор

  • Денис Дубовицкий 

    UI-дизайнер

  • Нина Куликова

    Веб-аналитик

Вам понравилось? Поделитесь в соцсетях.

Посмотрите другие наши проекты.

Редизайн сайта «Российская газета»

Редизайн сайта RABOTA.RU

Редизайн сайта BFM.ru

+7 495 981-01-85 + Стать клиентом
Работа у нас