Редизайн Naumen SoftPhone
Клиент
Компания Naumen — ведущий российский разработчик программных решений для бизнеса и органов власти. Мы знакомы давно: еще в 2011 году создали интерфейс сервиса SmartNUT и обновили сайт Naumen.
Задача
На этот раз клиент обратился с задачей обновить интерфейс приложения Naumen SoftPhone для контакт-центров.
Что такое Naumen SoftPhone? Это десктопное приложение для операторов и супервизоров контакт-центров. Через него они принимают звонки, отвечают в чатах, обрабатывают письма и выполняют другие задачи. SoftPhone — часть большой платформы Naumen Contact Center.
Цель редизайна — сделать интерфейс более современным и удобным для операторов контакт-центра, адаптируемым для браузерного модуля WebPhone и соответствующим фирменному стилю Naumen.
Задачи проекта:
- Перераспределить панели интерфейса, перепроектировать наиболее критичные.
- Обновить стиль приложения с учетом фирменных цветов и элементов.
- Разработать гибкий дизайн, который способен пережить метаморфозы интерфейса в будущем.
Еще Naumen хотели проверить гипотезу. Приложения конкурентов не эмоциональные, а скорее функциональные — без цветовых акцентов, фирменных иконок и шрифтов. А что, если сделать Naumen SoftPhone совсем другим?
Решение
Рабочий процесс
Проектирование и разработка графического языка (кнопок, иконок, цветов и других элементов, с помощью которых интерфейс «разговаривает» с пользователем) шли параллельно. Мы старались по возможности сократить сроки проекта.
Стиль и оформление мы целиком взяли на себя.
Задачи по проектированию решали вместе с командой из Naumen — чтобы не упустить из виду детали сложного интерфейса, без которых SoftPhone потерял бы в удобстве и эффективности.
Структура
Первым делом мы пересмотрели структуру интерфейса и перераспределили все инструменты приложения в 4 блока:
- Блок управления разговором
- Блок пользователя
- Контентная зона
- Навигация
Блок управления разговором
Мы продумали и визуально оформили все ключевые состояния приложения — от входящего вызова до его завершения.
Во время разговора оператор видит фотографию и имя собеседника. А если в телефонной книге нет его фотографии, то контакту присваивается стандартная аватарка.
- Управлять звонком можно сочетанием горячих клавиш;
- Громкость микрофона и динамика регулируется прямо в интерфейсе — без лишних настроек;
- А чтобы переадресовать звонок, достаточно пары кликов: нажимаешь кнопку — сразу открывается поиск по контактам.
Телефонная книга
Устроена по принципу каскадной вложенности (когда данные группируются «лесенкой», от общего к частному). Нужный контакт легко найти по категориям или просто через поиск.
Папки
Мы обновили иконки папок — старые выбивались из общего стиля. Новый дизайн получился аккуратнее, при этом мы сохранили привычное цветовое кодирование Naumen.
Заодно привели в порядок окно набора номера для звонков внутри команды.
Если оператору нужна помощь, он жмёт кнопку SOS — и супервизор подключается к звонку, чтобы подсказывать – как суфлер актуре. На той стороне этого не слышат, всё происходит незаметно.
Когда срабатывает SOS, у супервизора рядом с именем оператора загорается красная иконка.
Интерфейс супервизора почти такой же, как у оператора. Главное отличие — отдельная вкладка, где он может следить за работой всех операторов.
А еще он может подключиться к любому звонку так, что об этом никто не узнает.
Блок пользователя
Верхняя панель показывает статистику оператора за смену и его текущий статус.
Оператор выбирает статус из стандартных или заранее им заготовленных вариантов.
Контентная зона
Это основная рабочая область для оператора и супервизора. Поэтому мы подобрали для нее нейтральный и даже медитативный фон.
Раньше в SoftPhone использовали стандартные элементы интерфейса операционной системы. Это делало программу универсальной, но выглядело старомодно. Теперь мы перешли на другую библиотеку компонентов — с современным дизайном и поддержкой работы на разных платформах.
Чат
В SoftPhone всё необходимое под рукой, и даже свой внутренний чат. Тут можно обсудить рабочие вопросы и пообщаться, пока никто не видит.
Приложение адаптируется к любому экрану — будь то широкоформатный монитор или дисплей ноутбука.
Навигация
Проста, как в браузере. Пользователь переключается между разделами, выбирая вкладки.
Вкладок ограниченное количество. Если какая-то не нужна, её можно закрыть, а потом снова открыть через выпадающее меню или горячие клавиши. Стрелки по краям панели помогают листать вкладки.
Этап внедрения
За год реализации SoftPhone в новом дизайне исходные прототипы претерпели немало изменений, но коллегам из Naumen удалось сохранить выбранную стилистику. В течение года мы наведывались в гости, чтобы помочь с внедрением.
Результат
Эффективность работы обновленного приложения SoftPhone никак не посчитать, так как это фрагмент огромной системы. Главное, что нам c Naumen удалось аккуратно изъять этот раздел, обновить структуру и стиль и вернуть его на место, не помешав работе системы Contact Center в целом. Всё работает как часы — точные и удобные.