beta

Buzz.im — платформа для размещения рекламы в Telegram

Разработка интерфейса для сервиса размещения рекламы в Telegram
Категория
Ссылка на проект
https://buzz.im/

Заказчик

Buzz.im — платформа для размещения рекламы в каналах Telegram. Это биржа рекламы, где рекламодатели находят площадки для размещения, а владельцы каналов через него монетизируют свою аудиторию.

Проблема и задача

Владельцу сервиса не нравился внешний вид продукта: он был устаревший. Главный инструмент пользователей — личный кабинет — выглядел как админка, а чтобы разобраться в нем приходилось потратить кучу времени. Люди пользовались сервисом Buzz.im неохотно.

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

Решение

Сервис Buzz.im состоит из страниц для всех посетителей и личного кабинета — он доступен для зарегистрированных пользователей. Мы разработали полный комплект дизайн-макетов всех экранов для десктопов и мобильных устройств. По утвержденным макетам и на основе бизнес-логики сервиса сделали верстку и frontend.

Срок разработки

4 месяца

Аналитика и прототипы

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

Для этого команда, работавшая над проектом, вжилась в роли рекламодателя и владельца telegram-канала. Мы регистрировались в системе и проходили путь пользователя по каждому варианту взаимодействия. Такие «ролевые игры» позволяют примерить логику юзеров и понять, на что они обращают внимание, что оказывается важным, а чего не хватает. 

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

Анастасия Кириллова

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

Digital-агентство Атвинта

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

Вот так выглядел интерфейс, когда заказчик обратился к нам.

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

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

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

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

Мои кампании

Кабинет владельца каналов

Мои каналы

Некоторые функции одинаковые для тех, кто рекламируется, и тех, кто предоставляет рекламные площадки в Telegram. Их нельзя задваивать, иначе интерфейс станет сложным. Так в личном кабинете пользователь пополняет баланс и выводит денежное через один и тот же кошелек.

Вот так выглядит прототип и финальная реализация в дизайне функций, одинаковых для рекламодателя и владельца каналов:

Дизайн

Под редизайн попали главный экран, публичные страницы сайта и личный кабинет пользователя. Заказчик хотел, чтобы на главный экран «цеплял» пользователя и объяснял, как пользоваться сервисом Buzz.im. Эта задача — в основе концепции. 

В первом варианте концепции экран разделили на 2 части: телефон с интерфейсом Telegram и текстовый блок. Текстовой информации предполагали минимум.

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

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

Ниже — эволюция главной страницы от прототипа до итоговой версии.

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

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

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

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

Адаптивный дизайн платформы

Функции

Большая часть работы пользователей происходит в Личном кабинете. Функции разделены в нем разделены на два блока: для рекламодателя и для владельца каналов.

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

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

Кабинет владельца каналов

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

Результат

Нашей задачей было сделать не «более понятно», а в принципе понятно. Мы максимально упростили процесс покупки и продажи рекламы в каналах Telegram. В результате получился дружелюбный интерфейс, который помогает пользователям, а не запутывает их.

Анастасия Кириллова

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

Digital-агентство Атвинта

Сервис с новым дизайном запущен и работает на зарубежном рынке и в России. Сайт адаптирован для устройств с разным разрешением. 

С мобильного пользоваться сервисом buzz.im столь же удобно, как и с десктопа.