Product designer
Витрина продуктов & калькулятор тарифов
✅Перестроили витрину эквайринга, избавившись от перегруженной вертикальной структуры
✅Чётко разделили продукты, тарифы, сервисы и технологии по типам и сценариям
✅Внедрили калькулятор тарифов для быстрого выбора подходящего варианта
✅Сохранили полноту информации даже в мобильной адаптации
✅Чётко разделили продукты, тарифы, сервисы и технологии по типам и сценариям
✅Внедрили калькулятор тарифов для быстрого выбора подходящего варианта
✅Сохранили полноту информации даже в мобильной адаптации
Страница подключения эквайринга со временем разрослась: сюда стекались тарифы, сервисы, акции, технологии (SOFT-pos, СБП, Касса 54-ФЗ, Интернет-эквайринг и др.). Структура превратилась в длинный, перегруженный список, который сбивал с толку даже опытных пользователей.
Клиенты не понимали, что именно им нужно подключить, как выбрать тариф, чем отличаются продукты и какие задачи решает тот или иной сервис.
Клиенты не понимали, что именно им нужно подключить, как выбрать тариф, чем отличаются продукты и какие задачи решает тот или иной сервис.
Контекст:
Боли Пользователей
Адаптив не решает, а мешает
«На мобильном всё превращается в бесконечный список — теряюсь ещё больше»
Нет способа сравнить тарифы
«Хочу сразу понять, сколько это будет стоить и что мне подходит»
Непонятно, что подключать
«Какой продукт соответствует 54-ФЗ? Мне нужен эквайринг для интернет-магазина или офлайн точки?»
Витрина перегружена
«Где здесь тарифы для торгового эквайринга? Что за SOFT-pos и зачем мне это?»
Задачи, цели & OKR
🧠🗂️🧩
🚀🔗📈
📊⚖️💡
📞📉🔽
📱🖥️📐
Разделить витрину на логические блоки по типам продуктов
Повысить конверсии на подключение продуктов
Внедрить калькулятор тарифов с удобным сравнением
Снизить количество обращений с вопросами про тарифы и продукты
Оптимизировать витрину под mobile/tablet/desktop
Процесс решения
🧪 UX Research & Validation
Протестировали несколько концепций витрины и калькулятора — выбрали плиточную структуру с фильтрами
Получили подтверждение: визуальная подача снижает тревожность, повышает интерес и вовлечённость
2 этап
🧭 Product Discovery
Совместно с PO проанализировали существующую структуру страницы
Выявили причины основных сценария отказов пользователей
Сравнили витрины конкурентов и лучшие практики e‑commerce
1 этап
🚚 Delivery & Iteration
Проверила реализацию на девстенде: анимации, расчёт, состояния
Подготовила бэклог улучшений:
- управление подключёнными сервисами через тогглы,
- персональные рекомендации,
- добавить несколько популярных оферт.
4 этап
🧠 Design & Handoff & Review
Разработала структуру витрины: продукты, тарифы, сервисы — в отдельных логических блоках
3 этап
Создала калькулятор тарифов с фильтрацией и сравнением по ключевым параметрам
Проводила дизайн-ревью на девстендах совместно с QA проверяла логику, адаптивность и визуальную точность реализации
Сопровождала реализацию: участвовала в синках, прорабатывала поведение и сценарии вместе с фронтендом
Подготовила дизайн-спеки и передала через Figma с документацией
Обеспечила сохранение полноты функционала в мобильной версии
User Story
Как пользователь, я могу подобрать подходящий продукт и тариф через удобную витрину и калькулятор, чтобы подключить эквайринг под задачи моего бизнеса.
JTBD:
«Когда я выбираю эквайринг, я хочу быстро понять, какой продукт мне подходит, сколько он будет стоить и как его подключить — без лишнего поиска и путаницы.»
Пользователь задаёт ключевые параметры (регион, сфера, оборот, количество терминалов) через списки и ползунки. Переключатели для дополнительных сервисов позволяют учитывать опции без перегрузки экрана. Расчёт обновляется в реальном времени, формируя персонализированное предложение.
Экран построен на якорении внимания: визуальный триггер фиксирует новое значение ставки, а короткий эмоциональный всплеск усиливает мотивацию, закрепляет чувство контроля и успеха.
При переходе из калькулятора тарифов все введённые данные автоматически подставляются в форму оферты, что сохраняет контекст, снижает нагрузку и ускоряет оформление заявки.
Пользователю не нужно заполнять данные повторно — сценарий остаётся цельным и последовательным.
Пользователю не нужно заполнять данные повторно — сценарий остаётся цельным и последовательным.
Экран витрины эквайринговых продуктов построен на карточном формате с чёткой визуальной иерархией и логическим разделением по типам решений.
Короткие описания, акцентные иллюстрации и выделенные CTA помогают быстро ориентироваться, понимать назначение каждого продукта и сравнивать варианты без лишних переходов.
Короткие описания, акцентные иллюстрации и выделенные CTA помогают быстро ориентироваться, понимать назначение каждого продукта и сравнивать варианты без лишних переходов.
Результаты
🚧
🚧
🚧
🚧
Work in progress
Этот кейс в процессе реализации — скоро здесь появится результаты. Следите за апдейтами, будет интересно 👀
Work in progress
Этот кейс в процессе реализации — скоро здесь появится результаты.
Следите за апдейтами, будет интересно 👀
Следите за апдейтами, будет интересно 👀
Work in progress
Этот кейс в процессе реализации — скоро здесь появится результаты. Следите за апдейтами, будет интересно 👀
Work in progress
Этот кейс в процессе реализации — скоро здесь появится результаты. Следите за апдейтами, будет интересно 👀
