Разработка интерфейса
для сервиса Buzz.im
Порядок в интерфейсе для удобства покупателей рекламы и владельцев каналов в Telegram
Buzz.im — платформа для размещения рекламы в каналах Telegram. Это биржа рекламы, где рекламодатели находят площадки для размещения, а владельцы каналов через него монетизируют свою аудиторию.
Заказчик
01
Проблема и задача
02
Владельцу сервиса не нравился внешний вид продукта: он был устаревший. Главный инструмент пользователей — личный кабинет — выглядел как админка, а чтобы разобраться в нем приходилось потратить кучу времени. Люди пользовались сервисом Buzz.im неохотно.
У клиента есть backend-разработчики в штате. Нужна была помощь с дизайном и frontend-разработкой. От нас требовалось навести порядок в интерфейсе, сделать удобную регистрацию, понятный кабинет для рекламодателей и для владельцев telegram-каналов, разработать страницы сайта, которые встречают пользователей до перехода в личный кабинет.
У клиента есть backend-разработчики в штате. Нужна была помощь с дизайном и frontend-разработкой. От нас требовалось навести порядок в интерфейсе, сделать удобную регистрацию, понятный кабинет для рекламодателей и для владельцев telegram-каналов, разработать страницы сайта, которые встречают пользователей до перехода в личный кабинет.
Дизайн и разработка сайта — Атвинта
Сервис Buzz.im состоит из страниц для всех посетителей и личного кабинета — он доступен для зарегистрированных пользователей. Мы разработали полный комплект дизайн-макетов всех экранов для десктопов и мобильных устройств. По утвержденным макетам и на основе бизнес-логики сервиса сделали frontend-разработку SPA-приложения.
Решение
03
4 месяца
Срок разработки
04
05
Аналитика и прототипы
Цель разработки интерфейса — сделать удобно, а не только красиво. А значит, нужно было разобраться: как люди ищут и покупают рекламу.
Для этого команда, работавшая над проектом, вжилась в роли рекламодателя и владельца telegram-канала. Мы регистрировались в системе и проходили путь пользователя по каждому варианту взаимодействия. Такие «ролевые игры» позволяют примерить логику юзеров и понять, на что они обращают внимание, что оказывается важным, а чего не хватает.
Для этого команда, работавшая над проектом, вжилась в роли рекламодателя и владельца telegram-канала. Мы регистрировались в системе и проходили путь пользователя по каждому варианту взаимодействия. Такие «ролевые игры» позволяют примерить логику юзеров и понять, на что они обращают внимание, что оказывается важным, а чего не хватает.
“
Разобраться, структурировать, убрать лишние звенья — та самая скрытая часть айсберга в работе над интерфейсом, без которой любой редизайн бессмысленен.
На каждый шаг делали скриншот и оставляли пояснения: что неудобно, где возникли сложности, к чему приводит то или иное действие.
Вот так выглядел интерфейс, когда заказчик обратился к нам.
Вот так выглядел интерфейс, когда заказчик обратился к нам.
По скриншотам с пояснениями создали карту пользовательских сценариев. Это помогло найти и упростить в интерфейсе «узкие места» , где пользователь путается, что делать дальше. После этого создали подробные прототипы всех разделов.
Дополнительная сложность была в том, что личный кабинет — единый: один и тот же человек может быть одновременно рекламодателем и владельцем канала. Важно было сделать все функции доступными в одном интерфейсе. При этом нельзя путать пользователя.
Мы добавили цветовое разграничение, чтобы пользователь понимал: вот здесь он ищет рекламные площадки, а здесь — добавляет свои каналы. Роли пользователя переключаются по табу. При этом цвет фона меняется, чтобы пользователь не запутался.
Мы добавили цветовое разграничение, чтобы пользователь понимал: вот здесь он ищет рекламные площадки, а здесь — добавляет свои каналы. Роли пользователя переключаются по табу. При этом цвет фона меняется, чтобы пользователь не запутался.
Некоторые функции одинаковые для тех, кто рекламируется, и тех, кто предоставляет рекламные площадки в Telegram. Их нельзя задваивать, иначе интерфейс станет сложным. Так в личном кабинете пользователь пополняет баланс и выводит денежное через один и тот же кошелек.
Вот так выглядит прототип и финальная реализация в дизайне функций, одинаковых для рекламодателя и владельца каналов:
Вот так выглядит прототип и финальная реализация в дизайне функций, одинаковых для рекламодателя и владельца каналов:
06
Дизайн
Под редизайн попали главный экран, публичные страницы сайта и личный кабинет пользователя. Заказчик хотел, чтобы на главный экран «цеплял» пользователя и объяснял, как пользоваться сервисом Buzz.im. Эта задача — в основе концепции.
В первом варианте концепции экран разделили на 2 части: телефон с интерфейсом Telegram и текстовый блок. Текстовой информации предполагали минимум.
В процессе общения с заказчиком стало ясно: у клиентов подобного сервиса довольно много вопросов, ответы на них важны. Изображение телефона уменьшили, переместили в середину экрана. Теперь это навигационный элемент, разделяющий заголовки в левой части экрана и информационный блок справа.
Привлечь покупателей рекламы — первостепенная задача, именно на эту аудиторию подтягиваются владельцы каналов. Поэтому целевая кнопка «Купить рекламу» выделена заметнее.
Ниже — эволюция главной страницы от прототипа до итоговой версии.
В первом варианте концепции экран разделили на 2 части: телефон с интерфейсом Telegram и текстовый блок. Текстовой информации предполагали минимум.
В процессе общения с заказчиком стало ясно: у клиентов подобного сервиса довольно много вопросов, ответы на них важны. Изображение телефона уменьшили, переместили в середину экрана. Теперь это навигационный элемент, разделяющий заголовки в левой части экрана и информационный блок справа.
Привлечь покупателей рекламы — первостепенная задача, именно на эту аудиторию подтягиваются владельцы каналов. Поэтому целевая кнопка «Купить рекламу» выделена заметнее.
Ниже — эволюция главной страницы от прототипа до итоговой версии.
Выбор канала сделали максимально интуитивным. Параметры подбора только те, которые важны рекламодателям.
На плашке-описании канала самая главная информация для принятия решения: название, тематика, аудитория, цена.
На плашке-описании канала самая главная информация для принятия решения: название, тематика, аудитория, цена.
Дополнительно разработали дизайн личного кабинета рекламодателя и владельца каналов, чтобы работать с платформой было легко, приятно, удобно. Никаких лишних функций и украшений, только то, что нужно каждой категории пользователей.
Получился минималистичный дизайн, который предоставляет важную информацию с первой страницы, не перегружая пользователя лишними данными. Дизайн выполнен в цветах, которые ассоциируются с мессенджером.
Сервис адаптирован к десктоп-браузерам и мобильным устройствам.
Получился минималистичный дизайн, который предоставляет важную информацию с первой страницы, не перегружая пользователя лишними данными. Дизайн выполнен в цветах, которые ассоциируются с мессенджером.
Сервис адаптирован к десктоп-браузерам и мобильным устройствам.
Функции
Большая часть работы пользователей происходит в Личном кабинете. Функции разделены в нем разделены на два блока: для рекламодателя и для владельца каналов.
07
Кабинет рекламодателя
Рекламодатель подбирает площадки для размещения, создает объявления, загружает изображения к постам, просматривает статистику, выгружает отчеты.
Кабинет владельца каналов
Владелец telegram-каналов добавляет новые каналы и описание к ним, чтобы рекламодателям легко было найти канал, получает деньги от рекламодателей через сервис.
09
Результат
“
Нашей задачей было сделать не «более понятно», а в принципе понятно. Мы максимально упростили процесс покупки и продажи рекламы в каналах Telegram. В результате получился дружелюбный интерфейс, который помогает пользователям, а не запутывает их.
Сервис с новым дизайном запущен и работает на зарубежном рынке и в России. Сайт адаптирован для устройств с разным разрешением.
С мобильного пользоваться сервисом buzz.im столь же удобно, как и с десктопа.
С мобильного пользоваться сервисом buzz.im столь же удобно, как и с десктопа.
Спасибо
за просмотр!
за просмотр!
Atwinta
Дизайн
и разработка — Атвинта
и разработка — Атвинта
