ЯПервый: медиапортал телеканала

Главное о кейсе

Редизайн решает ключевую для медиа бизнес-задачу — переход от прошлого, перегруженного сайта-новостной ленты к современному, удобному и коммерчески-эффективному медиапорталу.

Современный и минималистичный дизайн:

- Чистый, светлый, воздушный дизайн с акцентами фирменными цветами. Соответствует современным трендам (как у крупных медиа: РБК, Медуза и т.д.). Шрифты стали читабельнее.

Адаптивность и мобильная версия:

- Откалиброванная мобильная версия. Навигация превращается в удобное ""бургер""-меню, кнопки большие, статьи легко листать. Это критически важно, так как больше половины трафика, особенно новостного, идет с мобильных.

Навигация и структура:

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

Работа с контентом:

- Появилась современная модульная сетка.

Брендинг:

- Логотип стал более современным и узнаваемым. Он хорошо запоминается на фоне минималистичного дизайна.

Как проект изменил жизнь пользователей

На основе анализа старого и нового сайта «Первого Ярославского» можно выделить несколько ключевых влияний на пользователей.

Новый сайт с первого взгляда вызывает доверие. Чистый, современный, минималистичный дизайн ассоциируется с профессиональным СМИ, которое следит за трендами и уважает своего читателя. Это фундамент для всех дальнейших взаимодействий.

Кардинальное повышение удобства (UX — User Experience):
- Ясность и простота: Пользователь сразу видит главные новости, понимает структуру сайта. Найти нужный раздел или переключиться между «Новостями» и «Телепрограммой» стало интуитивно понятно.
- Мобильный опыт: Это колоссальное улучшение. Теперь большая часть аудитории, которая заходит с телефонов, не борется с сайтом, а комфортно читает и листает. Кнопки удобно нажимать, текст сам адаптируется под экран. Это убирает раздражение и побуждает оставаться на сайте дольше.
- Скорость: Сайт стал работать быстрее. Пользователь не ждет загрузки и не теряет терпение.

Рост вовлеченности и времени на сайте.
Модульная сетка на главной, блоки «Главное», «Фото», «Видео» и рекомендации в конце статей активно удерживают внимание. Пользователь, прочитав одну новость, видит рядом другую интересную заголовком или картинкой и переходит на нее. Это увеличивает «глубину просмотра» и общее время, проведенное на сайте.

Упрощение поиска конкретной информации.

Прямая ссылка на «Телепрограмму» в главном меню. Это огромный плюс для вашей лояльной аудитории, которая привыкла смотреть телеканал. Это повышает лояльность.

Бизнес-задача и ее решение

Какая бизнес-задача была решена?
Ключевой вызов: Превратить устаревшую новостную ленту в современный, удобный и коммерчески эффективный медиапортал, соответствующий ожиданиям современной аудитории и повышающий вовлеченность.

Это раскрывается через несколько подзадач:

- Удержание внимания пользователя. Новый сайт предлагает больше возможностей для изучения контента.
- Улучшение пользовательского опыта (UX). Сделать сайт удобным для современного пользователя, который заходит с разных устройств (особенно с телефона).
- Создание платформы для монетизации. Новый дизайн лучше подходит для интеграции рекламы (видео, баннеры), нативной интеграции партнерских материалов и продвижения платного контента (если он планируется).
- Укрепление бренда. Сайт теперь выглядит как серьезное региональное СМИ, а не как блог-платформа.

В долгосрочной перспективе эти положительные изменения приведут к:

- Увеличению возвращаемости (пользователи будут чаще заходить на сайт целенаправленно, а не только из поиска).
- Снижению показателя отказов (пользователи не будут сразу уходить со страницы).
- Росту вовлеченности (больше просмотров страниц за визит, больше комментариев, соц. взаимодействий).
- Укреплению бренда в цифровом пространстве Ярославля.

Крафт (мастерство), реализация, технические детали

Команда мыслила не шаблонами, а категориями продукта. Сайт был переосмыслен как медиасервис.

- Сервис для читателя: Чистая лента новостей, удобная навигация, адаптивность.
- Сервис для зрителя: Вынесение видеоконтента и телепрограммы на первый план.
- Сервис для рекламодателя: Создание современной и ненавязчивой среды для интеграции рекламы (видео, баннеры, нативные форматы).

