Редизайн интерфейса
Naumen SoftPhone

Заказчик

Компания Naumen — ведущий российский разработчик программных решений для бизнеса и органов власти.

Мы знакомы давно. В далеком 2011-м мы сделали интерфейс сервиса SmartNUT и новую версию сайта Naumen. (Конечно, эти версии уже в прошлом, но мы ими все равно гордимся.)

Naumen обратились к нам с задачей обновить интерфейс приложения Naumen SoftPhone для контакт-центров. Так, чтобы оно стало актуальным, привлекательным, более простым и удобным.

Прежний дизайн

Naumen SoftPhone

Десктопное приложение, с помощью которого операторы и супервизоры контакт-центров обрабатывают звонки, обращения в чатах, электронную почту и многое другое. Это приложение — часть огромной комплексной системы Naumen Contact Center.

Цели редизайна

Сменить акценты в интерфейсе и упростить сценарии работы операторов контакт-центра;

Разработать дизайн, который можно будет перенести на модуль WebPhone — рабочее место оператора в браузере;

Привнести в дизайн приложения стилистику бренда Naumen.

Задачи проекта

Пересмотреть расположение текущих панелей и перепроектировать наиболее критичные;

Обновить стиль текущего приложения;

А главное — разработать дизайн, который способен пережить метаморфозы интерфейса в будущем.

Еще Naumen хотели проверить гипотезу

Приложения конкурентов не эмоциональные — в подобных программах все предельно функционально, без цветовых акцентов, фирменных иконок и шрифтов. А что, если сделать Naumen SoftPhone совсем другим?

Рабочий процесс

Проектирование и разработка графического языка шли параллельно — мы старались по возможности сократить сроки проекта.

Стиль и оформление
мы целиком взяли на себя.
(цветовое кодирование, кнопки, иконки и многое другое)

Задачи по проектированию мы решали вместе с командой из Naumen — чтобы не упустить из виду детали сложного интерфейса, без которых SoftPhone потерял бы в удобстве и эффективности.

Структура

Первым делом мы пересмотрели структуру интерфейса и перераспределили все инструменты приложения в 4 блока.

Блок управления
разговором

Блок
пользователя

Контентная зона

Навигация

Блок управления разговором

Блок пользователя

Навигация

Контентная зона

Блок управления разговором

Состояния от режима ожидания до завершения звонка

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

Управлять разговором можно сочетанием горячих клавиш.

За регулировкой громкости динамика и микрофона больше не нужно лезть в настройки.

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

Телефонная книга

Устроена по принципу каскадной вложенности. Контакт легко найти по категориям и подкатегориям или через поиск.

Папочки

Старые иконки папок не подходили по стилю, мы переработали их, сохранив при этом внутреннее цветокодирование системы Naumen.

И обновили окошко набора номера для звонков внутри команды.

Кнопкой SOS оператор вызывает супервизора, чтобы тот помог в разговоре. Супервизор незаметно присоединяется к звонку и подсказывает оператору — как суфлер актеру. На той стороне провода изменений никто не замечает.

А когда оператор нажимает тревожную кнопку, супервизор видит красную иконку у его имени:

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

А еще он может подключиться к любому звонку так, что об этом никто не узнает.

Блок KPI

Верхняя панель содержит статистику работы оператора за смену и его текущий статус.

Оператор выбирает статус из стандартных или заранее им заготовленных вариантов.

Контентная зона

Это основная рабочая область для оператора и супервизора. Поэтому мы подобрали для нее нейтральный и даже медитативный фон.

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

Чат

В SoftPhone всё необходимое под рукой, и даже свой внутренний чат. Тут можно обсудить рабочие вопросы и пообщаться, пока никто не видит :)

Приложение адаптируется к любому экрану — будь то широкоформатный монитор или дисплей ноутбука.

Этап реализации

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

Результаты

Эффективность работы обновленного приложения SoftPhone никак не посчитать, так как это фрагмент огромной системы. Главное, что нам c Naumen удалось аккуратно изъять этот раздел, обновить структуру и стиль и вернуть его на место, не помешав работе системы Contact Center в целом. Всё работает как часы — точные и удобные.

Отзыв

«В течение нескольких последних лет команда Naumen Contact Center реализует проект редизайна интерфейса программного телефона Naumen SoftPhone. Мы работаем совместно с компанией JetStyle.

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

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

Коллеги действительно смогли погрузиться в специфику нашего продукта, помогли преобразовать user experience, накопленный командой Naumen Contact Center, в интерфейс, делающий работу операторов и супервизоров контактных центров максимально удобной. На всех этапах реализации мы получали от команды JetStyle не только формально выполненные работы, но и неформальное обсуждение всех принимаемых решений.»

Команда Naumen

Команда

Александр Голованов

Дизайнер

Максим Смирнов

Арт-директор

Евгений
Бендин

Рисовал папочки

Михаил Сингаевский

Менеджер

Александр Зайцев

Подготовил кейс

8 (800) 555-81-86
или

Мы работаем над большим количеством крутых
и интересных проектов. Вот еще несколько.

Редизайн интерфейса
Naumen SoftPhone