LightLogo
Проект

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

Награды
Tagline
Лучший сайт сервиса
Разработка интерфейса для сервиса размещения рекламы в Telegram
Дата
2019
Экспертизы
Аналитика
Проектирование
Дизайн
Frontend
Backend
Тип продукта
Порталы и сервисы
Личный кабинет
Отрасль
E-commerce

Заказчик

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

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

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

Решение

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

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

4 месяца

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

Цель разработки интерфейса — сделать удобно, а не только красиво. А значит, нужно было разобраться: как люди ищут и покупают рекламу. 
Для этого команда, работавшая над проектом, вжилась в роли рекламодателя и владельца telegram-канала. Мы регистрировались в системе и проходили путь пользователя по каждому варианту взаимодействия. Такие «ролевые игры» позволяют примерить логику юзеров и понять, на что они обращают внимание, что оказывается важным, а чего не хватает. 
avatar
Анастасия Кириллова
Руководитель проекта
Разобраться, структурировать, убрать лишние звенья — та самая скрытая часть айсберга в работе над интерфейсом, без которой любой редизайн бессмысленен.
На каждый шаг делали скриншот и оставляли пояснения: что неудобно, где возникли сложности, к чему приводит то или иное действие. 
Вот так выглядел интерфейс, когда заказчик обратился к нам.
По скриншотам с пояснениями создали карту пользовательских сценариев. Это помогло найти и упростить в интерфейсе «узкие места» , где пользователь путается, что делать дальше. После этого создали подробные прототипы всех разделов.
Дополнительная сложность была в том, что личный кабинет — единый: один и тот же человек может быть одновременно рекламодателем и владельцем канала. Важно было сделать все функции доступными в одном интерфейсе. При этом нельзя путать пользователя. 
Мы добавили цветовое разграничение, чтобы пользователь понимал: вот здесь он ищет рекламные площадки, а здесь — добавляет свои каналы. Роли пользователя переключаются по табу. При этом цвет фона меняется, чтобы пользователь не запутался. 
UX-дизайнеры Атвинты помогут спроектировать интерфейс, который будет удобен, понятен и визуально привлекателен для ваших пользователей. Читайте подробнее об услуге «Дизайн сложных интерфейсов»
Кабинет рекламодателя
Кабинет владельца каналов
Некоторые функции одинаковые для тех, кто рекламируется, и тех, кто предоставляет рекламные площадки в Telegram. Их нельзя задваивать, иначе интерфейс станет сложным. Так в личном кабинете пользователь пополняет баланс и выводит денежное через один и тот же кошелек.
Вот так выглядит прототип и финальная реализация в дизайне функций, одинаковых для рекламодателя и владельца каналов:

Дизайн

Под редизайн попали главный экран, публичные страницы сайта и личный кабинет пользователя. Заказчик хотел, чтобы на главный экран «цеплял» пользователя и объяснял, как пользоваться сервисом Buzz.im. Эта задача — в основе концепции. 
В первом варианте концепции экран разделили на 2 части: телефон с интерфейсом Telegram и текстовый блок. Текстовой информации предполагали минимум.
В процессе общения с заказчиком стало ясно: у клиентов подобного сервиса довольно много вопросов, ответы на них важны. Изображение телефона уменьшили, переместили в середину экрана. Теперь это навигационный элемент, разделяющий заголовки в левой части экрана и информационный блок справа. 
Привлечь покупателей рекламы — первостепенная задача, именно на эту аудиторию подтягиваются владельцы каналов. Поэтому целевая кнопка «Купить рекламу» выделена заметнее.
Ниже — эволюция главной страницы от прототипа до итоговой версии.
Дополнительно разработали дизайн личного кабинета рекламодателя и владельца каналов, чтобы работать с платформой было легко, приятно, удобно. Никаких лишних функций и украшений, только то, что нужно каждой категории пользователей. 
Удобный и функциональный дизайн интерфейса — одна из составляющих успеха сайта. Он повышает конверсию и помогает привести пользователя к целевому действию.Если вам нужен продуманный UI/UX для вашего продукта, заказывайте услугу «Дизайн сложных интерфейсов».
Получился минималистичный дизайн, который предоставляет важную информацию с первой страницы, не перегружая пользователя лишними данными. Дизайн выполнен в цветах, которые ассоциируются с мессенджером. 
Сервис адаптирован к десктоп-браузерам и мобильным устройствам.

Функции

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

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

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

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

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

Результат

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