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

Stream Telecom — сервис создания SMS и email-рассылок. Этими услугами пользуются самые разные компании — от частных предпринимателей до банков. Уровень компьютерной грамотности пользователей тоже заметно разнится.

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

Вот такой интерфейс нам предстояло полностью перепроектировать

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

Наши задачи

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

Плюсы и минусы

• Доступ к менеджерам Менеджеры Stream Telecom по телефону рассказывают новым клиентам, как создать первую рассылку. А значит, могут указать нам на самые сложные моменты.

• Доступ к клиентам Мы можем провести интервью с пользователями, а потом проверить наши гипотезы тестированием.

• Выстроенные бизнес-процессы ответственности Контакт-центр, центры обслуживания — всё есть. Регламенты предоставления услуг соблюдаются.

• Массовый, но профессиональный С точки зрения возможностей это профессиональный инструмент, с точки зрения разнообразия аудитории — массовый сервис.

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

Будет трудно, придется искать компромиссы, отстаивать интересы пользователей, переделывать — все, как мы любим.

Аналитика

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

162 скриншота наглядно описывают все возможности сервиса

Параллельно мы провели интервью с пользователями и менеджерами. Результаты показательные. Пользователи в целом признавали сложность личного кабинета, но не жаловались. Замечания были или совсем частные («неудобно расположена кнопка»), или, наоборот, слишком общие («было бы здорово добавить рассылку по другим мессенджерам»). При этом охотно делились лайфхаками. Например, чтобы не возиться с базой номеров в личном кабинете, можно каждый раз загружать новую базу. Соответственно, добавлять и удалять получателей не в личном кабинете, а в Excel.

Среди пользователей сервиса — и наемный маркетолог, и директор магазина

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

Менеджеры компании рассказали обо всех проблемах, с которыми сталкиваются их клиенты (и с которыми они звонят в компанию)

Чтобы проектировщику было проще ориентироваться в функциональности, мы составили «карту собственности».

«Карта собственности» — один из способов зафиксировать элементы системы и интерфейса с точки зрения пользователя

Проектирование

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

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

Нового пользователя встречает экран с предложением создать первую рассылку

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

На каждом шаге система объясняет, что именно нужно сделать и зачем

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

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

Непопулярные настройки по умолчанию скрыты

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

Сам заголовок «дополнительные настройки» говорит о том, что для первого знакомства с сервисом вникать во все тонкости необязательно

Если компания отправляет много разных рассылок одновременно, ей пригодится дашборд.

На дашборде — все самое важное и срочное

Тестирование

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

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

Вот несколько примеров.

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

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

• Один респондент попросил заменить слово «проблема» на что-то более нейтральное: «у меня и так целый день одни проблемы». И правда, можно обойтись без этого слова. Так в общем списке рассылок появился раздел «не отправлены».

И опять проектирование

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

В результатах опроса — однозначные цвета, чтобы не путать людей оттенками и полутонами

Карточки запланированных, текущих и завершенных рассылок в Viber.

Сводка по всем рассылкам. Если рассылка не отправлена по какой-то причине, то интерфейс сразу предлагает эту причину устранить

Статистику по кампаниям можно изучать прямо в личном кабинете или экспортировать для дополнительной обработки.

Статистику можно выгрузить в Excel

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

Еще не дизайн-система, но уже гайд для дизайнеров, которые будут поддерживать продукт

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

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