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

Заказчик

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

Naumen SoftPhone

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

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

Сменить акценты в интерфейсе и упростить сценарии работы операторов контакт-центра;
Разработать дизайн, который можно будет перенести на модуль WebPhone — рабочее место оператора в браузере;
Привнести в дизайн приложения стилистику бренда Naumen.

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

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

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

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

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

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

Структура

Первым делом мы пересмотрели структуру интерфейса и перераспределили все инструменты приложения в 4 блока.
1
Блок управления
разговором
2
Блок
пользователя
3
Контентная зона
4
Навигация
1
Блок управления разговором
2
Блок пользователя
3
Навигация
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

Команда

Александр Голованов
Дизайнер
Максим Смирнов
Арт-директор
Евгений
Бендин
Рисовал папочки
Михаил Сингаевский
Менеджер
Александр Зайцев
Подготовил кейс

Понравился кейс?
У вас похожая задача?
Позвоните или напишите нам

+7 (343) 384-84-81
или

Другие работы

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