Внимание к деталям.

- Типографика: Осознанный уход от устаревших шрифтов с засечками к современным гротескам. Улучшенная читаемость и иерархия текста (заголовки, подзаголовки, лид, body-текст).
- Воздух и пространство (Whitespace): Грамотное использование пустого пространства для разгрузки визуала и концентрации внимания на контенте, а не на элементах дизайна.
- Работа с цветом: Фирменный цвет используется как акцентный для кнопок, ховеров и важных элементов, а не заливает собой всё пространство. Это создает более спокойную и комфортную для чтения атмосферу.

Юзабилити и UX-дизайн.

- Главная страница как «дирижер». Модульная сетка позволяет гибко управлять вниманием пользователя, выделяя главные новости и предлагая релевантный дополнительный контент.
- Современный подход - добавление механик ""сторис"" на главной странице, которые как никогда актуальны в медиапространстве.

Реализация.

- Беcшовный перенос контента: Все исторические материалы, статьи, медиафайлы были корректно перенесены на новую платформу без потерь.
- Качество верстки: Сайт отображается единообразно и без ошибок в разных браузерах (Chrome, Firefox, Safari, Edge).
- Фокус на производительности: Новый сайт загружается и работает быстро. Это результат оптимизации кода и изображений.

Технические задачи.

- Использование современных подходов верстки для создания такой адаптивной структуры.
- Оптимизация производительности.
- Оптимизация изображений: Использование современных форматов (WebP), ресайз и сжатие изображений под разные разрешения экранов.
- Кэширование: Настройка правильных заголовков кэширования для статических ресурсов (стили, скрипты, изображения).

Интеграция с бэкенд-системой (CMS).

- Кастомизация админ-панели CMS, создание пользовательских полей и блоков для удобного наполнения сложных модулей на главной странице.
- SEO-миграция, сохранение всех старых URL-структур или грамотная настройка редиректов со старых URL на новые.
- Настройка корректных мета-тегов, заголовков и атрибутов для изображений.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Инсайт: Устаревший дизайн сайта подсознательно заставляет аудиторию сомневаться в актуальности и достоверности нашего контента, даже если новости свежие». Это проигрыш в конкурентной борьбе с федеральными СМИ и соцсетями.

Гипотезы:
- Если мы внедрим современную модульную сетку на главной с выделением «Главного» и рекомендациями, то время на сайте и глубина просмотра увеличатся , т.к. пользователям будет проще находить интересный контент.
- Если мы разработаем сайт по принципу mobile-first, то показатель отказов с мобильных устройств снизится, а общее время сессии увеличится.
- Если мы вынесем видеоплеер на видное место на главной странице, то количество просмотров видео увеличится.
- Если мы сделаем телепрограмму и другие сервисы легко доступными (1-2 клика из меню), то мы увеличим частоту возвращений нашей постоянной аудитории.
- Если мы создадим чистый, современный дизайн с продуманными рекламными местами, то сможем повысить CPM.

Взаимодействие с заказчиком

Главный поинт - постановка «что», а не «как»: Заказчик формулировал проблемы («пользователи не смотрят наше видео», «телепрограмму невозможно найти»), а не давал технические указания («сделайте кнопку красной»).
Мы устраивали регулярные демонстрации рабочего продукта (раз в 1-2 недели). Заказчик всегда видел прогресс и мог вовремя внести правки.
Работа в команде: Обратная связь от заказчика собиралась не в виде разрозненных писем, а в организованном виде прямо во время промежуточных демо, отражалась комментариями в фигме для удобства - едином пространстве, которое всегда доступно всем учавствующим лицам на проекте.

Ключевые артефакты взаимодействия:

- Утвержденное ТЗ и проведенный брифинг, но не как 100-страничный зафиксированный документ, а как живой backlog с user stories (например, «Как пользователь с телефона, я хочу легко найти телепрограмму, чтобы узнать, что покажут вечером»).
- Утвержденный прототип и дизайн: Это был главный «договор» о том, что будет сделано. Все правки вносились на этой стадии, что дешевле и быстрее, чем переделывать готовый код.
- Четкий план миграции: Совместный план по переносу контента и запуску, минимизирующий риски и простои.

Скриншоты