Человек ↔ банк
Рассказываем как помогли ВТБ измениться
Анкетный сервис — это интерфейс получения любого кредита. Сервис позволяет выбрать условия, заполнить анкету и через несколько секунд получить предложение с суммами и сроками. Мы участвовали в проектировании нового пользовательского опыта: от поиска кредитного продукта в интернете до сценариев повторной заявки без ввода данных.
Думаем, что ВТБ в представлении не нуждается. Один из двух крупнейших банков страны не побоялся доверить проект маленькой (но гордой) команде из Петербурга. Ну а мы не испугались сложностей в работе с большой организацией.
У этого сотрудничества есть предыстория — в 2016 году мы реализовали похожий проект для «Банка Москвы». В том же году сервисы дистанционных каналов и разработанный нами интерфейс онлайн-анкет заняли 1 место в рейтинге Markswebb Rank & Report. Через год «Банк Москвы» присоединился к ВТБ и нас пригласили для работы над новым анкетным сервисом.
В это время шел процесс слияния ВТБ и ВТБ 24 (банка для крупного бизнеса и его дочерней организации для физлиц). Нам предстояло работать над проектом в непростое время объединения двух больших административных и технологических структур.
Задачи
На волне глобальных изменений новой команде ВТБ нужен был свежий взгляд и представление о будущем анкетного сервиса.
Мы изучали проблемы, с которыми сталкиваются люди, решившие взять кредит. Допуская смелые идеи об идеальном онлайн-кредитовании, также держали в голове насущные цели бизнеса: снизить количество отказов, повысить качество лидов, процент вернувшихся пользователей и итоговую конверсию.
В это время команда департамента цифрового бизнеса ВТБ занималась улучшением бизнес-процессов анкетного сервиса и дистанционного взаимодействия с клиентами в целом. Процессы менялись на лету: нам нужно было успевать синхронизировать придуманный дизайн.
Процесс
1. Концепция. На разработку концепции у нас было чуть меньше месяца. За это время мы провели форсированные исследования, выдвинули гипотезы, представили варианты решений и дизайн-концепт интерфейса.
2. Планирование. Для обсуждения концепции коллеги из банка приехали к нам в офис в Санкт-Петербург. Мы лично познакомились с руководителем цифрового бизнеса (на тот момент), старшим вице-президентом ВТБ — Иваном Пятковым. Это было подтверждением серьезного сотрудничества и возможность быстро согласовать план реализации.
3. Проектирование и дизайн интерфейса. Первый подход мы закончили быстро — примерно через 2 месяца основа интерфейса была готова. Следующие 3 месяца обновляли дизайн и документацию по меняющимся требованиям. Изменения неизбежны в проекте, где взаимодействуют несколько разных департаментов и структур большой компании.
4. Документация и авторский контроль. Технической реализацией занималась компания-интегратор Luxoft. В течение нескольких месяцев мы знакомили команды разработчиков с результатами нашей работы, обменивались знаниями о проекте и помогали составить исчерпывающую документацию.
Концепция
В основу нашей концепции легло исследование по трём направлениям — пользователи, интерфейсы и бизнес-логика.
Мы изучали последние исследования Минфина, РОЦИТ, CGAP, НАФИ, Data Insight, статистику по финансовой доступности и финансовой грамотности в России. Смотрели на интерфейсы, которые окружают пользователей.
Сложные продукты и процессы, а также невысокий уровень доверия к банковским услугам, вызывают негатив при заполнении онлайн-заявок. А если для клиента это вынужденный кредит, то уровень стресса будет зашкаливать. Мы сосредоточили внимание на исследовании эмоций пользователей.
Выделили три составляющие, вокруг которых должен строиться банковский интерфейс: надежность, партнерство, помощь.
Не просто анкета, а сервис онлайн-заявок
Мы работали над тем, чтобы донести до пользователя, что онлайн-анкета — не сбор контактов или заявка, которую сотрудники банка будут проверять вручную, а автоматизированный современный онлайн-сервис.
Стандартное для современных онлайн-сервисов автоматическое сохранение оказалось непопулярным в кредитных анкетах. Речь идет не о сохранении контактов для обзвона, а о создании безопасного интерфейса. Когда не страшно, что нажмешь на кнопку и потеряешь ранее введенные данные.
Пользователь не начнет заполнять анкету заново по ошибке. Сервис подставит все сохраненные данные после авторизации.
Идея сервиса поддерживается на всех страницах. Раньше после заполнения заявки пользователь видел такое текстовое сообщение:
А должен видеть интерактивную страницу с понятной инструкцией:
Простота подачи информации как конкурентное преимущество
Банки склонны недооценивать сложность своих продуктов для потребителей и перекладывать ответственность за повышение финансовой грамотности либо на самих потребителей, либо на государство.
Источник: Исследование финансовой доступности CGAP
В любой банковской заявке запрашивается много персональной информации. Создаётся ощущение неравного обмена.
Вот как выглядела страница заявки:
Анкета слабо связана с продуктом и программой. Текст об условиях спрятан. Расчет на то, что человек все это изучил на основном сайте или продуктовом лендинге, и здесь его не стоит отвлекать.
Мы предложили показывать перед анкетой компактное превью, чтобы пользователь удостоверился, что попал на нужную страницу, и мог еще раз проверить ключевые свойства продукта.
Качество интерфейса определяется качеством его самых мелких деталей
Мы встретили две крайности банковских сайтов — статичные устаревшие интерфейсы и «ультрамодные» с обилием анимации
Анкетный сервис требует ввода большого количества сложных данных и нацелен на широкую аудиторию с разным уровнем владения компьютером. Мы проектировали микровзаимодействия, отзывчивый интерфейс, критически рассматривая визуальные эффекты и внешний вид элементов через их функцию.
Важная деталь — визуальное отображение прогресса. Пользователь видит ответ интерфейса на свои действия и чувствует себя увереннее.
Посмотрите как по-разному может выглядеть интерфейс выбора офиса. Было:
Наш вариант:
Даже в банковском интерфейсе важно избегать формального представления информации. Мы постарались приблизить онлайн-анкету к диалогу с сотрудником банка.
В начале работы мы всерьез обсуждали вариант урезать функциональность на мобильных устройствах. И мы, и команда банка сомневались в том, что такие сложные анкеты будут заполнять с телефона. Попробуйте по памяти вписать ИНН работодателя или «кем выдан паспорт (точно как в документе)». Это сомнение подтверждала и статистика.
Но держа в уме возможность продолжать заполнение анкеты в другое время на другом устройстве (ведь наш сервис всё помнит), и вообще изменение парадигмы взаимодействия человека с миром вокруг, решили все же делать полностью адаптивный интерфейс.
Люди сделают всё, лишь бы не вставать с дивана. А мы упростим им жизнь и сделаем интерфейс доступным.
Эти размышления и дизайн-эскизы мы упаковали в презентацию на 120 слайдах.
Реализация
Этап концепции мы начинали ещё до релиза обновленного бренда ВТБ, поэтому приходилось работать практически вслепую. Но мы правильно уловили визуальный стиль и изменения на этапе реализации оказались минимальными: логотип, шрифт, цвета из нового брендбука. Плюс классическая задача — поместить как можно больше в первый экран.
Работа кипела и на стороне бэк-офиса. В итоге мы получали регулярные изменения требований, но, вместе с тем, и новые возможности системы.
Одним из таких изменений стало появление в работе анкетного сервиса промежуточной проверки. После заполнения двух шагов анкеты пользователь видит предварительное решение банка. Если сейчас кредитная история не позволяет запросить новый кредит, сервис об этом сообщит, чтобы не пришлось зря заполнять всю анкету. Или наоборот подбодрит:
Банк подскажет пользователю, что в его случае будет самым подходящим продуктом — кредит наличными, кредитная карта или рефинансирование.
Чтобы можно было изменить условия, не возвращаясь на основной сайт банка, добавили калькулятор на первый шаг каждой анкеты:
Работа над формой анкеты заняла половину времени всего проекта. Мы прорабатывали с командой банка и разработчиками каждое поле — его внешний вид, текстовую формулировку, местоположение в анкете.
Можно ли сгруппировать поля так, чтобы это было удобно пользователю, но не противоречило техническим процессам проверки данных? Вопрос риторический. 😶
И мы и команда банка старались максимально сократить количество запрашиваемой информации без потери эффективности анкеты. Ключевое отличие от конкурентов в том, что после заполнения такой анкеты, пользователь получает персональное предложение. Никаких дополнительных анкет в офисе банка.
Внимание уделили не только полям, но и всем информационным текстам анкет. Вместе с копирайтером, арт-директором и менеджером проекта со стороны банка, прорабатывали смысл и отображение каждой надписи.
Заключение
Если нужен кредит, то вот наличные. Здесь — ипотека. А тут можете рефинансировать… Если серьезно, то это тот случай, когда испытываешь гордость за себя и команду. Когда полгода переставляешь местами поля в макетах, комментируешь UML-диаграммы и общаешься с десятками людей из разных команд, всегда есть соблазн сделать эту работу формально — чтобы уже приняли. Но это не про нас. Спасибо Даше Болховской и Яну Лео, что бились до конца.
Сейчас этим сервисом пользуются миллионы людей. Круто? Да. А еще нам пригодился этот опыт при разработке справочной службы для онкологических пациентов. Там тоже большие, сложные анкеты для людей, которым нужна помощь.
Место для отзыва клиента. Coming soon ☺️
Благодарим команду Департамента цифрового бизнеса ВТБ, работавшую вместе с нами над проектом в 2018 году: управляющего директора департамента Диану Забелину, директора департамента Натэлу Кваташидзе и руководителя проекта Артёма Громова за вложенные в проект силы, оперативность, отзывчивость и приятное общение.💙
И аналитиков Luxsoft Полину Новоселову и Дмитрия Забавина за внимательное отношение к UX и дизайну.
Команда Breadhead
UX-специалист Дарья Болховская, дизайнер Ян Лео, арт-директор и менеджер Денис Ильин.
