Веб-сервис
EdTech
B2C
Редизайн формы оплаты
Задача
Повысить конверсию в успешную оплату за счёт оптимизации пользовательского флоу и редизайна формы оплаты
karpov.courses - онлайн-школа профессий в сфере Data Science с собственной учебной платформой (LMS) и биллингом.
Моя роль в проекте - продуктовый дизайнер LMS и личного кабинета
Моя роль в проекте - продуктовый дизайнер LMS и личного кабинета
О продукте
В работе пришлось учесть несколько важных ограничений и условий:
- доступно: 7 способов оплаты (payment methods) и 2 валюты с переменными параметрами (период рассрочки, скидки/бонусы, дата старта курса)
- параметры зависят от выбранного курса и тарифа
- есть 4 варианта расчёта (payment model): полная оплата, рассрочка, подписка, поблочная оплата
- важно было учесть, что ещё бывают акции-комбо (при покупке курса, другой идет по скидке или в подарок), что тоже нужно учесть в форме
1. Оптимизация флоу оплаты: сделать регистрацию после шага оплаты
2.Редизайн формы оплаты
2.Редизайн формы оплаты
Вначале я изучила имеющиеся данные по воронке и сформулировала выводы:
01
Анализ задачи и текущего флоу
Вызовы
Точки улучшений
02
Анализ конкурентов
Перед редизайном провела анализ прямых и косвенных конкурентов: Яндекс Практикум, Skillbox, SkillFactory, GeekBrains, Нетология, Aviasales, Ситилинк. Зафиксировала, какие решения они использовали для своих сервисов.
Что отметила полезного из этих решений для своей задачи:
Что отметила полезного из этих решений для своей задачи:
- разбивка действий на шаги - актуально для сложных и объёмных форм
- подсветка выгодных/оптимальных параметров внутри формы - помогают найти быстрее подходящий вариант
- горизонтальный вариант формы удобнее, когда она становится более объёмной
Далее я адаптировала форму под все сценарии и продукты:
Для формы с комбо-акциями я выбрала такое решение: визуальное разделение «ИЛИ» (см. макет ниже). Оно чётко подсвечивает пользователю, что он может выбрать только что-то одно + сама система не даст возможности выбрать и тариф, и акцию одновременно. Помимо этого описание форматов покупки (тарифы и акции) можно свернуть для экономии места.
Аргументы в пользу этого решения:
- курсы на подписке
- курсы без тарифов
- курс с поболочной оплатой
- комбинированные акции (далее по тексту комбо-акции)
Для формы с комбо-акциями я выбрала такое решение: визуальное разделение «ИЛИ» (см. макет ниже). Оно чётко подсвечивает пользователю, что он может выбрать только что-то одно + сама система не даст возможности выбрать и тариф, и акцию одновременно. Помимо этого описание форматов покупки (тарифы и акции) можно свернуть для экономии места.
Аргументы в пользу этого решения:
- понятный UI для пользователя
- стоимость разработки
- скорость разработки
- адаптивность (легко убрать после окончания акции)
Состояния формы оплаты
После редизайна веб-версии и согласования формы я адаптировала её под разные разрешения:
Адаптивы
Какие изменения я внесла в форму оплаты в процессе редизайна:
Вертикальный формат➝ горизонтальный формат - удобнее сравнивать параметры в форме и видеть зависимость стоимости от выбранных параметров (тариф, способ оплаты, срок рассрочки)- Форма теперь открывается на отдельной странице, а не в попапе, т.к. изменилась воронка продаж + так мы исключаем отвлекающие факторы
- Добавила хлебные крошки, чтобы показать весь путь пользователю - снимаем страх неизвестности
- Добавила нумерацию для всех шагов - выстариваем последовательность действий, направляем пользователя
- Ярко подсветила покупаемый продукт (под заголовком формы) - человеку важно убедиться в том, за что он собирается платить + снижаем риск ошибки покупки не того тарифа
После
Комбо-акции
Курс без тарифов
Курс с поблочной оплатой
Курс на подписке
До
Редизайн формы оплаты
Совместно со стейкхолдерами обсудили возможность изменения флоу
и приняли решение, что шаг регистрации лучше унести после шага оплаты. Таким образом есть все шансы повысить конверсию в оплату, сократив количество шагов до целевого действия:
Флоу оплаты
Проектирование
03
- Блок с итоговой стоимостью/ежемес. платежом динамически меняется в зависимости от выбранных параметров и всегда перед глазами - не нужно скроллить форму (удобство использования)
- Добавила интерфейсную подсказку по выгодному способу оплаты и для пользователя, и для бизнеса - повышаем шанс конверсии в полную оплату
- Добавила в блок стоимости информацию про полную стоимость курса -даём пользователю полную информацию для принятия решения + так легче понять выгоду
- По дефолту выбранный тариф в форме показываем тот, что пользователь сам выбрал на сайте - поддерживаем бесшовность пути пользователя
Вместо тарифов - краткое описание курса, + добавляется шаг с выбором блоков. Если ни один блок не выбран - CTA неактивен
Вместо тарифов - краткое описание курса
Вместо тарифов - количество дней подписки
Работа над проектом включала в себя анализ текущей воронки продаж и продуктовой аналитики, исследование конкурентов, разработку нового пользовательского флоу и редизайн.
На основе полученных данных я смогла найти проблемные места в текущем дизайне формы оплаты и решить их путем редизайна и оптимизации пользовательского пути.
По прогнозам редизайн должен значительно повысить конверсию, т.к были устранены основные барьеры
На основе полученных данных я смогла найти проблемные места в текущем дизайне формы оплаты и решить их путем редизайна и оптимизации пользовательского пути.
По прогнозам редизайн должен значительно повысить конверсию, т.к были устранены основные барьеры
Результат
