Роль UX/UI-дизайна в процессах автоматизации бизнеса на примере оформления ипотеки

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

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

Но многие компании до сих пор сомневаются нужно ли им что-то автоматизировать, если и так всё работает. А если и хотят, то испытывают трудности с их внедрением.

Исследования института UX-исследований Baymard утверждают, что то, как информация преподносится пользователям, имеет такое же значение, как и то, какая именно информация предоставляется.

Поэтому важность UX/UI-дизайна формы заявки и автоматизации её заполнения мы покажем на реальном кейсе «Валера в поисках ипотечной программы». Ведь рано или поздно многие из нас сталкиваются с жизненным кейсом «оформить ипотеку». А разнообразие банков и программ даже немного пугает.

Первое, что мы делаем — подбираем пул банков. Нас интересует четыре параметра:

Изучаем сайты, предложения и получаем следующий список:

Авторизация через Сбер. Привязываем Госуслуги, все документы подтянулись. Прикрепляем скан паспорта — готово, заявка ушла.

Потрачено времени: 17 минут.

Проходит 7 часов.

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

И всё? Вот так просто?

Авторизация по телефону, привязываем Госуслуги. Упс. Техническая ошибка. Без подробностей.

Звоним в техподдержку — всё окей, пробуйте другой браузер.

Ну мы не пальцем деланные, пробуем через Google Chrome, Яндекс, Chromium для Госуслуг, Mozilla Firefox, Opera. Пробуем сбрасывать кэш, режим инкогнито. Пробуем из офиса с нескольких компов.

Отдаём тестировщику. Смотрим консоль — запрос уходит. С Госуслуг возвращается ошибка — у ВТБ накрылась интеграция.

Звоним в техподдержку — у нас всё окей, но мы передали ваш запрос в техподдержку, попробуйте завтра.

Проходит два дня — техническая ошибка.

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

Завершаем мученье.

Авторизация, заполнение форм, прикрепление документов.

Потрачено времени: 26 минут. Ваша заявка ушла.

Прошёл день.

— Валерий, рады сообщить, вам одобрена ипотека на 1 100 000 руб.

Интересная ипотека. До этого гаражи я не рассматривал. Ну да ладно, потрачено минимум сил и времени.

Банк предлагает хорошие условия получения ипотеки.

Заходим на сайт. Никакой авторизации. Подозрительно. Лаааадно.

Есть возможность заполнить заявку онлайн.

На это ушло минут 10.

— Ваша заявка принята, с вами свяжется менеджер.

Проходит день.

— Здравствуйте, Валерий! Вы оставили заявку, у меня несколько вопросов.

— Окей, погнали.

— Год вашего рождения?

— Стоп. Я же заполнял это в заявке?

— Да, но мне нужно подтвердить данные.

— 11.11.1987

— Ваши полные ФИО?

… подтверждаем всё, что в заявке…

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

— Стоп-стоп-стоп, а зачем я заполнял форму, подавал заявку, зачем мы с вами сейчас всё это еще раз проговаривали, если заявка даже не отправлена и мне надо прийти со всеми документами?

— Это всё были предварительные шаги, формальные, теперь будем ждать вас в офисе.

— Всего доброго!

Ручное и бесполезное заполнение формы и «приходите, чтобы подать заявку». Сколько труда разработчиков, операторов колл-центра, ипотечных менеджеров в банке. Сколько вероятностей ошибок, опечаток.

Как у них самая низкая ставка, если должны быть бешеные расходы на персонал и обслуживание этого всего?

Точно да.

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

Существуют исследования, доказывающие, что 18% пользователей отказываются от оформления заказов из-за формы на сайтах, которые казались слишком длинными или сложными (с более чем 10 полями).

Сейчас же форма на сайте громоздкая, демотивирующая заполнение. Надпись «Это просто!» на первом шаге, к сожалению, её не упрощает.

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

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

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

Цветовые сочетания не прошли проверку контрастности по всемирным стандартам WCAG. Некоторые элементы может быть плохо или совсем не видно людям с плохим зрением или со старыми/некачественными мониторами.

Не обошли стороной и технические баги.

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

Мы попробовали заполнить заявку всего 1 раз и что вышло:

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

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

Напоминаем про лень людей и много строк.

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

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

Заметя некоторые минусы имеющейся формы, мы предлагаем некоторые изменения для улучшения сценария оформления заявки:

Или хотя бы — подтверждение номера телефона. Зачем?

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

Зачем?

— Достоверное подтверждение личности

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

— Повышение лояльности потенциальных клиентов

— Кратное увеличение скорости заполнения

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

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

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

Плюсы решения:

— Стало чище и аккуратнее, при том что фирменный стиль сохранён

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

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

— Вторичный цвет текста подобран по стандартам WCAG — а значит форма стала доступной большему числу людей

— Типографика больше не вызывает эффект визуального шума и не становится преградой

Мы рассмотрели конкурентов в сфере предоставления ипотеки. И выделили банк «Левобережный», чей бизнес-процесс можно улучшить благодаря инструментам UX/UI-дизайна и автоматизации заполнения форм заявок.

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