Интерфейс сервиса SMS-рассылок

Менеджерам Stream Telecom приходилось часами рассказывать пользователям,
как запустить SMS-кампанию. Дело
не только в большом количестве полей
и неидеальном расположении кнопок.
Сам по себе процесс создания рассылки довольно сложный и не всегда линейный.
~ 1 700 000 ₽

Перепроектировали личный кабинет и снизили порог входа для новых клиентов.

Контекст

Результат

Бюджет

2018
Stream Telecom — сервис создания SMS и email-рассылок. Этими услугами пользуются самые разные компании — от частных предпринимателей до банков. Уровень компьютерной грамотности пользователей тоже заметно разнится.
Но даже для продвинутого пользователя интерфейс личного кабинета, где, собственно, и происходит вся работа с рассылками, выглядит довольно сложным.
Исходные экраны с которым пришел заказчик | SobakaPav.ru
Вот такой интерфейс нам предстояло полностью перепроектировать
Причины до боли знакомы: слишком много настроек и возможностей, слишком много нюансов, связанных, например, с условиями мобильных операторов. Клиенты пугаются, одни ищут сервисы попроще, другие бомбардируют менеджеров и техподдержку однотипными вопросами.
Наши задачи
  • Перепроектировать интерфейс, не меняя функциональности.
  • Создать библиотеку элементов, из которых разработчики смогут самостоятельно собирать страницы новых услуг.
Плюсы и минусы
Доступ к менеджерам
Менеджеры Stream Telecom по телефону рассказывают новым клиентам, как создать первую рассылку. А значит, могут указать нам на самые сложные моменты.
Мы можем провести интервью с пользователями, а потом проверить наши гипотезы тестированием.
Доступ к клиентам
Массовый, но профессиональный
С точки зрения возможностей это профессиональный инструмент, с точки зрения разнообразия аудитории — массовый сервис.
Интерфейсы должны быть просты в реализации, никакой сложной логики, которая могла бы упростить жизнь пользователей.
Без сложных технических решений
+
+
Будет трудно, придется искать компромиссы, отстаивать интересы пользователей, переделывать — все, как мы любим.
Аналитика
Первым делом мы изучили продукт. Прошлись по всем страницам личного кабинета, прокликали каждый пункт меню и сделали 162 скриншота. Получилось наглядное описание всех возможностей без многотомных технических документов.
Обилие скриншотов доказывает множественные возможности сервиса | SobakaPav.ru
162 скриншота наглядно описывают
все возможности сервиса
Параллельно мы провели интервью с пользователями и менеджерами. Результаты показательные. Пользователи в целом признавали сложность личного кабинета, но не жаловались. Замечания были или совсем частные («неудобно расположена кнопка»), или, наоборот, слишком общие («было бы здорово добавить рассылку по другим мессенджерам»). При этом охотно делились лайфхаками. Например, чтобы не возиться с базой номеров в личном кабинете, можно каждый раз загружать новую базу. Соответственно, добавлять и удалять получателей не в личном кабинете, а в Excel.
Составленные портреты персонажей | SobakaPav.ru
Среди пользователей сервиса —
и наемный маркетолог, и директор магазина
Менеджеры, наоборот, выдали внушительный список конкретных замечаний — выявить недостатки помогли вопросы, которые чаще всего задают клиенты. А еще менеджеры рассказали, как они обучают новых пользователей по телефону. Клиенту объясняют, как создать рассылку, и демонстрируют основные функции системы. Сценарии обучения у всех примерно одинаковы. Любопытно, что самый подробный пошаговый план с кучей нюансов нам изложил менеджер, работающий с малым бизнесом.
Список проблем, с которыми сталкиваются клиенты заказчика | SobakaPav.ru
Менеджеры компании рассказали
обо всех проблемах, с которыми сталкиваются их клиенты (и с которыми они звонят в компанию)
Чтобы проектировщику было проще ориентироваться в функциональности, мы составили «карту собственности».
"Карта собственности" приложения | SobakaPav.ru
«Карта собственности» — один из способов зафиксировать элементы системы и интерфейса с точки зрения пользователя
Проектирование
Визуальное решение у нас появилось практически сразу, в самом начале аналитики. Разговоры с пользователями и менеджерами подтвердили гипотезы, добавили конкретики. От набросков и концепта мы плавно перешли к проработке деталей.
Первая концептуальная идея — знакомство с продуктом, онбординг, обучение (выбирайте любой термин). Суть в том, чтобы помочь пользователю сделать первую рассылку точно так же, как это делает менеджер по телефону. Это снимет нагрузку с менеджеров, которые пока что вынуждены по шагам объяснять клиентам, как сделать первую рассылку.
Встречающий экран при входе в приложение | SobakaPav.ru
Нового пользователя встречает экран
с предложением создать первую рассылку
Создать первую рассылку сложно не только потому, что это новая для пользователя среда. Процесс включает несколько этапов — нужно заполнить данные о компании, выбрать тариф, зарегистрировать имя отправителя. И на каждом этапе — свои приключения. Например, у разных операторов разные регламенты регистрации имени.
Описание шагов | SobakaPav.ru
На каждом шаге система объясняет, что именно нужно сделать и зачем
Вторая концептуальная идея — переключение режимов интерфейса с упрощенного на максимально подробный. Это, безусловно, компромисс. Но он неизбежен, когда одной системой пользуются люди с разными требованиями к функциональности и с разным уровнем технической грамотности.
После нескольких подходов мы решили, что вместо переключения режимов лучше просто скрывать дополнительные настройки.
Скрытые по-умолчанию непопулярные настройки | SobakaPav.ru
Непопулярные настройки по умолчанию скрыты
В дополнительных настройках скрываются функции, которыми редко пользуются.
Необязательные дополнительные настройки | SobakaPav.ru
Сам заголовок «дополнительные настройки» говорит о том, что для первого знакомства с сервисом вникать во все тонкости необязательно
Если компания отправляет много разных рассылок одновременно, ей пригодится дашборд.
Дашборд с самой важной и актуальной информацией | SobakaPav.ru
На дашборде — все самое важное и срочное
Тестирование
Очень важно тестировать дизайн не тогда, когда он полностью готов, а в середине пути. Как только у нас появились страницы для ключевых сценариев, мы отправились проверять решения на живых людях. Среди них были и потенциальные клиенты, и сотрудник заказчика — помогая клиенту, менеджер использует тот же самый интерфейс.
Мы просили испытуемых выполнить задания, смотрели, что не получается, отвечали на вопросы и все записывали. Обошлись без промежуточных документов. На тестировании присутствовал проектировщик, он сразу делал себе заметки в блокноте, а потом исправлял интерфейс по горячим следам.
Вот несколько примеров.
  • Никто не заметил подсказок в правой части экрана. Мы сознательно сделали их не слишком заметными, но после тестирования решили добавить визуальный акцент — красную полосу. Теперь не увидеть подсказку сложно, но она по-прежнему не отвлекает опытного пользователя.
