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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Другие кейсы