Интерфейс системы контроля качества Телеконтакт

О заказчике и его сервисе

«Телеконтакт» — ТОП-1 аутсорсинговый колл-центр России. Для проверки качества звонков компания разработала QMT — облачный сервис по автоматизации контроля в контакт-центрах. «Телеконтакт» использует систему для себя, а также выступает вендором и продает ее другим компаниям.

В QMT есть 5 ролей для разных специалистов:

Набор функций QMT покрывает все бизнес-процессы, касающиеся оценки качества работы контакт-центра. Например, в программе можно ставить задачи на оценку звонков операторов, отслеживать статистику, планировать тренинги, оставлять обратную связь о работе сотрудников.

Задача

Компания обратилась к нам за редизайном действующего продукта QMT.

По мере развития сервиса разработчики добавляли новые функции — в интерфейсе появлялись все новые кнопки, меню и разделы. Это повысило функциональность, но рабочее пространство стало визуально перегруженным, а интерфейс — менее логичным и понятным. Со временем пользователям стало сложнее взаимодействовать с системой.

Нашей команде предстояло обновить дизайн-концепт и интерфейс, встроив в него все действующие функции продукта. Верстку и бэкенд на себя взяли разработчики «Телеконтакта».

Решение

Главная особенность проекта — в работе с уже действующим продуктом с 7 000+ пользователей, 5 ролями и широким функционалом. Предстояло сделать редизайн так, чтобы действующие и новые пользователи легко адаптировались в интерфейсе и выполняли свои задачи быстрее, чем до обновления.

Для погружения в проект и знакомства с сервисом провели аналитику — прошли обучение и провели полевые исследования с действующими пользователями. 

На основе аналитики собрали требования к интерфейсу. И на замену решениям, которые запутывали менеджеров и руководителей, реализовали удобные пользовательские пути, которые на 15% ускорили работу с системой. 

Акцент сделали на полезном использовании пространства. Для этого убрали дублирующиеся элементы и переработали инструменты работы с контентом: сделали более удобные таблицы, отображение фильтров и заполнение полей. На некоторых страницах полностью переделали структуру и предложили более быстрые способы использования функций.

В результате получился эргономичный интерфейс, который позволяет решать задачи всех 5 ролей в сервисе за минимальное количество времени. Теперь специалисты работают с user-friendly дизайном, который интуитивно понятен как действующим, так и новым пользователям системы.

Так как разработка (вертска, бэкенд) были на стороне заказчика — позаботились о качественной передаче артефактов. Выстроили макеты в Figma по разным пользовательским путям, собрали интерактивный прототип и передали подробную дизайн-систему для последующих обновлений.

Аналитика: что мы узнали от пользователей 

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

Кастдевы

CustDev стал одним из инструментов, который мы использовали для создания новой дизайн-концепции QMT.

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

По итогам глубинных интервью сгруппировали следующую информацию: 

Полевые исследования

Также провели полевые исследования с действующими пользователями системы. Мы просили сотрудников «Телеконтакта» провести обычный рабочий день и наблюдали, как они выполняют свои рутинные задачи в QMT.

На наших глазах люди пользовались системой и объясняли, зачем выполняются те или иные действия. Благодаря такому исследованию мы глубже проникли в работу сервиса и зафиксировали бэклог функций, при использовании которых у сотрудников возникали трудности. Логику их выполнения предстояло переработать в интерфейсе.

Обучение по сервису

Чтобы подробнее погрузиться в задачи и проблематику, проектировщик Атвинты прошел обучение по работе в действующей системе. Если хочешь разработать удобный интерфейс — думай, как пользователь, стань им. Этот подход позволил специалисту досконально вникнуть в процессы сервиса и разобрать по косточкам все элементы предыдущего дизайна программы.

Итоги редизайна: сравниваем до и после 

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

Навигация

В системе предусмотрены два типа личного кабинета: для администратора и для всех остальных ролей с различным набором функций. Так, в QMT можно быть пользователем или одновременно пользователем и администратором.

Проблемы, которые мы выделили:

Раздробленность функционала путала пользователя и отвлекала от текущих задач. Мы переработали логику навигации и оставили одно боковое меню слева, с помощью которого пользователь выполняет свои задачи. 

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

Чтобы сделать первый экран более функциональным, разработали дашборд супервайзера. Он наглядно предоставляет информацию о проекте и позволяет быстро оценить динамику изменений. Для дашборда мы собрали статистику, которая пригодится пользователям в работе. Основной показатель — средняя оценка эффективности контакт-центра.

