Унификация оплаты счетов в Альфа-банк между веб и мобайл
Унификация оплаты счетов в Альфа-банк между веб и мобайл
Альфа-Банк — один из крупнейших банков в РФ. Бизнес хотел упростить переход клиентов с веб-версии в мобильное приложение и снизить стоимость разработки через единый клиентский опыт.
Моей задачей стало унифицировать оплату счетов между платформами используя только существующие паттерны и компоненты.
Альфа-Банк — один из крупнейших банков в РФ. Бизнес хотел упростить переход клиентов с веб-версии в мобильное приложение и снизить стоимость разработки через единый клиентский опыт.
Моей задачей стало унифицировать оплату счетов между платформами используя только существующие паттерны и компоненты.
Команда
Продакт
Аналитик
Дизайнер
UX-рисерчер
Продакт
Аналитик
Дизайнер
UX-рисерчер
Исследования
Интервью
Анализ рынка
UX-тесты
Интервью
Анализ рынка
UX-тесты
Моя роль
Дизайн
Прототипы
Поддержка
Дизайн
Прототипы
Поддержка
Результат
Результат
Мне удалось упростить оплату счетов, опираясь на реальные сценарии пользователей. Гипотеза подтвердилась в A/B-тесте: конверсия в оплату выросла кратно.
Затем я унифицировал решение между вебом и приложением, обеспечив единый клиентский опыт.
Мне удалось упростить оплату счетов, опираясь на реальные сценарии пользователей. Гипотеза подтвердилась в A/B-тесте: конверсия в оплату выросла кратно.
Затем я унифицировал решение между вебом и приложением, обеспечив единый клиентский опыт.
Мне удалось упростить оплату счетов, опираясь на реальные сценарии пользователей. Гипотеза подтвердилась в A/B-тесте: конверсия в оплату выросла кратно.
Затем я унифицировал решение между вебом и приложением, обеспечив единый клиентский опыт.
Процесс
Процесс
Я начал с анализа обеих платформ, чтобы определить подход к унификации. Сравнил существующие решения, выявил их плюсы и минусы на каждой платформе. Стало понятно, что просто переиспользовать решение одной платформы на другой не получится, т.к. однозначного победителя не было.
Затем проанализировал поведение пользователей и понял, что интерфейсы переусложнены и не соответствуют реальным сценариям оплаты. Раздел плохо решал основную задачу — быстро обнаружить и оплатить счета.
Я начал с анализа обеих платформ, чтобы определить подход к унификации. Сравнил существующие решения, выявил их плюсы и минусы на каждой платформе. Стало понятно, что просто переиспользовать решение одной платформы на другой не получится, т.к. однозначного победителя не было.
Затем проанализировал поведение пользователей и понял, что интерфейсы переусложнены и не соответствуют реальным сценариям оплаты. Раздел плохо решал основную задачу — быстро обнаружить и оплатить счета.
Я начал с анализа обеих платформ, чтобы определить подход к унификации. Сравнил существующие решения, выявил их плюсы и минусы на каждой платформе. Стало понятно, что просто переиспользовать решение одной платформы на другой не получится, т.к. однозначного победителя не было.
Затем проанализировал поведение пользователей и понял, что интерфейсы переусложнены и не соответствуют реальным сценариям оплаты. Раздел плохо решал основную задачу — быстро обнаружить и оплатить счета.
Что сделал
Что сделал
Что сделал
UX аудит
UX аудит
UX аудит
Анализ исследований, аналитика
Анализ исследований, аналитика
Анализ исследований, аналитика
job stories, IA
job stories, IA
job stories, IA
анализ конкурентов
анализ конкурентов
анализ конкурентов
production-ready дизайн для iOS и Android
production-ready дизайн для iOS и Android
production-ready дизайн для iOS и Android
прототипы для тестов
прототипы для тестов
консультации разработки и контроль качества
консультации разработки и контроль качества
консультации разработки и контроль качества
Когда у меня есть счета с разными сроками оплаты, я хочу видеть их срочность в одном месте, чтобы не пропустить срок и не переплачивать.
Инсайт
Когда у меня есть счета с разными сроками оплаты, я хочу видеть их срочность в одном месте, чтобы не пропустить срок и не переплачивать.
Инсайт
Инсайт
Когда у меня нет счетов, я хочу понимать, ожидать ли их в будущем, чтобы не пропустить новые счета.
Инсайт
Когда у меня нет счетов, я хочу понимать, ожидать ли их в будущем, чтобы не пропустить новые счета.
Среднее количество неоплаченных счетов у пользователя в момент входа в раздел «Платежи и переводы»
Инсайт
Среднее количество неоплаченных счетов у пользователя в момент входа в раздел «Платежи и переводы»
Инсайт
Решения
Решения
Обе платформы группировали счета: по подпискам на мобилке и по категориям — в вебе. Это создавало проблемы сразу в нескольких направлениях.
Обе платформы группировали счета: по подпискам на мобилке и по категориям — в вебе. Это создавало проблемы сразу в нескольких направлениях.
Обе платформы группировали счета: по подпискам на мобилке и по категориям — в вебе. Это создавало проблемы сразу в нескольких направлениях.
Обнаружение новых счетов
Обнаружение новых счетов
Обнаружение новых счетов
Подписки и категории без счетов отвлекали внимание от уже выставленных счетов, снижая их заметность.
Подписки и категории без счетов отвлекали внимание от уже выставленных счетов, снижая их заметность.
Выставленные счета были разобщены или спрятаны внутри категорий, что усложняло оценку срочности их оплаты.
Выставленные счета были разобщены или спрятаны внутри категорий, что усложняло оценку срочности их оплаты.
Учитывая, что на юзера со счетами приходится в среднем 3 счета, я предложил убрать группировку. Это позволило сфокусировать внимание пользователя только на том, что требует его внимания прямо сейчас:
Учитывая, что на юзера со счетами приходится в среднем 3 счета, я предложил убрать группировку. Это позволило сфокусировать внимание пользователя только на том, что требует его внимания прямо сейчас:
Учитывая, что на юзера со счетами приходится в среднем 3 счета, я предложил убрать группировку. Это позволило сфокусировать внимание пользователя только на том, что требует его внимания прямо сейчас:
быстро заметить все выставленные. счета
быстро заметить все выставленные. счета
приоритизировать счета по срочности оплаты.
приоритизировать счета по срочности оплаты.
До
После
До
После
До
После
До
После
Ключевая проблема
Виджет со счетами
Виджет со счетами
Виджет — первая точка контакта со счетами. Понимание, есть ли счета и требуется ли действие, напрямую влияет на вероятность оплаты.
Вышеперечисленные проблемы касались и виджета, так как его логика прямо отражает структуру раздела со счетами.
Виджет — первая точка контакта со счетами. Понимание, есть ли счета и требуется ли действие, напрямую влияет на вероятность оплаты.
Вышеперечисленные проблемы касались и виджета, так как его логика прямо отражает структуру раздела со счетами.
Виджет — первая точка контакта со счетами. Понимание, есть ли счета и требуется ли действие, напрямую влияет на вероятность оплаты.
Вышеперечисленные проблемы касались и виджета, так как его логика прямо отражает структуру раздела со счетами.
Дополнительно:
Дополнительно:
Дополнительно:
В мобилке не было сумм, а лицевые счета были неинформативны.
В мобилке не было сумм, а лицевые счета были неинформативны.
В вебе не было логотипов, что снижало заметность счетов.
В вебе не было логотипов, что снижало заметность счетов.
Показ только выставленных счетов фокусировал внимание юзера на действиях, а логотипы поставщиков и суммы быстрее считываются, как платеж.
Показ только выставленных счетов фокусировал внимание юзера на действиях, а логотипы поставщиков и суммы быстрее считываются, как платеж.
До
После
До
После
До
После
До
После
Ключевая проблема
Путь к оплате
Путь к оплате
для оплаты счета требовалось обязательно пройти через экран подписки или категории. Это не несло ценности для пользователя и только удлиняло его путь к оплате.
для оплаты счета требовалось обязательно пройти через экран подписки или категории. Это не несло ценности для пользователя и только удлиняло его путь к оплате.
без группировки пользователь может перейти к оплате счета в одно касание. Чем короче флоу оплаты, тем вероятнее, что счет будет оплачен.
без группировки пользователь может перейти к оплате счета в одно касание. Чем короче флоу оплаты, тем вероятнее, что счет будет оплачен.
До
После
До
После
До
После
До
После
Ключевая проблема
А если счетов нет?
А если счетов нет?
Даже если сейчас счетов нет, пользователям важно знать, что они отслеживаются. Это создает уверенность и доверие к банку.
Даже если сейчас счетов нет, пользователям важно знать, что они отслеживаются. Это создает уверенность и доверие к банку.
Даже если сейчас счетов нет, пользователям важно знать, что они отслеживаются. Это создает уверенность и доверие к банку.
Во время UX-теста мобильного приложения респонденты не могли уверенно сказать, что счетов нет. Разница состояний плохо считывалась, а это одинаково плохо для любого юзкейса.
Во время UX-теста мобильного приложения респонденты не могли уверенно сказать, что счетов нет. Разница состояний плохо считывалась, а это одинаково плохо для любого юзкейса.
Я сделал состояние «Счетов нет» явным и однозначным. Оно чётко отличается от состояния с активными счетами и считывается мгновенно, без необходимости разбираться в интерфейсе.
Я сделал состояние «Счетов нет» явным и однозначным. Оно чётко отличается от состояния с активными счетами и считывается мгновенно, без необходимости разбираться в интерфейсе.
До
После
До
После
До
После
До
После
До
После
До
После
До
После
До
После
Отзывы коллег из Альфы
Отзывы коллег из Альфы
Работал со Славой над функционалом платежей: автоматические платежи, шаблоны и подписки для получения выставленных счетов. Слава проявил ответственное отношение к работе и высокое качество выполнения, провёл тщательный анализ конкурентов и предложил оптимальные решения. Проект был успешно завершён в срок.
PO в Альфа-Банк
Работал со Славой над функционалом платежей: автоматические платежи, шаблоны и подписки для получения выставленных счетов. Слава проявил ответственное отношение к работе и высокое качество выполнения, провёл тщательный анализ конкурентов и предложил оптимальные решения. Проект был успешно завершён в срок.
PO в Альфа-Банк
Слава — самый опытный и выдающийся дизайнер, с которым мне доводилось работать. Он не просто создаёт потрясающий UI, он буквально делает кристально ясный продукт прямо из твоей головы. Его работа над персональным финансовым ассистентом для клиентов банка превзошла наши ожидания по качеству и срокам!
CPO в Альфа-Банк
Слава — самый опытный и выдающийся дизайнер, с которым мне доводилось работать. Он не просто создаёт потрясающий UI, он буквально делает кристально ясный продукт прямо из твоей головы. Его работа над персональным финансовым ассистентом для клиентов банка превзошла наши ожидания по качеству и срокам!
CPO в Альфа-Банк
