Финтех-компания
FinTech / Design
Дизайн-система для финтех-компании
Создали комплексную дизайн-систему из 200+ компонентов для ускорения разработки
200+
Компонентов
-40%
Время разработки UI
100%
Консистентность
Вызов
Финтех-компания с 5 продуктами и 3 командами разработки страдала от несогласованности интерфейсов. Каждая команда создавала компоненты с нуля.
5 продуктов — 5 разных визуальных стилей
Каждая команда тратит 30-40% времени на UI с нуля
3 команды дизайнеров без единых стандартов
Непоследовательный UX снижает доверие клиентов
Решение
Создали комплексную дизайн-систему с библиотекой из 200+ компонентов, синхронизированную между Figma и кодом.
Дизайн-токены
- Цветовая палитра
- Типографика и иконки
- Отступы и сетка
- Тени и скругления
Библиотека компонентов
- 200+ React-компонентов
- Storybook документация
- Accessibility (WCAG 2.1)
- Темы (light/dark)
Интеграция
- Figma ↔ Code sync
- NPM-пакет
- Auto-генерация changelog
- Chromatic визуальные тесты
Процесс работы
Аудит
2 недели- Инвентаризация компонентов
- Определение токенов
Дизайн-токены
2 недели- Цвета, шрифты, отступы
- Документация
Компоненты
6 недель- Базовые → Составные
- Storybook
- Тестирование
Rollout
2 недели- Миграция продуктов
- Обучение команд
Результаты
Ускорение
Разработка UI ускорилась на 40%
200+ компонентов
Полная библиотека для всех продуктов компании
Консистентность
Единый визуальный язык во всех 5 продуктах
Качество
Визуальные баги сократились на 70%
“Дизайн-система от QZX объединила наши 5 продуктов в единый визуальный язык. Команды разрабатывают UI в 2 раза быстрее, и клиенты видят единый бренд.”
— Head of Design, финтех-компания
Технологический стек
FigmaStorybookReactTypeScriptTailwind CSSChromaticNPM
Заинтересовал кейс?
Обсудим как мы можем создать подобное решение для вашего бизнеса.