Уралсиб Бонус
Mobile APP · Product Design
Выбрать и передать подарок
Найти подходящий бренд, определить номинал и количество, оплатить заказ и отправить сертификат получателю.
00:00
Mar 29, 2026
Спроектировала путь от выбора подарка до отправки сертификата внутри ВТБ Онлайн
Я проектировала сервис подарочных сертификатов для мобильного приложения и интернет-банка: от каталога брендов и оплаты до получения и отправки подарка. Зимой 2026 года мы запустили его на всех платформах ВТБ Онлайн: iOS, Android и Web.
Category:
Mobile APP & WEB
/* Problem */
Для покупки подарка нужно было выходить из банка
В исходном сценарии не было единого сервиса внутри ВТБ Онлайн. Клиент искал площадку поставщика и оформлял покупку вне привычного банковского приложения.
Задача команды — запустить услугу в разделе «Сервисы». Моя задача — связать выбор бренда, параметры заказа, оплату и отправку так, чтобы путь не заканчивался на списании денег.
Как помочь клиенту не только купить сертификат, но и понять, где его получить и как передать другому человеку?
/* Task framing */
Разложила услугу на задачи клиента и логику сервиса
В одном пути нужно было совместить выбор подарка, банковскую оплату и работу с уже купленным сертификатом. Для мобильного приложения и веба эта логика должна оставаться одинаково понятной.
Добавить услугу внутри ВТБ Онлайн
Дать клиенту возможность совершить покупку в банке, без отдельного перехода на площадку поставщика.
Разделить оплату и получение
Успешная оплата и появление сертификата — разные состояния. Интерфейс должен объяснять ожидание и следующее действие.
Сохранить непрерывность пути
Связать каталог, заказ, историю, детали и поддержку, не оставляя клиента один на один с экраном «Оплачено».
/* Research questions */
Какие вопросы были важны для проектирования
При проектировании я держала в фокусе четыре вопроса: как человек выбирает сертификат, какой бренд ищет, кому покупает подарок и какие пояснения нужны в пути. Они помогали связывать отдельные экраны в единый сценарий.
Центральный вопрос
Что нужно человеку, чтобы подарок дошёл до получателя?
Приходит за брендом или за идеей?
От этого зависит роль поиска и каталога. В макетах предусмотрены оба способа начать покупку.
Какие поставщики нужны?
Какие бренды клиент ищет целенаправленно, а какие готов рассматривать как альтернативу? Эти данные помогут определить состав каталога.
Покупает себе или в подарок?
В деталях есть «Поделиться». Важно проверить, находит ли человек это действие и понимает ли, что именно отправляет.
Достаточно ли подсказок в пути?
Промо объясняет механику, экран оплаты — ожидание выпуска. Необходимость отдельного онбординга остаётся вопросом для проверки.
/* Evidence */
Что я учла за пределами самой покупки
Я проработала не только оформление заказа, но и ожидание выпуска, возврат к сертификату и отправку подарка. На карте пути связала эти шаги, а в макетах показала переходы и состояния.
- платформы сервиса
- 3
- темы веб-интерфейса: светлая и тёмная
- 2
Это объём проектирования, не продуктовые показатели после запуска.
Ключевое наблюдение
Покупка сертификата — не одно действие. После оплаты человеку ещё нужно дождаться выпуска, найти подарок и передать его. Поэтому история и детали стали частью основного сценария.
/* Hypotheses */
Какую пользу должны дать решения
В решениях я опиралась на четыре предположения о том, что поможет клиенту пройти путь. Ниже объясняю ожидаемую пользу каждого решения, не выдавая её за измеренный эффект.
Поиск и каталог поддержат разные способы выбора
Если клиент знает бренд, он может найти его по названию. Если ещё выбирает — просмотреть предложения на том же экране.
Параметры до оплаты помогут избежать неожиданностей
Если номинал, количество, счёт и сумма видны до подтверждения, клиенту будет проще проверить заказ и заметить ошибку.
Объяснение выпуска снизит неопределённость после оплаты
Если экран сообщает, что сертификат обычно появляется через несколько минут, и показывает переход к нему, клиент понимает, что делать дальше.
История и «Поделиться» помогут вернуться к покупке
Если готовый сертификат можно найти по периоду и открыть его детали, отправку не обязательно завершать сразу после оплаты.
/* Validation plan */
Что я бы проверила для следующей версии
Для MVP 2.0 я бы сфокусировалась на трёх задачах: найти подходящий подарок, проверить заказ и получить сертификат после оплаты. Ниже — вопросы для дальнейшей проверки, а не отчёт о прошедших тестах.
Найти подарок
Задать две ситуации: купить сертификат определённого бренда и выбрать подарок без заранее известного бренда.
Наблюдать, где человек начинает поиск, находит ли нужное предложение и нужна ли помощь. Проверяет H01.
Проверить параметры
Попросить оформить несколько сертификатов заданного номинала и перед оплатой назвать состав заказа и счёт списания.
Фиксировать ошибки в количестве, номинале и понимании суммы, а не только факт нажатия кнопки. Проверяет H02.
Получить и отправить
После экрана «Оплачено» спросить, готов ли сертификат, где его искать и как отправить позже.
Проверить понимание ожидания, поиск покупки в истории и обнаружение «Поделиться». Само открытие меню не доказывает доставку подарка. Проверяет H03 и H04.
/* Competitor review · Framework */
Что я бы сравнила с другими способами покупки
Для развития сервиса я бы сравнила весь путь покупки: от поиска бренда до возврата к готовому подарку. Мне важно понять, какие решения упрощают этот путь, а не только отличаются визуально.
Как находят нужный бренд?
Сопоставить поиск по названию, просмотр каталога, доступность номиналов и момент раскрытия условий.
Когда понятен состав покупки?
Сравнить выбор количества, счёта и суммы, возврат к редактированию и информацию перед подтверждением.
Что происходит после списания?
Проверить, различаются ли оплата и выпуск, как объясняется ожидание и куда ведёт следующий шаг.
Можно ли вернуться к подарку?
Сравнить историю, срок действия, отправку, чек и доступ к поддержке в контексте конкретной покупки.
/* Product scope */
Связала покупку и действия с готовым сертификатом
В решение вошли два связанных контура. Первый помогает оформить заказ, второй — получить, найти и отправить подарок.
Оформить понятный заказ
Каталог, поиск, номинал, количество, счёт списания, сумма и правила покупки.
Клиент собирает заказ и проверяет параметры перед подтверждением.
Довести покупку до подарка
Ожидание выпуска, «Мои сертификаты», фильтр периода, детали, чек, отправка и поддержка.
Купленный сертификат остаётся доступен при следующем визите.
От пользовательского пути до интерфейса
Моя зона ответственности — сценарии, прототипы и макеты для мобильного приложения и интернет-банка. Работа с аналитиками и разработкой связывала требования, переходы и состояния сервиса.
Каждое решение поддерживает следующий шаг
Поиск ведёт к бренду, параметры — к оплате, подтверждение — к ожиданию выпуска, история — к деталям и отправке.
/* User flow */
Собрала сквозной путь и возврат к уже купленному подарку
Основная последовательность объединяет семь этапов. При повторном визите клиенту не нужно заново проходить каталог: он может перейти к своим сертификатам.
- 01 · Вход
Сервисы
Открыть подарочные сертификаты в ВТБ Онлайн.
- 02 · Выбор
Каталог или поиск
Найти бренд по названию или просмотреть предложения.
- 03 · Заказ
Параметры
Выбрать номинал, количество и счёт. Проверить сумму.
- 04 · Оплата
Подтверждение
Оплатить заказ и увидеть результат операции.
- 05 · Ожидание
Выпуск
Узнать, что сертификат обычно появляется через несколько минут.
- 06 · Получение
Мои сертификаты
Найти покупку в истории, при необходимости задать период.
- 07 · Подарок
Детали и отправка
Открыть сертификат, поделиться им, получить чек или помощь.
Бренд известенПоиск → предложение → параметры заказа.
Подарок уже купленМои сертификаты → период → детали → отправка.
После оплаты нужен ответЭкран результата → информация о выпуске, чеки или поддержка.
/* Discoverability */
Дала два способа найти подарок на одном экране
Я объединила каталог брендов и поиск по названию магазина, чтобы поддержать два способа выбора. В промо рядом объяснила базовую механику: выбрать номинал, оплатить и отправить.
Так интерфейс поддерживает и конкретное намерение, и ситуацию, когда человек ещё выбирает подарок.
/* Core scenario */
Собрала параметры до оплаты и объяснила ожидание после неё
На экране заказа я собрала бренд, счёт с балансом, номинал, количество, сумму и правила покупки. Выбор номинала вынесла в нижнюю панель, чтобы сохранить контекст.
На экране «Оплачено» я объяснила, что сертификат обычно появляется в «Моих сертификатах» через несколько минут. Добавила переход к сертификатам, чеки и чат поддержки: успешная оплата не означает, что подарок уже выпущен.
/* After purchase */
Подарок остаётся доступен и после завершения покупки
В «Моих сертификатах» я сгруппировала покупки по месяцам и добавила фильтр с календарём и полями дат, чтобы к нужному периоду можно было вернуться позже.
В деталях я собрала сумму, количество, срок действия и счёт покупки. Действия «Поделиться», «Чеки» и «Поддержка» привязала к конкретному сертификату, чтобы клиент не искал их в других разделах.
/* Cross-platform */
Сохранила логику сервиса в мобильном и веб-банке
Для интернет-банка я сохранила те же ключевые действия: каталог, поиск, параметры покупки, оплату, историю и детали. При этом адаптировала экраны к навигации и пространству веб-интерфейса.
Я подготовила светлую и тёмную темы веба, сохранив общую логику статусов и порядок действий при смене платформы и темы.
/* Outcome */
Что мы запустили и что я спроектировала
Зимой 2026 года мы запустили сервис на всех платформах ВТБ Онлайн: iOS, Android и Web. Я спроектировала сквозной путь от выбора бренда до получения и отправки сертификата.
Связала весь путь
Точки входа, каталог, параметры, оплата, получение и отправка собраны в единую последовательность.
Разделила статусы
Экран результата объясняет разницу между успешной оплатой и появлением сертификата.
Проработала возврат к покупке
История, период, детали, чек, отправка и поддержка помогают продолжить сценарий позже.
Подготовила три платформы
Мобильные и веб-макеты сохраняют общую логику сервиса; для веба показаны две темы.
/* Measurement plan */
На что я бы смотрела после запуска
Для дальнейшего развития я бы оценивала не только оплату, но и получение сертификата и понятность следующего шага. Ниже — план оценки; фактические значения после запуска я здесь не привожу.
Завершение покупки
Доля уникальных оформлений, которые завершились успешной оплатой. Повторное нажатие кнопки не должно считаться новой попыткой.
Оплаченные оформления / начатые оформления × 100%
События интерфейса сопоставляются со статусом оплаты по заказу. Разрезы по платформе и шагам покажут, где искать потери; рост не должен достигаться ценой ошибок оплаты.
Получение после оплаты
Доля уникальных оплаченных заказов, по которым выпущены все сертификаты. Проверять после окончания согласованного с командой окна выпуска.
Полностью выпущенные заказы / оплаченные заказы × 100%
Источник — статусы оплаты и выпуска. Дополнительно смотреть время от оплаты до полного выпуска и обращения об оплаченных, но неполученных заказах.
Понятность следующего шага
В сценарном тесте проверить, может ли человек без подсказки найти купленный сертификат и начать его отправку, а после оплаты — объяснить, когда он появится.
В аналитике открытие «Поделиться» служит только сигналом намерения. Оно не равно доставке или использованию подарка получателем.
Для первого сравнения нужны единое окно наблюдения, исключение тестовых заказов и раздельный анализ мобильного приложения и веба. Базу и цели следует согласовать с продуктовой командой.
/* Takeaway */
