Проекты
Агентство
Контакты
Все проекты
проект

Update

Прежде всего

Update — бизнес-журнал МегаФона, в котором компания рассказывает, как технологии меняют бизнес.

Больше, чем медиа

задача

Разработать медиа-платформу, где команда МегаФона будет рассказывать о цифровых инструментах для бизнеса и новостях в мире digital. Сделать удобный интерфейс для чтения с любого устройства и спроектировать административную часть с полным набором современных функций для постинга.

Идея

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

МегаФон — национальный российский оператор цифровых возможностей, занимающий ведущие позиции во всех сегментах телекоммуникационного рынка России и предоставляющий услуги 75,2 миллионам абонентов в стране.

Статьи делятся по категориям цветом

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

Индикатор местоположения на странице

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

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

Сайт автоматически рассчитывает примерное время на чтение материала и размещает минуты на карточке статьи.

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

SEO-friendly сайт

Для быстрой работы медиа мы используем фреймворк next.js. Это также важно для SEO-оптимизации: при первой загрузке страницы отдаются как статичные html — это делает контент видимым для поисковых роботов.

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

Администратор сайта может менять последовательность блоков в материале простым перетаскиванием карточки.

Два вида почтовых рассылок

Настроили два вида интеграции для почтовых рассылок: Sensay и Mailgun. Одна для почтовых рассылок пользователям, подписавшимся на уведомления о новых материалах и выборе редакции, а вторая для внутренних уведомлений и получения фидбека от читателей.

Слайдер с похожими материалами в конце каждой статьи помогает повышать рециркуляцию пользователей в медиа.

Смена цветового режима

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

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

Автоподбор интересных материалов

В конце каждого материала пользователь ждет слайдер с похожими материалами по тегам двух параметров: категории статьи и типу материала. В первом случае публикации схожи из-за общей тематики, например, «безопасность», во втором — любители подкастов сразу увидят, что еще можно послушать.

Кнопки «поделиться» в социальных сетях доступны слева экрана на протяжении всей статьи — оформили их в узнаваемую форму круга МегаФона.

Подготовили платформу к дальнейшему развитию

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

Подготовили для этого в том числе и элементы интерфейса: например, кнопка «Показать все статьи» появится на главной странице после определенного количества материалов.

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

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

Адаптивная версия сайта

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

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

Гибкие настройки для материалов

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

Подборка похожих материалов повышает глубину просмотра страниц и среднюю продолжительность сеанса — что положительно влияет на SEO сайта.

Кабинет для редакторов медиа

Административная часть содержит три ключевых раздела редактирования, которые доступны из любой точки кабинета. Это форматирование материала, лента всех публикаций, которую также можно корректировать и раздел сайта с FAQ-вопросами.

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

следующий проект

Росбанк