Одна продуктовая система для множества брендов. Поддержка проекта, обновление, дополнение флоу и дизайн-системы. Работа с разработкой и бизнес-аналитиком для проработки сценариев.
Роль
Product / UI/UX Designer
Зона ответственности
Аудит и пересборка дизайн-системы, визуальная логика white label тем, UI-дизайн продуктовых фичей, состояния, подготовка макетов к разработке и сопровождение реализации
Год / рынок / этап
2025 / Международный / Продуктовая разработка
White Label Fintech Product
White label платформа должна сохранять единый пользовательский опыт независимо от того,
под каким брендом она запускается.
В основе решения — разделение продуктовой и визуальной логики. Структура экранов, поведение компонентов и пользовательские сценарии остаются стабильными, а цвета, акценты и отдельные элементы оформления меняются под конкретного партнёра с помощью токенов.
Такой подход позволяет создавать разные визуальные идентичности без ручной пересборки всего интерфейса и без появления отдельных версий компонентов для каждого бренда.
под каким брендом она запускается.
В основе решения — разделение продуктовой и визуальной логики. Структура экранов, поведение компонентов и пользовательские сценарии остаются стабильными, а цвета, акценты и отдельные элементы оформления меняются под конкретного партнёра с помощью токенов.
Такой подход позволяет создавать разные визуальные идентичности без ручной пересборки всего интерфейса и без появления отдельных версий компонентов для каждого бренда.
Визуальная и системная идея
Одна логика продукта — разные визуальные идентичности
Платформа регулярно адаптировалась под новых партнёров. При этом каждая новая интеграция требовала обновления визуального слоя большого количества экранов.
Нужно было решить две связанные задачи:
Основная сложность заключалась в том, что каждое решение должно было работать не только для одного текущего бренда. Новые компоненты, состояния и сценарии необходимо было сразу проверять во всех темах и с учётом будущих партнёрских запусков.
Нужно было решить две связанные задачи:
- пересобрать дизайн-систему и сделать её удобнее для масштабирования;
- продолжать развивать продукт и проектировать новые фичи с учётом white label архитектуры.
Основная сложность заключалась в том, что каждое решение должно было работать не только для одного текущего бренда. Новые компоненты, состояния и сценарии необходимо было сразу проверять во всех темах и с учётом будущих партнёрских запусков.
Задача
Масштабировать продукт без ручной пересборки интерфейса
Работа началась с анализа существующей дизайн-системы и процесса подготовки новых брендовых версий.
Я изучила:
Аудит показал, что основной проблемой была не сама смена визуала, а недостаточное разделение семантики и конкретных визуальных значений. Компоненты должны были обращаться не к определённому оттенку, а к его функции в интерфейсе: основному действию, фону, тексту, ошибке или границе.
Я изучила:
- как были организованы палитры и стили;
- какие компоненты дублировались между брендами;
- где цвета были привязаны к конкретным экранам;
- какие состояния отсутствовали или работали непоследовательно;
- сколько ручных действий требовалось для запуска новой темы;
- как дизайн-система соотносилась с технической реализацией.
Аудит показал, что основной проблемой была не сама смена визуала, а недостаточное разделение семантики и конкретных визуальных значений. Компоненты должны были обращаться не к определённому оттенку, а к его функции в интерфейсе: основному действию, фону, тексту, ошибке или границе.
Исследование и аудит системы
Где процесс терял время и системность
Одним из ключевых блоков работы стала пересборка дизайн-системы. Компоненты были организованы так, чтобы сохранять единую структуру и поведение, а визуальные значения могли меняться через системные токены.
Совместно с разработчиком был создан Figma-плагин для добавления палитр новых брендов и их применения к интерфейсу. Это позволило сократить количество ручной работы. Вместо последовательной перекраски большого числа макетов команда могла подключить системный набор значений и проверить, как выбранная тема работает на компонентах и готовых экранах.
Визуальный слой менялся под партнёра, но продуктовая логика оставалась единой.
Совместно с разработчиком был создан Figma-плагин для добавления палитр новых брендов и их применения к интерфейсу. Это позволило сократить количество ручной работы. Вместо последовательной перекраски большого числа макетов команда могла подключить системный набор значений и проверить, как выбранная тема работает на компонентах и готовых экранах.
Визуальный слой менялся под партнёра, но продуктовая логика оставалась единой.
Дизайн-система и Figma-плагин
Быстрое подключение новых брендовых палитр
Пересборка затронула не только цвета, но и логику компонентов. Каждый элемент должен был сохранять читаемость, иерархию и доступность при использовании разных брендовых палитр.
При работе с системой учитывались:
При работе с системой учитывались:
- светлые и тёмные темы;
- разные уровни контрастности брендовых цветов;
- состояния наведения, нажатия и недоступности;
- ошибки, предупреждения и успешные действия;
- длинный контент и локализация;
- новые продуктовые сценарии;
- дальнейшее расширение компонентной библиотеки.
Масштабируемая компонентная система
Компоненты, рассчитанные на разные бренды и сценарии
Финальный интерфейс сохраняет общую UX-архитектуру и компонентную логику независимо от выбранного бренда.
Пользователь получает последовательный и предсказуемый опыт, а партнёр — визуально адаптированный продукт, который соответствует его идентичности.
Система покрывает как базовые интерфейсные элементы, так и сложные продуктовые сценарии: формы, статусы, выпуск карт, доставку, ошибки и информационные состояния.
Пользователь получает последовательный и предсказуемый опыт, а партнёр — визуально адаптированный продукт, который соответствует его идентичности.
Система покрывает как базовые интерфейсные элементы, так и сложные продуктовые сценарии: формы, статусы, выпуск карт, доставку, ошибки и информационные состояния.
Финальный интерфейс
Единый продукт в нескольких визуальных темах
В результате дизайн-система стала удобнее для поддержки и масштабирования white label платформы. Новые брендовые палитры можно было добавлять быстрее, а компоненты сохраняли единую логику в разных визуальных темах.
Figma-плагин сократил количество ручных операций и сделал процесс подготовки брендовых версий более предсказуемым.
Для продукта это упростило запуск новых партнёрских решений и развитие функциональности. Для команды — помогло снизить количество дублирующей работы и создать более устойчивую связь между дизайном и реализацией.
Figma-плагин сократил количество ручных операций и сделал процесс подготовки брендовых версий более предсказуемым.
Для продукта это упростило запуск новых партнёрских решений и развитие функциональности. Для команды — помогло снизить количество дублирующей работы и создать более устойчивую связь между дизайном и реализацией.
Результат
Результат