Этап пользовательского тестирования: никто не заметил подсказки справа | SobakaPav.ru
  • Бо́льшая часть замечаний была к текстам — люди не понимали, что означает та или иная функция, возможность. Поработали с формулировками, добавили подсказок, а местами даже изменили логику.
  • Один респондент попросил заменить слово «проблема» на что-то более нейтральное: «у меня и так целый день одни проблемы». И правда, можно обойтись без этого слова. Так в общем списке рассылок появился раздел «не отправлены».
И опять проектирование
Разобравшись с ключевым сценарием, созданием первой рассылки, мы приступили к дизайну остальных разделов.
Вердикт тестирования - более однозначные цвета | SobakaPav.ru
В результатах опроса — однозначные цвета, чтобы не путать людей оттенками и полутонами
Карточки запланированных, текущих и завершенных рассылок в Viber.
Сводка по рассылкам | SobakaPav.ru
Сводка по всем рассылкам. Если рассылка не отправлена по какой-то причине, то интерфейс сразу предлагает эту причину устранить
Статистику по кампаниям можно изучать прямо в личном кабинете или экспортировать для дополнительной обработки.
Возможность экспорта в Excel | SobakaPav.ru
Статистику можно выгрузить в Excel
Продукт будет развиваться дальше. Чтобы сохранить единообразие, мы создали библиотеку интерфейсных элементов.
Гайдлайны для дизайнеров заказчика | SobakaPav.ru
Еще не дизайн-система, но уже гайд для дизайнеров, которые будут поддерживать продукт
Любой продукт заслуживает хорошего дизайна. Даже если этот продукт существует тысячу лет и оброс пользовательскими привычками. Другое дело, что работа над новым дизайном должна быть очень аккуратной. С одной стороны не ограничиться косметикой, с другой — не испортить жизнь старым клиентам.
~ 1 750 000 ₽
Бюджет

«В результате проекта получился очень простой, красивый и функциональный интерфейс в сложной сфере массовых рассылок! Результаты превзошли мои личные ожидания
от проекта — интерфейс получился понятным и практически готовым к внедрению уже сейчас».

Александр Сильченко
Директор по развитию Stream Telecom

Новый интерфейс реализован в точности по нашим прототипам.

Результат
Другие кейсы