Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / Интерфейс рабочего места оператора поддержки банка

2020

Интерфейс рабочего места оператора поддержки банка

Разработали дизайн ARM, в которой объединили функциональность сразу нескольких программ для колл-центра

Цена

~ 900 000 ₽

Сроки

Интерфейс рабочего места оператора поддержки банка

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

Заказчик

Альфа-Банк — крупнейший частный банк в России и один из пяти крупнейших по объему активов банков страны.

Наш заказчик — одно из IT-подразделений банка. У него была сложная и почти необъятная задача: улучшить автоматизированное рабочее место службы поддержки банка. Тогда операторы колл-центра и операторы чата будут быстрее обслуживать клиентов.

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

Старый интерфейс рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru В этом интерфейсе оператору приходилось искать ответы на вопросы клиента, параллельно разговаривая по телефону

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

Вместе эти программы создавали массу проблем банку:

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

Казалось бы, всем было понятно, что систему надо менять. Но не все так просто.

Во-первых, она работала. А как известно, трогать работающее иной раз дороже.

Во-вторых, это банк. Любая разработка, касающаяся данных клиентов, — это очень дорого. Даже очень-очень дорого. Поэтому просто так денег никто не дал бы. Нужно было очень убедительно доказать топ-менеджменту, что изменения обоснованны и приведут к счастью.

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

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

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

Задача нам очень понравилась. Еще бы! «Собаку Павлову» пригласили выступить катализатором перемен в Альфа-Банке, которые коснутся миллионов его клиентов.

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

Процесс

Исследование

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

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

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

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

Cценарий работы оператора колл-центра Альфа-Банка на основе исследования | SobakaPav.ru История линейная и не очень сложная

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

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

Концептуальное проектирование

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

В концепте «Браузер» расположили на главном экране самые частые запросы и теги. По клику на запрос оператор попадает сразу на страницу, поделенную на три части. В верхней левой части находится ответ на запрос клиента, в правой верхней — ответы, которые тоже могут относиться к запросу.

Часто бывает так, что клиенты банка неверно указывают причины звонка. Иногда случайно, а иногда — специально. Логика у них такая: все «кредитные» операторы заняты, поэтому быстро попаду в менее загруженный отдел, а оттуда переведут в нужный. Для таких ситуаций мы разместили на главной странице кнопку «Перевод».

Концептуальное проектирование. Браузер | SobakaPav.ru Концепты на бумаге позволяют не привязываться к контролам и сразу работать над смыслом

В концепте «Гугл» оператор использует умный поиск, который при вводе символов сразу предлагает выбрать конкретный запрос, а на следующей странице показывает подходящие результаты и вопросы, которые тоже могут относиться к теме.

Концептуальное проектирование. Гугл | SobakaPav.ru Хоть сценарий и большой, его можно реализовать в два-три экрана

В концепте «Робот» система сама распознает вопрос клиента и мгновенно выводит ответ на экран. Оператору остается только озвучить его. Ниже вопроса — другие вопросы по той же теме и поиск.

Концептуальное проектирование. Робот | SobakaPav.ru В этом концепте оператору достаточно принять звонок и прочитать ответ с экрана

Самый консервативный концепт — CRM. В нем мы предложили просто сделать редизайн старой главной страницы.

Концептуальное проектирование. CRM | SobakaPav.ru Классическое решение для похожих систем

Проработка макетов

Мы обсудили с заказчиком концепты и решили, что самый прогрессивный и перспективный вариант — «Браузер».

Главный экран системы состоит из карточек категорий, внутри которых — ссылки на самые популярные запросы. При этом первая карточка — динамическая. Ею управляет робот, который распознает вопрос клиента и сразу подгружает ссылки на подходящие ответы.

В шапке — интерфейс управления звонком, чуть ниже — информация о клиенте в свернутом виде.

Проработка макетов интерфейса рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru Интерфейс спрашивает, правильно ли система определила запрос клиента. Это нужно для самообучения нейросети

Умный поиск из концепта «Гугл» тоже пригодился.

Умный поиск. Интерфейс рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru Смотрим, как лучше выделить совпадающий с запросом результат поиска

При клике на ссылку с запросом или подсказку в поиске открывается форма с результатами. Справа — связанные вопросы. Карточки на время опускаются вниз.

Связанные вопросы. Интерфейс рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru Когда вопрос решен, оператор должен предложить платную услугу клиенту. Об этом напоминает и кнопка в правом нижнем углу

Если кликнуть на кнопку «Все разделы» в левом нижнем углу, система покажет боковое меню. Это решение мы взяли из концепта CRM.

Все разделы. Интерфейс рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru В поле с клиентом показываем все возможные теги

Детализация

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

Так что почти сразу мы перешли к детализации макетов.

Детализация макетов интерфейса рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru Ссылки в первую карточку подставляет робот, умеющий определять вопросы клиента и находить на них ответы

Заказчик не требовал использовать дизайн-систему Альфа-Банка. Возможно, потому что это внутренний продукт. Так что мы собрали дизайн на базе вайрфрейма Form.

Детализация макетов интерфейса рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru Если не помогли ни карточки, ни поиск, оператор может открыть меню со всеми разделами

Справа от формы — блок с возможными действиями, связанными вопросами и ссылкой в актуальный раздел базы знаний. В нашем примере — в раздел «Тарифы».

Информация по карте. Интерфейс рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru Информация по карте подгружается сразу в форму оформления. Раньше оператору приходилось смотреть тарифы в интернете

Программа автоматически подгружает все данные о дозвонившемся клиенте. Если он спросит что-то, не относящееся к теме звонка, оператор сможет быстро посмотреть ответ в соседнем разделе. Раньше для этого приходилось переходить в другую программу и вбивать в нее данные о клиенте.

Уведомления. Интерфейс рабочего места оператора поддержки Альфа-Банка | SobakaPav.ru Показываем, как выглядят уведомления

Мы отрисовали все состояния и собрали интерактивный прототип.

Три экрана закрыли сценарий, который мы договаривались проработать. Конечно, это не дизайн всей программы — только часть для демонстрации топ-менеджменту. Но мы собрали каркас системы: главную страницу, навигацию и выдачу результатов. И он достаточно гибкий, чтобы в него можно было разместить другие услуги банка, в том числе и будущие.

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

Заказчик забрал дизайн и ушел тестировать его на операторах.

Финал

Заказчик протестировал макеты, показал их топ-менеджменту и получил деньги на разработку новой программы. Одним выстрелом он убил двух, а то и трех зайцев.

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

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

В-третьих, заказчик получил деньги на разработку. А значит, инвестировал и проявлял инициативу не зря. Благодаря ему тысячам операторов станет легче работать, клиенты будут быстрее получать ответы на вопросы, а банк заработает на увеличении производительности специалистов.

Смысл

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

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

Помогли «Альфа-Банку» обновить главную программу для колл-центра

Отзыв заказчика

Сергей Горячко
«Крутая работа! Очень порадовало отсутствие излишней бюрократии. Несмотря на то что команда в другом городе, коммуникация была организована на высоте. Сразу видно, что ценят как свое время, так и заказчика. Задача была понята быстро, и ее результаты пошли в работу. Большое спасибо команде!»
Сергей Горячко
Руководитель проектов

Цена

~ 900 000 ₽

Сроки