Как сделать цифровой продукт для СМИ: показываем на кейсах BFM, «Серебряного дождя» и «ГраФина»
В декабре прошла ежегодная премия Tagline Awards, на которой экспертное жюри из тысяч сайтов, мобильных приложений, цифровых сервисов и дизайн-концепций выбирает лучших.
Первое место в номинации «Лучший сайт медиа / СМИ» забрал веб-журнал «ГраФин», реализованный командой Intelsy для группы негосударственных пенсионных фондов.
Мы решили рассказать о «ГраФине», а также о «Серебряном дожде» и BFM — наших кейсах по разработке цифровых продуктов для СМИ. В этом направлении мы работаем уже более 10 лет, поэтому есть чем поделиться. На трех примерах объясним, на что обращать внимание при разработке подобных проектов для массовой аудитории.
Кейс первый: Intelsy & «Серебряный дождь»
Серебряный Дождь — российская радиостанция FM-диапазона, начавшая вещание 4 июля 1995 года на частоте 100,1 МГц в Москве. Сегодня эта станция ведет свое вещание более чем в 200 городах России и ближнего зарубежья.
Команда Intelsy разработала для радиостанции мобильное приложение «под ключ».
Сценарий использования мобильного приложения подразумевает прослушивание прямого эфира, оперативное чтение коротких новостных блоков, звонки на радиостанцию и в эфир.
Центральное место отведено плееру. Основной способ управления — не навигационная панель, а свайпы.
UI/UX играет чрезвычайно важную роль в стриминговых приложениях, а приложение для радиостанции — в том числе выполняет и эту функцию. Пользователям нужен интуитивно понятный и простой в использовании интерфейс, чтобы наслаждаться прослушиванием музыки в пути, во время занятий спортом, не отвлекаясь и не утруждая себя ненужными действиями внутри приложения.
UI/UX должен быть простым и последовательным. Запутанная компоновка или слишком много отвлекающих элементов мешает пользователям и негативно влияют на их отношение уже не только к конкретному приложению, но и к компании в целом.
Пользователи таких приложений хотят проводить большую часть своего времени, слушая любимую радиостанцию, а не выясняя, как работает приложение. Навигация должна быть простой с предсказуемым расположением меню, строк поиска и элементов управления.
Таким приложением пользователь должен иметь возможность управлять одной рукой, соответственно, элементы должны быть крупными и «легкими для попадания» в них, даже когда человек находится в динамике.
- За 3 месяца разработано MVP приложения и запущено в Google play.
- Разработана и реализована однокнопочная система навигации и управления. В итоге плеер представляет собой одну яркую крупную кнопку в центре экрана и прогресс-бар вокруг нее. Это позволяет запускать и останавливать эфир с любого положения руки, держащей смартфон.
- Функции вызова блока новостей и событий, звонки и сообщения в студию выведены так, чтобы пользователь в одно касание находил все необходимое. Основной сценарий использования при этом не прерывается.
Запрос от заказчика удовлетворен полностью: приложение «Серебряный Дождь» бесперебойно позволяет слушать радиостанцию онлайн, читать новости, просматривать программу передач и поддерживать связь со студией. У приложения более 100 тысяч скачиваний, положительные отзывы пользователей.
Кейс второй: Intelsy & первое в России бизнес-радио «Business FM»
Business FM — это сеть радиостанций, круглосуточно вещающих в 13 городах России. В эфире радио: актуальные бизнес-новости, авторские программы, подкасты и многое другое.
До выхода мобильного приложения более 50% радиослушателей знакомились с контентом без использования радиоприемников: часть слушала прямые эфиры через онлайн-трансляцию на сайте bfm.ru, часть пользовалась агрегаторами радиостанций.
Для того чтобы собрать слушателей в одном месте и предоставить им удобный способ прослушивания контента, команда Intelsy разработала это приложение.
Основной функционал приложения:
- прослушивание эфира радиостанции через мобильное приложение;
- добавление, поиск и изучение записей подкастов и авторских программ;
- добавление контента в избранное;
- изучение блока новостей.
Концепция приложения держится на трех главных идеях: чистота, точность, удобство.
Чистота — идея максимально лаконичного дизайна. Казалось бы, за простым дизайном приложения спрятаны десятки небольших UI-элементов-подсказок, которые созданы, чтобы помочь неопытным пользователям быстрее погрузиться в приложение. Дополнительно добавили возможность переключения между светлой и темной темой приложения.
Точность — это удобство и скорость поиска нужного контента. Его сделали насколько возможно стабильным и точным. Использовали GraphQL для выстраивания взаимодействия мобильного приложения с серверной частью. Также добавили ряд надстроек, которые позволили быстро конструировать запросы к серверу для выдачи нужной в данный момент информации. Благодаря следованию одной архитектуре и изначальному планированию главных компонентов мобильного приложения, удалось в дальнейшем достаточно легко наращивать функционал и экраны итогового проекта.
Удобство — это про интерфейс. Изучая конкурентов, поняли, что большинством приложений радиостанций сложно управлять одной рукой. Поэтому, прорабатывая интерфейс приложения, главный плеер сделали «сворачиваемым», то есть при прослушивании прямого эфира плеер сворачивается и перемещается наверх экрана. Это упрощает процесс управления приложением, больше не нужно переключаться между экранами.
Расширить географию присутствия радиостанции удалось с помощью приложения. Вместо нескольких городов с вещанием на FM-диапазоне, теперь приложение, в максимально удобном формате, стало доступным в самых разных точках страны и мира.
Кейс третий: Intelsy & веб-журнал «ГраФин»
Главная задача веб-журнала — помочь читателям определиться с инструментами для долгосрочного инвестирования, разобраться в страховых предложениях, изучить продукты для предпринимателей и самозанятых. Тем самым сподвигнуть аудиторию к сотрудничеству с НПФ.
Идея запуска «ГраФина» сформировалась после того, как представители негосударственных пенсионных фондов проанализировали трафик, приходящий на их сайты через поисковики.
Анализ показал, что пользователи, приходящие в разделы статьи и новости, быстро покидают ресурс, зачастую не ознакомившись с предложениями. Таких пользователей было много. Фонды теряли аудиторию.
В журнале уже ведется 3 большие рубрики.
- Финансовая грамотность
Здесь эксперты рассказывают как правильно копить деньги, чтобы они приумножались со временем, как вести личные финансы, инвестировать, презентуются новые продукты фондов и много другое.
- Образ жизни
В рубрике делятся реальными историями из жизни успешных инвесторов и предпринимателей, живой статистикой, связанной с финансами.
- Мнение эксперта
Это ответы на вопросы читателей. Например, здесь можно задать вопрос о доступных налоговых вычетах, а ответ на него подготовит практикующий эксперт.
На странице журнала сейчас можно не только изучить контент, но и воспользоваться калькулятором накоплений, оформить заявку на консультацию, изучить предложения НПФ.
Для удобства пользователей все продукты удобно расположились в кликабельных блоках, которые любой пользователь может быстро найти в интерфейсе ресурса.
Навигация на сайте сформирована и протестирована еще на стадии разработки концепта. Для исследования отбиралась фокус группа из более 45 респондентов. Исследования показали, что реализованная мозаичная сетка повышает кликабельность блоков с материалом в среднем на 7%.
Отдельное внимание уделили мобильной версии ресурса. 68% аудитории знакомится с контентом со смартфонов, зачастую читают статьи и материалы утром, в дороге на работу и в вечернее время (19-22 по МСК).
В среднем, на первоначальном этапе ежемесячная посещаемость сайта составляет около 15 тысяч пользователей, за неделю каждый новый материал набирает более 1500 уникальных просмотров. Активно используются формы обратной связи, в том числе калькулятор долгосрочных вложений.
Цель — сделать более доступной и удобной для восприятия информацию об инвестициях, расширить аудиторию, повысить ее лояльность к негосударственным пенсионным фондам — достигнута.
Главные критерии, на которые нужно обращать внимание при разработке цифрового продукта для СМИ
- Первое, от чего нужно отталкиваться при проектировании любого продукта, задача которого коммуницировать с массовой аудиторией — целевая аудитория.
Вы должны точно понимать, кто будет изучать ваш контент, с помощью каких устройств, с какой целью: ваши пользователи хотят отдыхать и релаксировать или вдумчиво изучать что-то новое.
Поэтому без аналитического этапа работу можно и вовсе не начинать. В этом вам помогут исследования пользовательского опыта, UX-аудиты, опросы целевой аудитории и тесты, много тестов.
- Задача любого цифрового продукта для СМИ — удержать пользователя как можно дольше.
Для этого обязательно нужно прорабатывать схемы, которые позволяют создать ощущение бесконечного контента. Если делаете журнал, обязательно предусматривайте автоматическую подгрузку контента, если делаете стриминг (видео или аудио), продумывайте удобную навигацию.
- Дизайн. В случае, когда вы делаете приложение для СМИ, нужно избегать излишнего креатива в интерфейсе и визуализации. Слишком непонятный интерфейс, необычные сценарии сломают аудиторию и не дадут нужного охвата. А сложные иллюстрации превратят каждый релиз в производственный ад, что увеличит конечную стоимость каждой публикации.
Здесь всегда нужно помнить, что контент должен быстро считываться, легко восприниматься.
- Техническое исполнение. Лучше не мудрить с использованием новых технологий, если вы рассчитываете на широкий охват. Чем стабильнее и быстрее работает журнал, приложение, сайт, тем выше уровень удовлетворенности аудитории.
Три кейса объединены одной идеей: влюбить в себя слушателя и не отпустить. Считаем, что справились, поскольку ретеншн стабильно высокий во всех трех случаях.
В следующий раз расскажем о нашем серебряном призере — лендинге PixelMap с конверсией в 12.5%. В материале раскроем, в каких случаях конструктор сайтов — отличный инструмент, а в каких — системный вредитель и как должен выглядеть конверсионный лендинг и почему.
Больше кейсов и подробнее о том как создавать цифровые продукты, как выстраивать работу команды и создавать цифровой бизнес пишем в своем Telegram-канале:
Подписывайтесь!
На таких проектах интересно работать всем членам команды, потому что результатом потом будет пользоваться каждый :) То есть делаешь, словно для себя
Самая большая награда для разработчика, наверно )
А были ли от заказчиков какие-то пожелания по дизайну? Иногда бывает, что заказчик хочет "желто-красное в сердечко", но по концепту и для ЦА это совсем не подходит. Или вам везет с заказчиками, и ожидание с реальностью совпадают?:)
Бывает по-разному. Как правило, на таких проектах заказчик выбирает исполнителя по концепту, поэтому мы заранее знаем, что друг от друга ожидать.
В точку, как подбиваете концерты под желания заказчика?
Очень удачные кейсы👍 Ждем продолжения)
Кейсов по медиа, про которые стоит рассказать, городов больше:) поэтому продолжениетнапоашевается, соглашусь!
Клёвый проект вышел:)
Вот круто читать на vc про действительно известные, популярные вещи, про то, как делаются приложения и сайты для них
Понравились все три проекта лаконичностью, ничего лишнего, кричащего, движущегося
Очень круто!
С какими проблемами UI/UX при разработке мобильных приложений столкнулись и как их решили?
В своё время решали проблему удобства включения эфира для СД. Тестировались включение за рулём авто, в переполненном метро, в темноте в ночном режиме. После всех тестов сделали кнопку включения эфира на 2/3 экрана. Знаю что этот кейс потом использовали на внутренних митапах Яндекса как эталонный
Хотелось бы узнать более детально и максимально подробно, с чего и как зарождается дизайн будущего творения? Как происходит выбор палитры, шрифты, цвет кнопок и все мелочи? Как правильно преподнести клиенту информацию, что его желания не всегда = желания/ожидания пользователей? С какими трудностями столкнулись при выполнении этих трех проектов?
Хороший брифинг - залог успеха дизайнеров )) А научиться брифовать, выбирать палитры, шрифты и цвет кнопок можно у нас в школе PixelMap https://pixel-map.ru/.
Все три проекта делали одни и те же люди? Или это были разные команды внутри компании? Имею ввиду разрабов, дизайнеров, тестировщиков и т.д.
Это разные команды. Два кейса по мобильным приложениям, и один кейс - веб-сайт. Общего у них - дизайн-директор )
Какой из проектов был самым легким и быстрым?
Пожалуй, веб-проект был легче мобильных приложений. Оба приложения для радио - с онлайн вещанием, это добавляет вызовов разработчикам.
Получается, вы специализируетесь на приложениях и сайтах для СМИ? Или просто так совпало? Есть что-то такое же интересное в работе сейчас?
Получается что да:)
Татьяна, в статье Вы пишете, что в реализации таких проектов помогут тесты, много тестов. Обычно заказчики хотят сэкономить на тестировании. Скажите пожалуйста как Вам удается продавать тесты заказчикам?
Невозможно сэкономить на тестировании. Вопрос только в том, из какого бюджета расходуются деньги на тестирование. Тестирование проводят либо специально обученные люди, используя разные методы тестирования, последовательно проходя по тест-кейсам, и тогда это бюджет разработки. Либо, "сэкономив", заказчик тестирует самостоятельно, силами сотрудников, которые не имеют отношения к профессиональному тестированию. Тогда это бюджет того отдела, которому "повезло" заниматься тестированием. Очень часто в этой истории в роли тестировщика выступает заказчик - руководитель какого-либо отдела. Он занимается тестированием вместо выполнения своих прямых функций. Вряд ли это стоит дешевле, чем оплатить услуги тестировщика. И третий вариант - тестирует пользователь. Тут уже другая математика - во сколько заказчику обойдется потеря клиентов, которые будут вынуждены пользоваться сырым продуктом из-за экономии на услуге тестирования. Здесь мы уже говорим и о финансовых потерях, и о репутационных. Очевидно, что самое выгодное - это тестировать силами QA-специалистов.
Точнее проекты:)
🔥
Очень стильные проекты 👍
Вы правильно раскрыли самую важную цель создания любого программного продукта. В первую очередь оно создается для пользователей. И очень важно знать для какой аудитории нужно приложение. Если радио через смартфон будет интересно более молодой и продвинутой аудитории, то журнал "Графин" будет интересен пользователям более старшего сегмента. Разумеется запросы и требования к приложению у них разные))
Несомненно. При разработке любого проекта необходимо знать портрет аудитории.
Вот это кейсы
Интересные кейсы! Спасибо, что делитесь инфой. Можете приоткрыть немного "внутрянку": а как вы получили эти проекты? Это были тендеры?
Приятно встретить здесь историю создания приложения, которым часто пользуешься. А кто занимается дальнейшей поддержкой и обновлением приложений?
Классно встретить тут пользователя )) А каким сервисом пользуетесь?
Сейчас мы поддерживаем два сервиса из трех. Как правило, поддержку лучше всего заказывать там же, где разрабатывали, потому что сотрудники знакомы с кодом и внутрянкой проекта. Поддерживать чужой код дороже, чем свой.