Проектирование главного финансового экрана
О проекте
РОЛЛАУТ — некоммерческая open source платформа: бесплатные дизайн-библиотеки на базе shadcn для запуска e-com и финтех-продуктов. С декабря 2025 по март 2026 я работала в модуле финансового кабинета (PFM).
Для кого. Клиент платформы — любой бизнес, который хочет принимать платежи онлайн, от булочной до телемедицины. Конечный пользователь — его клиенты, которые смотрят свои счета и карты в личном кабинете.
Проблема. Счетов у бизнесов очень разное количество: у булочной один бонусный, у финсервиса десяток в разных валютах. Один шаблон всем не подходит: карусель из 10 счетов не читается, а список из одного выглядит пусто.
Задача
Спроектировать блок счетов, который подойдёт любому бизнесу, и собрать на нём главную финансового кабинета.
Исследование
Разобрала банковские приложения России, СНГ и Европы: Сбер, Т-Банк, Альфа, Revolut, Kaspi и другие. Выделила четыре паттерна:
- Карусель для быстрого переключения, как в Сбере.
- Список для обзора всех счетов, как в Т-Банке.
- Акцент + скрытое: один главный счёт, остальные свёрнуты, как в Revolut и Альфе.
- Стопка карт в духе кошелька, как в Яндекс Пэй.
Когда какой вариант
| Сценарий | Вариант | Почему |
|---|---|---|
| 1–2 счёта: бонусы, кешбэк | Акцент + скрытое | главный счёт на виду, остальное не шумит |
| 1–2 счёта или карты, кошелёк, лояльность | Стопка карт | эмоционально, как физический кошелёк |
| 3–5 счетов, частое переключение | Карусель | быстро листать, мало места по высоте |
| Много счетов или валют, нужен обзор | Список | всё видно сразу, легко сравнить |
Как собирала
Базовые компоненты брала из shadcn и собирала из них организмы: карты, карточки счетов, списки и виджеты главной. shadcn — веб-библиотека, поэтому из неё бралась основа и логика компонентов, а мобильные блоки я собирала поверх.
Для главной взяла наработки ребят из соседних команд (лояльность, история операций, переводы) и адаптировала их под виджеты.
Результат
- Компоненты счетов в 4 вариантах вошли в открытую библиотеку модуля PFM.
- На их основе собрана главная финансового кабинета.
- Библиотеки открыты и бесплатны: посмотреть в Figma.