Рабочее место оператора для омниканальной коммуникации с клиентами
Единое рабочее пространство для общения с клиентами в web, desktop и mobile
Рабочее место оператора объединяет все основные каналы коммуникации с клиентом в одном интерфейсе: текстовые сообщения, звонки и историю взаимодействия.
Цель продукта — предоставить оператору единое пространство для обработки обращений независимо от канала связи и устройства.
Кросс-платформенное рабочее место со всеми текстовыми и голосовыми каналами для общения с клиентом в едином интерфейсе.
С помощью него оператор может:
Рабочее место оператора объединяет все основные каналы коммуникации с клиентом в одном интерфейсе: текстовые сообщения, звонки и историю взаимодействия.
Цель продукта — предоставить оператору единое пространство для обработки обращений независимо от канала связи и устройства.
Кросс-платформенное рабочее место со всеми текстовыми и голосовыми каналами для общения с клиентом в едином интерфейсе.
С помощью него оператор может:
- Совершать и принимать звонки
- Переписываться с клиентами из любого мессенджера
- Обрабатывать все входящие заявки
Контекст продукта
К моменту начала проекта продукт уже существовал на всех трёх платформах.
Однако каждая из них развивалась отдельно:
Поэтому задача состояла не просто в редизайне отдельных экранов, а в переосмыслении рабочего места оператора как единой системы.
Основные цели проекта:
Однако каждая из них развивалась отдельно:
- отличались сценарии работы;
- интерфейсы были устроены по-разному;
- пользовательский опыт постепенно расходился.
Поэтому задача состояла не просто в редизайне отдельных экранов, а в переосмыслении рабочего места оператора как единой системы.
Основные цели проекта:
- унифицировать пользовательский опыт между платформами;
- переработать ключевые пользовательские сценарии;
- устранить накопившиеся UX-проблемы;
- развить дизайн-систему для поддержки web, desktop и mobile.
Задача
Перед проектом стояли три основные задачи.
1. Унифицировать пользовательский опыт
Пользователь должен одинаково понимать интерфейс независимо от платформы.
2. Учесть особенности каждой среды
Desktop, web и mobile имеют разные ограничения и разные сценарии использования. Необходимо было сохранить общую логику продукта, адаптируя взаимодействие под особенности платформы.
3. Развить дизайн-систему
Существующая дизайн-система поддерживала web и desktop. Необходимо было адаптировать её для мобильного приложения, сохранив единый язык компонентов.
1. Унифицировать пользовательский опыт
Пользователь должен одинаково понимать интерфейс независимо от платформы.
2. Учесть особенности каждой среды
Desktop, web и mobile имеют разные ограничения и разные сценарии использования. Необходимо было сохранить общую логику продукта, адаптируя взаимодействие под особенности платформы.
3. Развить дизайн-систему
Существующая дизайн-система поддерживала web и desktop. Необходимо было адаптировать её для мобильного приложения, сохранив единый язык компонентов.
Моя роль
- UX/UI дизайн
- Глубинные интервью с пользователями
- Проектирование пользовательских сценариев
- Редизайн desktop
- Редизайн mobile
- Развитие web-интерфейса
- Развитие дизайн-системы
- Прототипирование
- Сопровождение разработки
Исследование
Перед началом проектирования я провела серию глубинных интервью с операторами контакт-центра, а также проанализировала:
- обратную связь пользователей по существующим решениям;
- конкурентные продукты.
Дизайн-система
Одной из задач стало развитие дизайн-системы.
Изначально она содержала компоненты только для web и desktop.
В процессе проекта система была расширена и разделена на три уровня:
Такой подход позволил переиспользовать общие элементы, сохранив особенности каждой платформы.
Изначально она содержала компоненты только для web и desktop.
В процессе проекта система была расширена и разделена на три уровня:
- Общие компоненты
- Desktop
- Mobile
Такой подход позволил переиспользовать общие элементы, сохранив особенности каждой платформы.
Организация проекта
Из-за большого количества экранов важно было организовать рабочие файлы так, чтобы ими могла пользоваться вся команда.
Проект был разделён на два файла:
Это значительно упрощало навигацию, обсуждение решений и дальнейшую поддержку проекта.
Проект был разделён на два файла:
- Desktop
- Mobile
Это значительно упрощало навигацию, обсуждение решений и дальнейшую поддержку проекта.
Ключевое решение 1
Разделение пространства звонков и переписки
Проблема
В предыдущей версии десктопное приложение было построено по принципу единого окна. Софтфон находился рядом с чатами и другими разделами интерфейса.
Во время звонка оператор продолжал видеть открытый чат, из-за чего было неочевидно, относится ли текущий звонок к этому диалогу или это совершенно другой клиент.
Такое соседство разных коммуникационных контекстов создавало когнитивную нагрузку и повышало вероятность ошибок.
Решение
Я разделила рабочее пространство на два независимых окна:
- основное окно — работа с чатами, историей, контактами и остальными разделами продукта;
- отдельное окно софтфона — все сценарии голосовой связи, история звонков.
Так оператор мог свободно работать с сообщениями, не смешивая их визуально с текущим звонком.
Почему именно так
Звонок — это самостоятельный пользовательский контекст.
Во время разговора оператор концентрируется на голосовом взаимодействии, которое не всегда связано с тем чатом, который открыт в основном окне.
Во время разговора оператор концентрируется на голосовом взаимодействии, которое не всегда связано с тем чатом, который открыт в основном окне.
Разделение пространств сделало эту границу очевидной.
Ключевое решение 2
Настройки перестали быть разделом приложения
Проблема
Настройки были полноценным разделом приложения и открывались через основную навигацию.
Чтобы изменить параметры работы, оператор фактически покидал своё рабочее пространство.
После изменения настроек приходилось возвращаться обратно к текущей задаче.
Решение
Я вынесла настройки в отдельное окно, которое открывается из верхней панели приложения.
Теперь настройки стали вспомогательным инструментом, а не частью основного пользовательского сценария.
Рабочий контекст при этом не теряется.
Рабочий контекст при этом не теряется.
Почему именно так
Настройки используются эпизодически. Это не часть ежедневной обработки обращений.
Поэтому они не должны конкурировать с основными разделами приложения в навигации.
Поэтому они не должны конкурировать с основными разделами приложения в навигации.
Ключевое решение 3
Адаптация софтфона под веб
Контекст
В desktop-приложении софтфон работал как отдельное окно. Благодаря этому его можно было сделать достаточно большим и разделить на две функциональные области.
Такое решение хорошо подходило для десктопного приложения, где пользователь управляет несколькими окнами.
Проблема
В веб-версии такой подход был невозможен.
Софтфон должен был работать внутри браузера, не перекрывая основное рабочее пространство и не занимая слишком много места.
Прямой перенос desktop-интерфейса ухудшил бы удобство работы.
Решение
Вместо двух независимых областей появился компактный интерфейс, в котором все основные сценарии были объединены в одном экране.
При этом удалось сохранить основные пользовательские действия без увеличения количества переходов.
Почему именно так
Я не стремилась сделать одинаковые интерфейсы.
Целью было сохранить одинаковую логику использования при разных технических ограничениях платформ.
Desktop и web решают одну задачу, но делают это разными средствами.
Результат
В результате был создан единый омниканальный интерфейс оператора, который работает в трёх средах: web, desktop и mobile.
Также была расширена дизайн-система, что позволило использовать единый набор компонентов для дальнейшего развития продукта.
Также была расширена дизайн-система, что позволило использовать единый набор компонентов для дальнейшего развития продукта.
Примеры интерфейсов
Десктоп
Мобильные экраны
