Buzz.im New

Разработка интерфейса
для сервиса Buzz.im

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

Заказчик

01

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

02

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

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

Решение

03

4 месяца


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

04

05

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

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

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










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

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

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


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

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

06

Дизайн

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

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

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

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

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





Выбор канала сделали максимально интуитивным. Параметры подбора только те, которые важны рекламодателям.

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

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

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



Функции

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

07

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

09

Результат

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

С мобильного пользоваться сервисом buzz.im столь же удобно, как и с десктопа.
Спасибо
за просмотр!
Atwinta
Дизайн
и разработка — Атвинта
Другие наши работы