Komsomolskaya pravda

kp.ru

Website redesign for 57 million readers

Что сделали

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

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

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

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

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

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

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

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

Фотография

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

Фотография

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

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

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

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

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

Дизайн для AdBlock

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

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

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

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

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

Фотография

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

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

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

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

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

Фотография

Да!

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

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

Фотография

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

Фотография

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

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

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

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

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

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

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

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

Фотография

Фотография

Фотография

Фотография

Фотография

Фотография

Фотография

Фотография

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

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

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

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

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

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

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

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

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

Выяснили:

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

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

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

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

1000

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

Фотография

Фотография

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

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

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

Награды

  • Логотип награды

    2020 Премия Рунета

    Вклад в развитие СМИ

  • Логотип награды

    2021 Tagline

    Медиа и СМИ

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

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

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

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

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

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

    UI-дизайнер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    UI-дизайнер

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

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

Do you like it? Share it on social networks

Get in touch

Would you like to say hello or find out more information?

Let's talk
Check out other projects.

Rossiyskaya Gazeta website redesign

Rabota.ru website redesign

BFM.ru website redesign

BFM.ru website redesign
    <-- simple icon --> <-- link-icon --> <-- simple text --> <-- awards -->
We have developed Russian business Internet portal
Product analytics Research Engineering Design Markup Web development
+7 495 981-01-85 + Become a customer
Services Cases