Отображение контента и действия с ним

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

Мы переформировали правое меню следующим образом:

Для еще более удобного использования таблиц добавили сортировку, фото пользователей и быстрое копирование ссылок. Также разработали подсказки, которые появляются при наведении курсора на некоторые разделы. Все это упрощает и ускоряет работу с таблицей

Также для QMT мы отрисовали авторские иконки на замену. Многие иконки старого интерфейса не соответствовали своим функциям по смыслу. Например, лупа в столбце «Запись» традиционно ассоциируется с поиском, однако, если нажать на иконку, она развернет документ.

Подсказки и обучение 

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

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

Мы добавили инструкции для каждого раздела сайта. Это упрощает знакомство с системой и делаем обучение по сервису простым и быстрым. В нашем интерфейсе проработаны всплывающие подсказки и обучение. Находясь в любом месте сервиса, пользователь может вызвать помощника и посмотреть, где он находится и что здесь можно сделать

Тренинги: список вместо календаря

Не всем разделам требовались глобальные изменения в структуре, но мелкие недочеты, о которых говорили пользователи, мы тоже исправили. Например, в разделе «Тренинги».

Тренинги в QMT — это обучающие мероприятия, которые проводит руководитель для сотрудников. В системе тренинги обозначаются событиями с определенной датой, временем и другой информацией.

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

Пользователь может работать удобным для него способом. Слева он видит информацию в виде списка, а справа — поле календаря, где наглядно отображены прошедшие и предстоящие тренинги в разрезе месяца.

Создание параметров оценки — переработка ключевой функции

Аналитика показала, что одна из сложных для пользователя задач в текущей системе — это создание шкал администратором. Шкалы — это список критериев для оценки операторов. 

Сложность заключалась в том, что раздел для создания шкал имел неочевидную структуру, состоящую из проектов и уже существующих шкал. Ориентироваться в ней было трудно.

Для создания шкалы нужно было выбрать проект в дереве и уже внутри него найти нужную плашку, а затем перейти в другой раздел и привязать к шкале API. Это казалось пользователям не совсем очевидным. 

Мы видоизменили дерево и поменяли его дизайн на плашечный. Это привычный инструмент для сотрудников, поэтому мы оставили его и сделали взаимодействие с деревом более удобным и очевидным.

Основная модификация — в создании шкалы. Во-первых, теперь у администратора есть быстрый доступ к этой функции с первого экрана раздела. Во-вторых, этот процесс стал более удобным за счет разбивки на несколько отдельных настроек, размещенных в левом меню.

В первом разделе пользователь заполняет основную информацию о шкале. В текущей системе администраторы часто создают шкалы путем загрузки файла Excel. Мы сохранили эту функцию в новом дизайне. 

Финальный раздел — настройка связей. Здесь администратор может одновременно:

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

Передача интерфейса разработчикам клиента 

Мы разработали интерфейс всех разделов системы, функции администрирования, личный кабинет оператора и адаптив для уникальных разделов. Дальнейшая разработка интерфейса, код и внедрение были на стороне программистов Телеконтакта.

Для удобной передачи артефактов в разработку мы структурировали макеты в Figma с пошаговым выполнением функций. Также создали дизайн систему: UI Kit и правила использования сложных элементов.

Также создали интерактивный прототип, чтобы наглядно презентовать макеты заказчику и помочь разработчикам в верстке. В интерактивном прототипе отражено, что происходит при нажатии на любой из элементов интерфейса. Это позволяет разработке не обращаться лишний раз к дизайнерам и корректно верстать интерфейс.

На скриншоте ниже — связи между макетами. Все элементы прототипа — кликабельные и сопровождаются всплывающими окнами, как если бы реальный пользователь работал в системе.

После передачи макетов мы три месяца сотрудничали с «Телеконтактом» в рамках сопровождения. Атвинта консультировала разработчиков по реализации нового интерфейса. Чтобы правильно передать все идеи нашей концепции, мы создавали отдельные документы с примерами и скриншотами, таким образом облегчив разработчикам сборку нового интерфейса

Итоги проекта

Мы создали новую дизайн-концепцию для сервиса QMT — теперь сильная функциональность платформы подкреплена удобным интерфейсом. Скорость работы с системой увеличилась на 15%. Качество проекта подтвердили жюри престижного конкурса G8, где редизайн сервиса взял золото в номинации «Оптимизация интерфейса»

Новый визуал:

CustDev, полевые исследования и обучение проектировщика работе в сервисе помогли нам учесть все нюансы процессов системы и сделать ее более удобной для пользователей.