---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-08-14
publishYear: 2020
name: Alfa-arm
title: Интерфейс рабочего места оператора поддержки банка
excerpt: Разработали дизайн интерфейса многофункциональной ARM вместо нескольких программ, которыми пользовались сотрудники колл-центра.
context: Помогли заказчику создать масштабируемый макет, который убедил руководство банка вложиться в разработку новой версии «Альфа-Консультанта».
logo:
src: ~/assets/images/portfolio/alfa-arm/logo.png
alt: Альфа-Банк logo
link: https://alfabank.ru/
image: ~/assets/images/portfolio/alfa-arm/alfa-arm.png
imageAlt: Интерфейс рабочего места оператора поддержки банка
thumbnail:
src: ~/assets/images/portfolio/cards/alfa-arm.svg
src2: ~/assets/images/portfolio/cards-l/alfa-arm_big.png
alt: Собака Павлова • Альфа Банк • Дизайн рабочего места оператора поддержки банка
doubleSize: true
tags:
- fin
- it
- ux-design
- ux-outsource
- prototype
- prof
- alfa
tags2:
- Финансы
- Дизайн-система
- ARM
- Профессиональные интерфейсы
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), [прототип под инфестиции](/services/prototype) и [многое другое](/services).
collection: services
page: ux-design
- collection: services
page: prototype
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: qiwi
- collection: portfolio
page: alfastrah-design
- collection: portfolio
page: monetory
- collection: portfolio
page: alfastrahhr
- collection: portfolio
page: opendesk
- collection: portfolio
page: sberbank
- collection: portfolio
page: tinkoff
- collection: portfolio
page: inbank
- collection: portfolio
page: otkritie
- collection: portfolio
page: alfabank
result:
- src: ~/assets/images/portfolio/figma.svg
text: Интерактивный прототип
link: https://www.figma.com/proto/09Mrwtokd9E8XkkZdAJzvR/%D0%90%D0%BB%D1%8C%D1%84%D0%B0%D0%B1%D0%B0%D0%BD%D0%BA.ARM-Interactive_outbox?node-id=225%3A30675&scaling=min-zoom
budget: ~ 900 000 ₽
review:
text: Крутая работа! Очень порадовало отсутствие излишней бюрократии. Несмотря на то что команда в другом городе, коммуникация была организована на высоте. Сразу видно, что ценят как свое время, так и заказчика. Задача была понята быстро, и ее результаты пошли в работу. Большое спасибо команде!
photo: ~/assets/images/portfolio/alfa-arm/person.jpg
person: Сергей Горячко
position: Руководитель проектов
director: Помогли «Альфа-Банку» обновить главную программу для колл-центра
metadata:
canonical: https://sobakapav.ru/portfolio/alfa-arm
title: АРМ • Дизайн интерфейса рабочего места оператора поддержки «Альфа-Банка»
description: "Разработали дизайн интерфейса многофункциональной ARM вместо нескольких программ, которыми пользовались сотрудники колл-центра."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/alfa-arm/alfa-arm.png'
width: 1456
height: 916
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Задача](#anchor1) • [UX-исследование](#anchor2) • [Концептуальное проектирование](#anchor3) • [Проработка дизайна](#anchor4) • [Детализация интерфейса](#anchor5) • [Результат](#anchor6) • [Смысл](#anchor7) • [Отзыв, цены и сроки](#anchor8)
</TOC>
## <a name="anchor1" />Задача
Альфа-Банк — крупнейший частный банк в России и один из пяти крупнейших по объему активов банков страны.
Наш заказчик — одно из IT-подразделений банка. У него была сложная и почти необъятная задача: улучшить автоматизированное рабочее место службы поддержки банка. Тогда операторы колл-центра и операторы чата будут быстрее обслуживать клиентов.
Для 2019 года это был достаточно громоздкий старый сервис, который никто не обновлял. С появлением новых банковских услуг заказчик добавлял новую функциональность, при этом интерфейс для старых неактуальных услуг оставался на месте и висел мертвым грузом на главном экране. Подразумевалось, что на часть кнопок просто не нужно нажимать.
_В этом интерфейсе оператору приходилось искать ответы на вопросы клиента, параллельно разговаривая по телефону_
Еще оператор пользовался браузером с несколькими открытыми вкладками, потому что иногда актуальную информацию надо смотреть в интернете. И не забывайте про отдельный софт для чатов и созвонов.
Вместе эти программы создавали массу проблем банку:
- приходилось тратить много времени на обучение оператора — аж целый месяц;
- компьютеры подтормаживали и задерживали оператора, потому что для десяти программ нужно сильное железо;
- оператор тратил много времени, чтобы переключаться между программами.
Казалось бы, всем было понятно, что систему надо менять. Но не все так просто.
Во-первых, она работала. А как известно, трогать работающее иной раз дороже.
Во-вторых, это банк. Любая разработка, касающаяся данных клиентов, — это очень дорого. Даже очень-очень дорого. Поэтому просто так денег никто не дал бы. Нужно было очень убедительно доказать топ-менеджменту, что изменения обоснованны и приведут к счастью.
В-третьих, это снова банк. Со множеством бюрократических сложных процедур. Их гораздо проще пройти и получить бюджет, если заранее запастись убойными аргументами.
Именно за ними к нам и пришел Альфа-Банк. Причем пришел не с пустыми руками — представитель заказчика подготовил небольшой прототип по главным сценариям работы с системой, который мы позже использовали как ценные вводные по пользовательским задачам.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Нам нужно было превратить этот прототип в интерфейс, который бы четко показал: «Мы отрисовали всего несколько основных задач операторов — оцените, насколько уже стало проще работать. Посмотрите на числа, которые мы замерили при тестировании. Видите, что операторы справляются с этими типовыми задачами намного быстрее? Мы можем сделать так по всей системе».
Задача нам очень понравилась. Еще бы! «Собаку Павлову» пригласили выступить катализатором перемен в Альфа-Банке, которые коснутся миллионов его клиентов.
Уровень ответственности зашкаливающий, но соответствует нашему опыту — мы уже [устраивали изменения в Сбере](https://sobakapav.ru/portfolio/sberbank) и [разрабатывали концепцию зарубежного приложения](https://sobakapav.ru/portfolio/fasting). Так что взялись за дело, весело размахивая хвостом.
## <a name="anchor2" />UX-исследование
Мы традиционно начали с аналитики. Чтобы понять, как упростить работу операторов колл-центра, нужно с ними поговорить. Заказчик предоставил четырех специалистов. Двое из них общаются с клиентами банка по телефону, еще двое консультируют в чате. Один новичок и три опытных сотрудника.
Во время интервью мы шли по гайду, но при необходимости отклонялись, чтобы уточнить подробнее важные детали. Например, просили оператора объяснить по скриншотам, как он работает в интерфейсах существующих программ, что ему удобно и чего не хватает. Здесь нам сильно помогли прототипы заказчика — можно было сравнить его версию со старой и спросить, стало ли удобнее и почему. Так мы лучше понимали, в какую сторону двигаться.
Аналитика показали, что даже опытные специалисты не знают софт идеально. К примеру, не все могли рассказать, что изображают иконки. Это объяснимо: львиная доля обращений касается кредитов и других популярных продуктов, и все связанные с ними интерфейсы операторы знают идеально. А остальная часть софта нужна в редких случаях либо вообще относится к уже неактуальным услугам.
На основе исследования подготовили сценарий, над которым будем работать.
_История линейная и не очень сложная_
Также из разговоров с операторами мы узнали, что им не нужно идентифицировать клиентов. Все происходит автоматически. Когда оператор принимает звонок или отвечает в чате, данные о клиенте уже выведены на экран основной программы.
А от заказчика мы узнали, что банк использует нейросети, которые способны понимать вопросы и отвечать на них. Но пока это не голосовой помощник, который умеет общаться с человеком. Скорее, ассистент службы поддержки — может определить смысл вопроса и перенаправить клиента оператору из нужного отдела.
## <a name="anchor3" />Концептуальное проектирование
Мы начали с бумажных скетчей, чтобы быстрее определиться с формой. Подготовили четыре концепта.
В концепте «Браузер» расположили на главном экране самые частые запросы и теги. По клику на запрос оператор попадает сразу на страницу, поделенную на три части. В верхней левой части находится ответ на запрос клиента, в правой верхней — ответы, которые тоже могут относиться к запросу.
Часто бывает так, что клиенты банка неверно указывают причины звонка. Иногда случайно, а иногда — специально. Логика у них такая: все «кредитные» операторы заняты, поэтому быстро попаду в менее загруженный отдел, а оттуда переведут в нужный. Для таких ситуаций мы разместили на главной странице кнопку «Перевод».
_Концепты на бумаге позволяют не привязываться к контролам и сразу работать над смыслом_
В концепте «Гугл» оператор использует умный поиск, который при вводе символов сразу предлагает выбрать конкретный запрос, а на следующей странице показывает подходящие результаты и вопросы, которые тоже могут относиться к теме.
_Хоть сценарий и большой, его можно реализовать в два-три экрана_
В концепте «Робот» система сама распознает вопрос клиента и мгновенно выводит ответ на экран. Оператору остается только озвучить его. Ниже вопроса — другие вопросы по той же теме и поиск.
_В этом концепте оператору достаточно принять звонок и прочитать ответ с экрана_
Самый консервативный концепт — CRM. В нем мы предложили просто сделать редизайн старой главной страницы.
_Классическое решение для похожих систем_
## <a name="anchor4" />Проработка дизайна
Мы обсудили с заказчиком концепты и решили, что самый прогрессивный и перспективный вариант — «Браузер».
Главный экран системы состоит из карточек категорий, внутри которых — ссылки на самые популярные запросы. При этом первая карточка — динамическая. Ею управляет робот, который распознает вопрос клиента и сразу подгружает ссылки на подходящие ответы.
В шапке — интерфейс управления звонком, чуть ниже — информация о клиенте в свернутом виде.
_Интерфейс спрашивает, правильно ли система определила запрос клиента. Это нужно для самообучения нейросети_
Умный поиск из концепта «Гугл» тоже пригодился.
_Смотрим, как лучше выделить совпадающий с запросом результат поиска_
При клике на ссылку с запросом или подсказку в поиске открывается форма с результатами. Справа — связанные вопросы. Карточки на время опускаются вниз.
_Когда вопрос решен, оператор должен предложить платную услугу клиенту. Об этом напоминает и кнопка в правом нижнем углу_
Если кликнуть на кнопку «Все разделы» в левом нижнем углу, система покажет боковое меню. Это решение мы взяли из концепта CRM.
_В поле с клиентом показываем все возможные теги_
## <a name="anchor5" />Детализация интерфейса
Мы с заказчиком довольно быстро пришли к интерфейсу, который можно развивать. Возможно, помогло разнообразие концептов — когда на руках много идей, лучше представляешь потенциал проекта. А еще понимаешь, в каком направлении стоит двигаться дальше. Без сомнений и времени на «подумать».
Так что почти сразу мы перешли к детализации макетов.
_Ссылки в первую карточку подставляет робот, умеющий определять вопросы клиента и находить на них ответы_
Заказчик не требовал использовать [дизайн-систему Альфа-Банка](https://design.alfabank.ru/). Возможно, потому что это внутренний продукт. Так что мы собрали дизайн на базе [вайрфрейма Form](https://www.invisionapp.com/inside-design/design-resources/free-wireframe-kit-form/).
_Если не помогли ни карточки, ни поиск, оператор может открыть меню со всеми разделами_
Справа от формы — блок с возможными действиями, связанными вопросами и ссылкой в актуальный раздел базы знаний. В нашем примере — в раздел «Тарифы».
_Информация по карте подгружается сразу в форму оформления. Раньше оператору приходилось смотреть тарифы в интернете_
Программа автоматически подгружает все данные о дозвонившемся клиенте. Если он спросит что-то, не относящееся к теме звонка, оператор сможет быстро посмотреть ответ в соседнем разделе. Раньше для этого приходилось переходить в другую программу и вбивать в нее данные о клиенте.
_Показываем, как выглядят уведомления_
Мы отрисовали все состояния и собрали [интерактивный прототип](https://www.figma.com/proto/09Mrwtokd9E8XkkZdAJzvR/%D0%90%D0%BB%D1%8C%D1%84%D0%B0%D0%B1%D0%B0%D0%BD%D0%BA.ARM-Interactive_outbox?node-id=225%3A30675&scaling=min-zoom).
Три экрана закрыли сценарий, который мы договаривались проработать. Конечно, это не дизайн всей программы — только часть для демонстрации топ-менеджменту. Но мы собрали каркас системы: главную страницу, навигацию и выдачу результатов. И он достаточно гибкий, чтобы в него можно было разместить другие услуги банка, в том числе и будущие.
Главное — MVP убедительно показывает, насколько новая программа получится проще и быстрее старых. И это именно тот мощный аргумент, на который будут смотреть топы, отвечающие за распределение бюджетов. А обошелся он, будем честны, в крохотную для банка сумму.
Заказчик забрал дизайн и ушел тестировать его на операторах.
## <a name="anchor6" />Результат
Заказчик протестировал макеты, показал их топ-менеджменту и получил деньги на разработку новой программы. Одним выстрелом он убил двух, а то и трех зайцев.
Во-первых, получил MVP новой программы. Не блестящий фантик, который можно дорого продать, а рабочий дизайн.
Во-вторых, сэкономил на разработке. Мы подготовили внешний вид системы и принципы работы интерфейса, передали набор компонентов. Дальше дизайнеры будут развивать ее сами — во многих местах это сведется к сборке конструктора.
В-третьих, заказчик получил деньги на разработку. А значит, инвестировал и проявлял инициативу не зря. Благодаря ему тысячам операторов станет легче работать, клиенты будут быстрее получать ответы на вопросы, а банк заработает на увеличении производительности специалистов.
## <a name="anchor7" />Смысл
За небольшой бюджет заказчик получил идею и реализацию, в которые банк вложил миллионы. Дизайн стал главным аргументом.
Большие перемены так и начинаются — с одной убедительной идеи. Против которой нечего возразить. И в такие идеи стоит инвестировать — чем мощнее старт проекта, тем больше его потенциал и тем раньше его можно обнаружить.
## <a name="anchor8" />