Приложение для работы с заявками на дебетовые карты

Тинькофф Банк:
веб-приложение

для обработки заявок
на дебетовые карты

Задача

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

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

Данные, передающиеся в приложение

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

Исследование пользователя

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

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

Чтобы разговор с респондентом был более предметным, я заранее подготовил несколько основных экранов приложения на основании собственных гипотез, дизайнерского опыта и анализа интерфейсов различных CRM.

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

Основные функции

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

Превью заявки на карту

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

В результате интервью с одним из респондентов в превью заявки было добавлено минималистичное цветовое обозначение (кружок слева от имени клиента) статуса заявки. Обычно, в зависимости от установленного плана, банковскому сотруднику необходимо отреагировать на заявку в течение определенного периода времени (как правило — около 15 минут). Отсюда возникает необходимость в элементе, который бы показывал, "в какой зоне" находится заявка — зеленый кружок означает, что заявка поступила недавно, и сильно торопиться не обязательно (например, заявке не более 5 минут); заявка, на которую нужно поспешить отреагировать, отмечается желтым кружком, а та, допустимое время реакции на которую превышено — красным. На скриншоте ниже показано только зеленое обозначение. Элемент есть только на заявках со статусом "еще не звонили".

Фильтр заявок

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

Детальная информация о заявке

Детальная информация о заявке появляется в правой части экрана при клике на любое место в превью этой заявки. В открывшемся блоке отображается вся информация, переданная клиентом, все инструменты для работы с этой заявкой, внутренняя системная информация о ней (во сколько она поступила, сколько раз оператор звонил клиенту) и комментарий, если он добавлен.

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

Звонок клиенту

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

На экране звонка дублируется имя клиента и город, отображается длительность звонка. Согласно задаче, во время звонка можно отключить микрофон.

Текстовый блок.
Начните писать текст

Назначение встречи

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

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

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

Дополнительные функции

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

Быстрые заметки

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

Напоминание о необходимости перезвонить

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

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

Передача заявки

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

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

Или, у нас есть подозрения, что намерения клиента нечисты (от него поступает спам, угрозы, исходят попытки мошеннических действий). Тогда мы можем передать заявку в отдел безопасности, чтобы ее проверили.

Для такого рода случаев предусмотрена возможность передачи заявки. Как и многие другие, эта функция — результат проведенного исследователя пользователя.

Записи звонков

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

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

Текстовый блок.
Начните писать текст

Отправка уведомлений клиенту

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

Вход в приложение

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