Редизайн сайта, который должен понравиться 57 млн. посетителей в месяц
Что сделали
- Создали гармоничный дизайн, основываясь на данных. Добавили полезные функции и выстроили новый формат коммуникации.
- Переработали рекламный инвентарь: баннеры меньше раздражают читателей и эффективнее работают.
- Разработали UI-кит и прописали рекомендации для удобства поддержки.
- Проконтролировали, чтобы идеи со стадии дизайна воплотились в работающий сайт.
Блочная система контента
Находить и читать статьи стало удобнее и быстрее благодаря выделенной блочной системе и модульной сетке.
![Превью проекта](/upload/landing/6a0/6a01b52f878bff524925d06a8e2c2b17.jpg)
Главная страница
![Превью проекта](/upload/landing/95b/95b962d5cd44c177ddbde81ed06753d8.jpg)
Конструктор для редакции
Редакторы самостоятельно без помощи программистов могут сверстать главную страницу газеты. Им доступно 4 различных вида блоков, которые можно использовать.
Баннерная сетка
Теперь реклама не раздражает и эффективнее работает
Сделали новые форматы баннеров и выделили их цветом, чтобы они не сливались с редакторским контентом.
![Изображение до](/upload/landing/9d5/9d540ec8c394561fb43bc0e4dd0afafe.jpg)
![Изображение после](/upload/landing/289/289482bea4d4b7d47d6a6bd742135a56.jpg)
Дизайн для AdBlock
Если у читателя установлен AdBlock, на месте рекламных баннеров отображается специальный блок с мотивирующей информацией.
![Превью проекта](/upload/landing/ea5/ea57e5406d4fbdf644c6d82b8283d187.jpg)
Статьи и новости
Читатели на сайт попадают в основном сразу на внутренние страницы, то есть на страницы статей и новостей. Поэтому мы увеличили акцент на заголовке, лиде и фотографии, а также сократили визуально главное меню на внутренних страницах так как пользователи внутри статей им почти не пользуются. Для увеличения глубины просмотра дополнили страницу «информационным обвесом» в виде подбора рекомендуемых статей, чартов, опросов и так далее.
![Превью проекта](/upload/landing/79e/79ed1685e702778cd868af048cfd4c15.jpg)
![Фотография](/upload/landing/7f3/7f3ef9eeed4a9f377b248673ebbc6de5.jpg)
Опрос и цитата дня, цифра дня
Новые форматы контента
Фотографии: лучшие презентации гаджетов, карнавалы, селебрити.
Видео: смотрите ролики за ужином или в метро, или когда лениво читать.
![Фотография](/upload/landing/daa/daa5bb4aefa059d90b4441ee7ed7cd52.jpg)
Да!
Так называется кнопка-лайк в конце каждого материала. Если вы согласны с мнением автора, нажмите на нее, а справа будет отображаться количество единомышленников.
![Превью проекта](/upload/landing/4dc/4dcd1b21bd144036de07bd146aec08de.jpg)
![Фотография](/upload/landing/f69/f6956e35650e78036571bb44b1b2bdef.jpg)
Блок с колумнистами стал ярче и заметнее.
![Фотография](/upload/landing/f06/f06776efd533435a38cdf943c73806d0.jpg)
Сделали страницы со спецпроектами. Вся страница и брендирование посвящены одному важному событию.
Адаптивный дизайн
По данным Google Analytics 76% всей аудитории заходит на сайт со смартфонов. Мы сделали мобильную версию удобной: крупный текст, большие фото, заметное меню и понятная навигация.
![Превью проекта](/upload/landing/33e/33eabea4ca1a3d82d4147cbe0f6911cd.jpg)
UI-кит для редакции
Мы разработали подробный UI-кит Комсомолки, который содержит более сотни макетов и рекомендаций: шрифты, отступы, размеры блоков или картинок, цветовую палитру, рекомендуемое размещение баннеров.
Процесс создания проекта
Прочитать статью о проектировании на cossa.ru, о ходе проекта на vc.ru и о задаче и результатах на Комсомольской правде.
![Превью проекта](/upload/landing/d49/d495c18980220ae75b140018992e5e45.jpg)
Интервьюирование бизнеса и журналистов
В ходе интервью мы выяснили, что бизнесу важно сделать сайт удобным при этом сохранить прибыль от рекламы. Поэтому мы переработали навигацию и баннерные форматы.
![Превью проекта](/upload/landing/083/083d3533e056e90a8e7d24e5396f453a.jpg)
Исследование
Мы провели исследование, анализ статистики пользователей и доразметили сайт, чтобы получать новые данные.
![Превью проекта](/upload/landing/a14/a14c510049dff42719a1d90467fd6d1f.png)
Выяснили:
- Какой путь проходит пользователь;
- Что приносит больше денег — с точки зрения как форматов, так и разделов;
- От чего мы можем отказаться на сайте;
- Какие статьи дочитывают до конца, а какие бросают на половине;
- Какие баннеры эффективны, а какие можно безболезненно убрать из рекламной сетки;
- С каких устройств читают Комсомолку и как сделать сайт удобным для всех;
- Как конвертируются различные группы аудиторий;
- Где возникают трудности у пользователей.
![Превью проекта](/upload/landing/ecd/ecd0f7498eb29f513f92fe9c10d90e9a.png)
Опрос читателей
За 3 дня мы провели опрос среди 1000 читателей Комсомолки.
Мы выяснили, как они оценивают сайт и навигацию, что им хотелось бы улучшить, какой видит Комсомолку ее лояльная аудитория, что на сайте реализовано удачно, а что требует особенных доработок. Это помогло нам понять, как улучшить коммуникационный дизайн для будущей Комсомолки.
Количество участников, участвовавших в 3 дневном опросе
![Фотография](/upload/landing/3fa/3fab5c7f80e3c63f4499330075df4d27.png)
![Фотография](/upload/landing/542/54282447027a1d20b09cba86d2eb6054.png)
На основе данных мы смогли создать будущие прототипы.
Авторский надзор
Перед выпуском сайта мы его тщательно проверили на баги и порекомендовали провести сплит-тестирование, чтобы понять, как реагируют читатели на новый дизайн.
Награды
-
2020 Премия Рунета
Вклад в развитие СМИ
-
2021 Tagline
Медиа и СМИ
Над проектом работали
-
Наталья Романчук
Руководитель проекта
-
Дмитрий Кожевников
Арт-директор и ведущий дизайнер
-
Алёна Лагойкина
UI-дизайнер
-
Олег Рудаков
Руководитель отдела аналитики
-
Наталья Сергеева
Руководитель проектного офиса
-
Дмитрий Подлужный
Руководитель направления проектирования интерфейсов
-
Елена Тимакова
Руководитель направления системной аналитики
-
Виктория Левена
Ведущий веб-аналитик
-
Татьяна Болдырева
Технический руководитель проекта
-
Виталий Дощенко
Коммерческий директор
-
Денис Дубовицкий
UI-дизайнер
-
Нина Куликова
Веб-аналитик