Пользователям понравится: переделать интерфейс и сохранить популярность сервиса

История digital-агентства «Атвинта» о редизайне биржи рекламы в каналах Telegram: «Мы работали с этим проектом год назад. В день, когда сообщили о блокировке Telegram, завершили первый этап — проектирование».

Противостояние с РКН способствовало росту аудитории мессенджера, а значит, и аудитории сервиса. Мы завершили редизайн, и спустя год рекламодатели всё так же через Buzz.im находят площадки для размещения, а владельцы каналов через него монетизируют свою аудиторию.

Сейчас Buzz.im — это экосистема Telegram-ассоциированных проектов: биржа рекламы, поиск по открытым сообщениям в Telegram и бот для мониторинга.

Как и с любыми новшествами, сразу после релиза посыпалась волна комментариев формата «Раньше было лучше». И это нормально: людям комфортнее работать с привычным интерфейсом. Минимизировать потери при переходе на новый внешний вид поможет подход с умом.

Рассказываем, на что обращать внимание при редизайне, чтобы он пошёл на пользу вашему интернет-проекту.

Изначально идея проекта Buzz.im родилась из внутренней потребности компании-заказчика.

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

Цель редизайна интерфейса — сделать удобно, а не только красиво. Первый шаг — спроектировать логику будущего интерфейса. А для этого понять, как всё работает сейчас и как должно работать в идеале. После — оживить интерфейс через дизайн и расставить визуальные акценты.

Редизайн интерфейса начинается с изучения потребностей пользователей и аудита существующего продукта.

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

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

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

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

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

После того как разобрались в бизнес-логике, переходим к визуальной составляющей.

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

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

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

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

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

Это важно: по статистике пользователи с мобильными устройствами составляют 58% аудитории сервиса Buzz.im.

С одной стороны дизайн — дело вкуса. При этом дизайн должен решать бизнес-задачу. Объединить эти противоречия поможет опытный дизайнер. Расскажите, что нужно донести пользователям через внешний вид продукта и приведите примеры своих предпочтений в веб-дизайне.

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

В бирже рекламы Buzz.im в макетах нужно было сделать цветовую дифференциацию, расставить акценты, избежать перегруза информацией.

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

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

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

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

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

Выбор канала сделали максимально интуитивным. Изначально на плашке с каналом оставили минимум информации, чтобы рекламодателю оперативно считать: что за канал, сколько подписчиков, сколько стоит. А подробная статистика открывалась по клику на карточку канала.

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

Работа с фидбеком пользователей позволяет развивать сервис. Ведь при проектировании агентство всегда представляет идеальные сценарии взаимодействия с системой абстрактного пользователя. Портрет такого пользователя создаётся на момент старта проекта. Со временем аудитория и её потребности могут меняться.

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

Обновлённый сервис был запущен спустя четыре месяца после начала редизайна. Команда «Атвинты» исследовала пользовательские сценарии, продумала логику нового интерфейса, разработала комплект дизайн-макетов всех экранов для десктопов и мобильных устройств. По утверждённым макетам и на основе бизнес-логики сервиса разработчики «Атвинты» сделали вёрстку и фронтенд.