Все работып
2026Product DesignAndroidCase

Кликабельность плитки кэшбека выросла с 12% до 68%

Одна плитка на главном экране, которая показывает потраченный кэшбек, категорию-лидер и остаток лимита. В прототипе клик вырос в 5.6 раз.

Результаты

12% → 68%
кликабельность плитки
A/B прототип, n=14
×5.6
рост interaction rate
78%
тестеров вспомнили лимит категории после недели

Проблема бизнеса

Что было сломано.

Т-Банк даёт 5% кэшбека в 3 категориях/мес, но 62% пользователей не переключают категории и не помнят лимиты. Плитка в текущем виде — иконка + сумма. Данные есть, но невидимы, деньги пользователя горят.

Гипотезы

Что я предположил.

  • H1Прогресс-круг вокруг иконки создаст ощущение «незакрытой задачи» → повысит вовлечённость.
  • H2Expandable-плитка сохранит компактность (не забивая главный экран), но раскроет детали по тапу.
  • H3Micro-animation счётчика при открытии — тактильный сигнал, что цифра «живая», а не статичная.

Ограничения

С чем работал.

  • ·Android Material Design 3 — no iOS-patterns.
  • ·Плитка должна укладываться в существующий grid главного экрана Т-Банка (2×2 max).
  • ·Dark mode обязателен, dynamic color от wallpaper пользователя.

Дизайн-решения

Как я это сделал.

  1. 01

    Плитка в двух состояниях: collapsed (сумма + progress-ring) и expanded (три категории, лимит, дата сброса).

  2. 02

    Progress-ring вокруг иконки — процент от возможного за месяц. ≥ 80% — оранжевый alert.

  3. 03

    Motion: цифра лениво «набирается» с 0 при первом открытии (800ms spring).

  4. 04

    Dynamic color: акцент подбирается от wallpaper (Material You).

Пользовательский сценарий

Линейный flow.

  1. 01
    Главный экран
    плитка кэшбека в grid
  2. 02
    Тап по плитке
    expand-анимация 400ms
  3. 03
    Видит 3 категории + прогресс
    решает что менять
  4. 04
    Тап «Сменить категорию»
    переход в full-view

Что не получилось сразу

Пришлось переделывать.

  • Первая версия expanded-состояния делала tap на весь блок → пользователи промахивались по кнопке «Сменить категорию». Разделил на две зоны: content vs primary-CTA.

Галерея

Ключевые кадры

1 — Collapsed state
2 — Expanded state
3 — Motion-язык

Результат

Итог

Концепт оформлен под открытые заявки Т-дизайн-команды. Хороший пример feature-level UX.

Следующий проект

Родители перестали давать iPad с открытым Кинопоиском

Кинопоиск · детский профиль, iOS + web