Концепт формы заявки PL
Формулирование задачи
Нужно увеличить кол-во правильно заполненных заявок на кредит на сайте raiffeisen.ru
Для этого нужно проанализировать текущую форму заявки PL (personal loan), сравнив с конкурентами по рынку. Выявить имеющиеся проблемы. Предложить возможное решение этих проблем. Создать интерактивный прототип новой улучшенной формы заявки и протестировать сформулированные гипотезы на релевантных пользователях (клиентах других банков, имеющих опыт получения потребительского кредита).
Банк развивал собственный инструмент для ускорения разработки заявок по различным банковским продуктам — конструктор форм.
Предпроектное исследование
До начала проектировочных работ, был проведён UX-аудит текущей формы заявки на потребительский кредит. Выявленные проблемы были зафиксированы в презентации-отчёте.
Для решения этих проблем, были сформулированы гипотезы, которые нужно было проверить в сессиях пользовательских тестирований.
Гипотезы для проверки
•
Бизнес гипотезы
•
•
Заполняя форму, клиенту важно постоянно видеть доступный ему процент по кредиту
•
Процент отказов будет ниже, если при вводе ФИО выводить специальное предложение по привлекательной кредитной ставке
•
Инвестируя в продуманный интерфейс, банк увеличивает кол-во заявок на кредит и пул лояльных клиентов, так как больше пользователей доходят до конца формы:
•
•
На первом шаге наблюдается отток пользователей при подтверждении номера телефона
•
Всё лишнее на странице, кроме полей формы, отвлекает, снижая скорость заполнения
•
Группировка контента на странице в смысловые блоки снижает когнитивную нагрузку, а значит усталость от заполнения
•
Геймификация мотивирует заполнить форму. Если маркировать пройденные шаги и виртуально награждать за правильное заполнение полей, пользователь будет стремиться закончить начатое
Требования и ограничения
Desktop — приоритет
Система аналитики подключённая к сайту демонстрировала больший трафик с десктопов чем с планшетов или мобильных телефонов. Для того, чтобы быстрее проверить идеи, решено было оптимизировать временные затраты на проектирование/разработку прототипа и сосредоточиться на десктопной версии интерфейса.
Интерактивность — must have
Цель клиента банка — получение заёмных средств. Для этого он, как пользователь интерфейса, должен правильно заполнить все поля формы на сайте. Чтобы понять нюансы этого процесса, все элементы формы, предполагающие взаимодействие с пользователем, должны быть интерактивными. То есть, пользователь должен иметь возможность ввести текст с клавиатуры, выбрать значение в списке, увидеть ошибки при валидации заполнения и т. д.
Ожидаемые свойства прототипа
•
Поля формы реагируют на вводимые данные и валидируются
•
Для перехода с одного шага на другой выполняется условие корректного заполнения обязательных полей
•
Интерфейсные анимации запускаются по событиям
•
Имеется имитация подтверждения по телефону
•
Вывод предодобренного предложения на основе введённых ФИО
Макетирование
Создание визуальной структуры и контента для прототипа производилось в Figma. В редакторе были созданы 5 ключевых страниц формы.
Структура проекта
•
1-ая страница. Ввод регистрационных данных: номер телефона, ФИО, дата рождения
•
2-ая страница. Персональные данные: данные паспорта, место и адрес рождения
•
3-ая страница. Данные о семьи и месте работы
•
4-ая страница. Параметры кредита
•
5-ая страница. Страница благодарности
Анимированный контент
На последней странице формы был добавлен визуальный акцент и дополнительно анимирован процесс отправки формы, чтобы пользователь получил некий виртуальный аналог награды за труды по заполнению полей формы. А также, чтобы он убедился, что форма действительно отправлена.
Элементы для анимациии были созданы в Figma и перенесены в приложение по анимированию Keyshape. Далее готовая анимация была выгружена в файл в формате GIF и вставлена в страницу как изображение.
Прототипирование
Прототип был создан в сервисе UXPin по макемам из Figma. Интерактивность и валидация полей настраивались в визуальном редакторе логики UXPin. Состояния текстовых блоков хранились как значения переменных. По триггеру они могли быть перезаписаны. Переменные позволили создать эффект изменения текста в информационном блоке со ставкой по кредиту при изменении значения селекта формы и при подстановке введённого ранее ФИО в предодобренное предложение в всплывающем окне.
Итоговый прототип после экспорта из UXPin представляет собой архив из: html страниц с разметкой, CSS-файла со стилями оформления, JS-файла с логикой и описанием интерактивных переходов и папкой с графическим контентом.
Шаги формы заявки в прототипе
Заявку можно заполнить последовательно, начиная с первого шага или воспользоваться быстрыми ссылками к определённому шагу. Для этого нужно кликнуть по скриншотам экранов с шагами формы ниже или по ссылке над ними.
Тестирование проводилось в течение 5 дней с интенсивностью две сессии в день. На тестирование приглашались люди, планирующие оформление потребительского кредита в ближайшие три месяца. Аудитория была смешана из клиентов разных банков: Сбер, Тинькофф, Райф и Альфа. Результаты тестирования записывались на диктофон.
Относительно работающей на сайте версии, заявки в прототипе были реализованы две основные фичи: панель шагов справа и область информацией об условиях кредита слева.
Первая гипотеза состояла в том, что пока люди заполняют анкету, они теряют фокус на условиях кредита и вынуждены возвращаться на продуктовую страницу, где описаны эти условия, для уточнения. Вторая гипотеза касалась того, что людям нужно знать, как долго им ещё нужно заполнять анкету, чтобы увеличить мотивацию дойти до конца заявки.
Оба нововведения встретили положительный отзыв у тестируемых. Они отмечали, что новая версия гораздо удобнее текущей.