Заказчик
Buzz.im — платформа для размещения рекламы в каналах Telegram. Это биржа рекламы, где рекламодатели находят площадки для размещения, а владельцы каналов через него монетизируют свою аудиторию.
Проблема и задача
Владельцу сервиса не нравился внешний вид продукта: он был устаревший. Главный инструмент пользователей — личный кабинет — выглядел как админка, а чтобы разобраться в нем приходилось потратить кучу времени. Люди пользовались сервисом Buzz.im неохотно.
У клиента есть backend-разработчики в штате. Нужна была помощь с дизайном и frontend-разработкой. От нас требовалось навести порядок в интерфейсе, сделать удобную регистрацию, понятный кабинет для рекламодателей и для владельцев telegram-каналов, разработать страницы сайта, которые встречают пользователей до перехода в личный кабинет.
Решение
Сервис Buzz.im состоит из страниц для всех посетителей и личного кабинета — он доступен для зарегистрированных пользователей. Мы разработали полный комплект дизайн-макетов всех экранов для десктопов и мобильных устройств. По утвержденным макетам и на основе бизнес-логики сервиса сделали верстку и frontend.
Срок разработки
4 месяца
Аналитика и прототипы
Цель разработки интерфейса — сделать удобно, а не только красиво. А значит, нужно было разобраться: как люди ищут и покупают рекламу.
Для этого команда, работавшая над проектом, вжилась в роли рекламодателя и владельца telegram-канала. Мы регистрировались в системе и проходили путь пользователя по каждому варианту взаимодействия. Такие «ролевые игры» позволяют примерить логику юзеров и понять, на что они обращают внимание, что оказывается важным, а чего не хватает.
Разобраться, структурировать, убрать лишние звенья — та самая скрытая часть айсберга в работе над интерфейсом, без которой любой редизайн бессмысленен.
Анастасия Кириллова
Руководитель проекта
Digital-агентство Атвинта
На каждый шаг делали скриншот и оставляли пояснения: что неудобно, где возникли сложности, к чему приводит то или иное действие.
Вот так выглядел интерфейс, когда заказчик обратился к нам.
По скриншотам с пояснениями создали карту пользовательских сценариев. Это помогло найти и упростить в интерфейсе «узкие места» , где пользователь путается, что делать дальше. После этого создали подробные прототипы всех разделов.
Дополнительная сложность была в том, что личный кабинет — единый: один и тот же человек может быть одновременно рекламодателем и владельцем канала. Важно было сделать все функции доступными в одном интерфейсе. При этом нельзя путать пользователя.
Мы добавили цветовое разграничение, чтобы пользователь понимал: вот здесь он ищет рекламные площадки, а здесь — добавляет свои каналы. Роли пользователя переключаются по табу. При этом цвет фона меняется, чтобы пользователь не запутался.
UX-дизайнеры Атвинты помогут спроектировать интерфейс, который будет удобен, понятен и визуально привлекателен для ваших пользователей.
Читайте подробнее об услуге «Дизайн сложных интерфейсов»
Кабинет рекламодателя
Кабинет владельца каналов
Некоторые функции одинаковые для тех, кто рекламируется, и тех, кто предоставляет рекламные площадки в Telegram. Их нельзя задваивать, иначе интерфейс станет сложным. Так в личном кабинете пользователь пополняет баланс и выводит денежное через один и тот же кошелек.
Вот так выглядит прототип и финальная реализация в дизайне функций, одинаковых для рекламодателя и владельца каналов:
Дизайн
Под редизайн попали главный экран, публичные страницы сайта и личный кабинет пользователя. Заказчик хотел, чтобы на главный экран «цеплял» пользователя и объяснял, как пользоваться сервисом Buzz.im. Эта задача — в основе концепции.
В первом варианте концепции экран разделили на 2 части: телефон с интерфейсом Telegram и текстовый блок. Текстовой информации предполагали минимум.
В процессе общения с заказчиком стало ясно: у клиентов подобного сервиса довольно много вопросов, ответы на них важны. Изображение телефона уменьшили, переместили в середину экрана. Теперь это навигационный элемент, разделяющий заголовки в левой части экрана и информационный блок справа.
Привлечь покупателей рекламы — первостепенная задача, именно на эту аудиторию подтягиваются владельцы каналов. Поэтому целевая кнопка «Купить рекламу» выделена заметнее.
Ниже — эволюция главной страницы от прототипа до итоговой версии.
Выбор канала сделали максимально интуитивным. Параметры подбора только те, которые важны рекламодателям. На плашке-описании канала самая главная информация для принятия решения: название, тематика, аудитория, цена.
Дополнительно разработали дизайн личного кабинета рекламодателя и владельца каналов, чтобы работать с платформой было легко, приятно, удобно. Никаких лишних функций и украшений, только то, что нужно каждой категории пользователей.
Удобный и функциональный дизайн интерфейса — одна из составляющих успеха сайта. Он повышает конверсию и помогает привести пользователя к целевому действию.
Если вам нужен продуманный UI/UX для вашего продукта, заказывайте услугу «Дизайн сложных интерфейсов».
Получился минималистичный дизайн, который предоставляет важную информацию с первой страницы, не перегружая пользователя лишними данными. Дизайн выполнен в цветах, которые ассоциируются с мессенджером.
Сервис адаптирован к десктоп-браузерам и мобильным устройствам.
Функции
Большая часть работы пользователей происходит в Личном кабинете. Функции разделены в нем разделены на два блока: для рекламодателя и для владельца каналов.
Кабинет рекламодателя
Рекламодатель подбирает площадки для размещения, создает объявления, загружает изображения к постам, просматривает статистику, выгружает отчеты.
Кабинет владельца каналов
Владелец telegram-каналов добавляет новые каналы и описание к ним, чтобы рекламодателям легко было найти канал, получает деньги от рекламодателей через сервис.
Результат
Нашей задачей было сделать не «более понятно», а в принципе понятно. Мы максимально упростили процесс покупки и продажи рекламы в каналах Telegram. В результате получился дружелюбный интерфейс, который помогает пользователям, а не запутывает их.
Анастасия Кириллова
Руководитель проекта
Digital-агентство Атвинта
Сервис с новым дизайном запущен и работает на зарубежном рынке и в России. Сайт адаптирован для устройств с разным разрешением.
С мобильного пользоваться сервисом buzz.im столь же удобно, как и с десктопа.
