Контекст
Когда покупаешь подержанную машину, телефон или услугу у незнакомого человека, кто-то должен довериться первым. Безопасная сделка снимает эту проблему: банк держит деньги покупателя, пока сделка не завершится
До мая 2026 года продукта не существовало. Это одна из крупнейших инициатив кластера, заданная высшим руководством, и три продуктовые команды добавляли в неё свои типы сделок. Первая версия вышла в сентябре 2026 года
Моя часть
Каждый продуктовый дизайнер отвечал за сценарии сделок своего продукта. На мне был общий слой вокруг них:
- точки входа: как люди находят Безопасную сделку в приложении — через поиск и каталог сервисов;
- онбординг для тех, у кого ещё нет сделок;
- выбор типа сделки: товары, услуги, авто или недвижимость;
- реестр сделок, его карточка и модель состояний;
- состояния недоступности сервиса — с известным и неизвестным временем восстановления
Всё из моей зоны ответственности вошло в первый релиз. Из MVP ничего не вырезали
Задача реестра
Работа над реестром началась с вопросов: кто будет пользоваться первой версией, сколько у них будет сделок и с какой стороны? Я ходила на встречи с бизнесом и исследователями, чтобы понять, для кого мы запускаем продукт. Ответы и стали требованиями:
- Один человек может быть одновременно покупателем и продавцом
- Сделки с обеих сторон проходят четыре стадии: заявки, активные, приостановленные, закрытые
- У продавца могут быть десятки почти одинаковых сделок, например 100 одинаковых товаров
Реестр должен был показать всё это компактно, дать с одного взгляда узнать конкретную сделку и её статус и не превратиться в бесконечную ленту
Ограничения
- Новая архитектура. Безопасная сделка — первый продукт в мобильном приложении Сбера, полностью собранный на веб-виджетах, которые обновляются независимо от релизов приложения, и при этом не выбивающийся из лаконичности дизайн-системы. До этого на такой архитектуре никто ничего не выпускал, поэтому каждое решение в интерфейсе приходилось проверять с фронтендом
- Ревью дизайн-системы. Каждое направление проходило через команду дизайн-системы
- Данные из трёх продуктов. Карточка в реестре показывает данные со страниц сделок, за которые отвечают другие дизайнеры, поэтому нужно было договориться, что бэкенд передаёт в общую карточку
Поиск структуры
Я начала с четырёх вариантов структуры реестра, а когда прояснились ограничения виджетов, добавила новые. Каждый раунд проходил по кругу: бизнес → разработка → бизнес → ревью дизайн-системы
Вкладки в шапке проиграли ограничению платформы. Карточка сделки уже была кастомизацией виджета дизайн-системы, а в среде Web Widgets допускается только одна фронтовая кастомизация: вторую, для вкладок, было бы невозможно поддерживать на бэкенде. Поэтому я перенесла роли покупателя и продавца внутрь виджета каждой стадии, и человек, который и покупает, и продаёт, видит все свои сделки одним списком
Карточка сделки
Сначала я исследовала карточку свободно, без ограничений дизайн-системы. Потом сознательно пошла в обратную сторону и собрала её на готовом виджете дизайн-системы, изначально сделанном для продажи товаров. Собственная карточка обошлась бы дороже в разработке и поддержке в мире независимо обновляемых виджетов
В этом виджете не было модели статусов, поэтому я её добавила и проверила с фронтендом, что HTML и CSS можно адаптировать, не сломав базовый компонент
Что показывает карточка
Атрибуты я выбирала сама под сценарий, когда похожих сделок много, а затем показывала их бизнесу и исследователям и аргументировала, почему такой набор сработает лучше всего:
- Заголовок зависит от категории. Товары: название товара. Услуги: описание, причём при создании сделки интерфейс подсказывает сделать первые два-три слова различимыми. Авто: сначала госномер, потом модель
- Цена справа в первой строке
- Контрагент: номер телефона, имя и первая буква фамилии
- Статус с цветовой кодировкой и иконка категории
Ещё я договорилась с другими продуктовыми дизайнерами, какие данные и статусы передаются из их страниц сделок в общую карточку, чтобы сделку можно было узнать и понять прямо из списка
До первой сделки
У человека, который впервые открывает Безопасную сделку, сделок нет. Вместо пустого реестра он видит онбординг: что такое Безопасная сделка, как она защищает деньги, что это бесплатно и как всё работает. Содержание я выбирала вместе с командой маркетинга, отбирая то, что важнее всего новому пользователю
Оттуда кнопка создания сделки ведёт к выбору типа сделки, а он передаёт пользователя в сценарий нужного продукта
Результат
Продукт запустился несколько дней назад, поэтому данных об использовании, которые стоит показывать, пока нет. Я буду отслеживать входы в продукт, переход от онбординга к первой сделке и количество созданных сделок