---
updateDate: 2026-02-10T00:00:00Z
publishDate: 2024-07-26
publishYear: 2018
name: Stream-telecom
title: Интерфейс сервиса SMS-рассылок
excerpt: Перепроектировали личный кабинет и снизили порог входа для новых клиентов.
context: Менеджерам Stream Telecom приходилось часами рассказывать пользователям, как запустить SMS-кампанию. Дело не только в большом количестве полей и неидеальном расположении кнопок. Сам по себе процесс создания рассылки довольно сложный и не всегда линейный.
logo:
src: ~/assets/images/portfolio/stream-telecom/logo.svg
alt: Stream telecom logo
link: https://stream-telecom.ru/
image: ~/assets/images/portfolio/stream-telecom/stream-telecom.png
imageAlt: Интерфейс сервиса SMS-рассылок
thumbnail:
src: ~/assets/images/portfolio/cards/streamtelecom.svg
alt: Собака Павлова • Stream Telecom • Редизайн интерфейса сервиса SMS-рассылок
tags:
- telecom
- redesign
- mass
tags2:
- IT для бизнеса
- UX-дизайн
- Дизайн личного кабинета
- Интерфейс системы email рассылок
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: e-gorod-mobile
- collection: portfolio
page: novotelekom
- collection: portfolio
page: e-gorod
- collection: portfolio
page: fastvps
- collection: portfolio
page: serverscom
- collection: portfolio
page: yota
result:
-
src: ~/assets/images/portfolio/png.png
text: Дизайн интерфейса
link: https://drive.google.com/drive/folders/1wtmDSM5Bacit9o5qt_1DoySCi_qzK3um?usp=sharing
budget: ~ 1 700 000 ₽
review:
text: В результате проекта получился очень простой, красивый и функциональный интерфейс в сложной сфере массовых рассылок! Результаты превзошли мои личные ожидания от проекта — интерфейс получился понятным и практически готовым к внедрению уже сейчас.
photo: ~/assets/images/portfolio/stream-telecom/person.jpg
person: Александр Сильченко,
position: директор по развитию Stream Telecom
director: Новый интерфейс [реализован](https://stream-telecom.ru/) в точности по нашим прототипам.
metadata:
canonical: https://sobakapav.ru/portfolio/stream-telecom
title: UX-дизайн • Интерфейс личного кабинета сервиса SMS-рассылок
description: "Сделали для профессионального сервиса дизайн интерфейса личного кабинета, который поможет запустить SMS-рассылку даже пользователям без опыта проведения рекламных кампаний."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/stream-telecom/stream-telecom.png'
width: 1280
height: 832
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задачи](#anchor2) • [Плюсы и минусы](#anchor3) • [UX-исследование](#anchor4) • [Дизайн интерфейса](#anchor5) • [Тестирование интерфейса](#anchor6) • [Результат](#anchor7) • [Отзыв, цены, сроки](#anchor8)
</TOC>
## <a name="anchor1" />Бизнес-задача
[Stream Telecom](https://stream-telecom.ru/) — сервис создания SMS и email-рассылок. Этими услугами пользуются самые разные компании — от частных предпринимателей до банков. Уровень компьютерной грамотности пользователей тоже заметно разнится.
Но даже для продвинутого пользователя интерфейс личного кабинета, где, собственно, и происходит вся работа с рассылками, выглядит довольно сложным.
_Вот такой интерфейс нам предстояло полностью перепроектировать_
Причины до боли знакомы: слишком много настроек и возможностей, слишком много нюансов, связанных, например, с условиями мобильных операторов. Клиенты пугаются, одни ищут сервисы попроще, другие бомбардируют менеджеров и техподдержку однотипными вопросами.
## <a name="anchor2" />Дизайн-задачи
- Перепроектировать интерфейс, не меняя функциональности.
- Создать библиотеку элементов, из которых разработчики смогут самостоятельно собирать страницы новых услуг.
## <a name="anchor3" />Плюсы и минусы
>**+ Доступ к менеджерам**
>Менеджеры Stream Telecom по телефону рассказывают новым клиентам, как создать первую рассылку. А значит, могут указать нам на самые сложные моменты.
>**+ Доступ к клиентам**
>Мы можем провести интервью с пользователями, а потом проверить наши гипотезы тестированием.
>**+ Выстроенные бизнес-процессы ответственности**
>Контакт-центр, центры обслуживания — всё есть. Регламенты предоставления услуг соблюдаются.
>**- Массовый, но профессиональный**
>С точки зрения возможностей это профессиональный инструмент, с точки зрения разнообразия аудитории — массовый сервис.
>**- Без сложных технических решений**
>Интерфейсы должны быть просты в реализации, никакой сложной логики, которая могла бы упростить жизнь пользователей.
Будет трудно, придется искать компромиссы, отстаивать интересы пользователей, переделывать — все, как мы любим.
## <a name="anchor4" />UX-исследование
Первым делом мы изучили продукт. Прошлись по всем страницам личного кабинета, прокликали каждый пункт меню и сделали 162 скриншота. Получилось наглядное описание всех возможностей без многотомных технических документов.
_[162 скриншота](https://drive.google.com/drive/folders/1AgxEt-8wiWhHbYOeyeV8OixI6xUUr56j?usp=sharing) наглядно описывают все возможности сервиса_
Параллельно мы провели интервью с пользователями и менеджерами. Результаты показательные. Пользователи в целом признавали сложность личного кабинета, но не жаловались. Замечания были или совсем частные («неудобно расположена кнопка»), или, наоборот, слишком общие («было бы здорово добавить рассылку по другим мессенджерам»). При этом охотно делились лайфхаками. Например, чтобы не возиться с базой номеров в личном кабинете, можно каждый раз загружать новую базу. Соответственно, добавлять и удалять получателей не в личном кабинете, а в Excel.
_Среди пользователей сервиса — и наемный маркетолог, и директор магазина_
Менеджеры, наоборот, выдали внушительный список конкретных замечаний — выявить недостатки помогли вопросы, которые чаще всего задают клиенты. А еще менеджеры рассказали, как они обучают новых пользователей по телефону. Клиенту объясняют, как создать рассылку, и демонстрируют основные функции системы. Сценарии обучения у всех примерно одинаковы. Любопытно, что самый подробный пошаговый план с кучей нюансов нам изложил менеджер, работающий с малым бизнесом.
_Менеджеры компании рассказали обо всех проблемах, с которыми сталкиваются их клиенты (и с которыми они звонят в компанию)_
Чтобы проектировщику было проще ориентироваться в функциональности, мы составили «карту собственности».
_«Карта собственности» — один из способов зафиксировать элементы системы и интерфейса с точки зрения пользователя_
## <a name="anchor5" />Дизайн интерфейса
Визуальное решение у нас появилось практически сразу, в самом начале аналитики. Разговоры с пользователями и менеджерами подтвердили гипотезы, добавили конкретики. От набросков и концепта мы плавно перешли к проработке деталей.
Первая концептуальная идея — знакомство с продуктом, онбординг, обучение (выбирайте любой термин). Суть в том, чтобы помочь пользователю сделать первую рассылку точно так же, как это делает менеджер по телефону. Это снимет нагрузку с менеджеров, которые пока что вынуждены по шагам объяснять клиентам, как сделать первую рассылку.
_Нового пользователя встречает экран с предложением создать первую рассылку_
Создать первую рассылку сложно не только потому, что это новая для пользователя среда. Процесс включает несколько этапов — нужно заполнить данные о компании, выбрать тариф, зарегистрировать имя отправителя. И на каждом этапе — свои приключения. Например, у разных операторов разные регламенты регистрации имени.
_На каждом шаге система объясняет, что именно нужно сделать и зачем_
Вторая концептуальная идея — переключение режимов интерфейса с упрощенного на максимально подробный. Это, безусловно, компромисс. Но он неизбежен, когда одной системой пользуются люди с разными требованиями к функциональности и с разным уровнем технической грамотности.
После нескольких подходов мы решили, что вместо переключения режимов лучше просто скрывать дополнительные настройки.
_Непопулярные настройки по умолчанию скрыты_
В дополнительных настройках скрываются функции, которыми редко пользуются.
_Сам заголовок «дополнительные настройки» говорит о том, что для первого знакомства с сервисом вникать во все тонкости необязательно_
Если компания отправляет много разных рассылок одновременно, ей пригодится дашборд.
_На дашборде — все самое важное и срочное_
## <a name="anchor6" />Тестирование интерфейса
Очень важно тестировать дизайн не тогда, когда он полностью готов, а в середине пути. Как только у нас появились страницы для ключевых сценариев, мы отправились проверять решения на живых людях. Среди них были и потенциальные клиенты, и сотрудник заказчика — помогая клиенту, менеджер использует тот же самый интерфейс.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Мы просили испытуемых выполнить задания, смотрели, что не получается, отвечали на вопросы и все записывали. Обошлись без промежуточных документов. На тестировании присутствовал проектировщик, он сразу делал себе заметки в блокноте, а потом исправлял интерфейс по горячим следам.
Вот несколько примеров.
- Никто не заметил подсказок в правой части экрана. Мы сознательно сделали их не слишком заметными, но после тестирования решили добавить визуальный акцент — красную полосу. Теперь не увидеть подсказку сложно, но она по-прежнему не отвлекает опытного пользователя.
- Бо́льшая часть замечаний была к текстам — люди не понимали, что означает та или иная функция, возможность. Поработали с формулировками, добавили подсказок, а местами даже изменили логику.
- Один респондент попросил заменить слово «проблема» на что-то более нейтральное: «у меня и так целый день одни проблемы». И правда, можно обойтись без этого слова. Так в общем списке рассылок появился раздел «не отправлены».
## <a name="anchor7" />Результат
Разобравшись с ключевым сценарием, созданием первой рассылки, мы приступили к дизайну остальных разделов.
_В результатах опроса — однозначные цвета, чтобы не путать людей оттенками и полутонами_
Карточки запланированных, текущих и завершенных рассылок в Viber.
_Сводка по всем рассылкам. Если рассылка не отправлена по какой-то причине, то интерфейс сразу предлагает эту причину устранить_
Статистику по кампаниям можно изучать прямо в личном кабинете или экспортировать для дополнительной обработки.
_Статистику можно выгрузить в Excel_
Продукт будет развиваться дальше. Чтобы сохранить единообразие, мы создали библиотеку интерфейсных элементов.
_Еще не дизайн-система, но уже гайд для дизайнеров, которые будут поддерживать продукт_
Любой продукт заслуживает хорошего дизайна. Даже если этот продукт существует тысячу лет и оброс пользовательскими привычками. Другое дело, что работа над новым дизайном должна быть очень аккуратной. С одной стороны не ограничиться косметикой, с другой — не испортить жизнь старым клиентам.
## <a name="anchor8" />