Как мы выросли из Material UI от Google: история создания дизайн-системы в финтех-компании
Привет, меня зовут Юрий Юшкевич, я руководитель ИТ-разработки/CTO. В этой статье я поделюсь историей создания и внедрения дизайн-системы в финтех-компании.
Содержание:
В 2014 году в компании не было ни дизайн-системы, ни выделенной дизайн-команды. Зато были амбиции, продуктовая смелость и желание делать интерфейсы, которыми приятно пользоваться. Сегодня, спустя десять лет, собственная дизайн-система лежит в основе десятков продуктов, ускоряет разработку и стала стандартом не только для внутренних команд, но и для внешних подрядчиков.
Этап 1. «Все работает - и ладно» (2014–2021)
В первые годы компания была компактной: небольшая команда, несколько внутренних систем, все друг друга знали. Дизайн решался "на коленке", но чтобы не изобретать велосипед, дизайнеры взяли за основу Material Design от Google и слегка адаптировали его под нужды продуктов.
И это действительно работало:
- компоненты были простыми;
- проблемы согласования решались за чашкой кофе;
- никто не задумывался о масштабе, потому что его не было.
Но с ростом компании стало понятно: "расстояние вытянутой руки" больше не спасает. Когда стало 500+ сотрудников, 100 команд и 50+ информационных систем, хаос начал проступать сквозь поверхность:
- один и тот же компонент выглядел по-разному в трех продуктах;
- новые дизайнеры тратили недели, чтобы разобраться в наследии;
- разработчики изобретали "велосипеды" вместо того, чтобы использовать готовые элементы;
- появилось явное различие между дизайном и реализацией.
Как раз в это время я пришел в компанию и обратил внимание на проблемы. Мы пытались бороться, но стало очевидно: компания переросла подход использования сторонней дизайн системы. Нужно было идти в создание собственной дизайн системы с нуля.
Этап 2. «С нуля - и всерьез» (2022–2023)
В 2022 году мы приняли стратегическое решение: запускаем полноценную дизайн-систему. Не библиотеку кнопок, а единый язык взаимодействия между дизайном и разработкой, который снимает вопросы на стыках. Создали выделенную команду по дизайн-системе: дизайнер, фронтендеры, продакт.
Работа шла с нуля:
- проанализировали 30+ внутренних систем;
- сформулировали принципы: доступность, инклюзивность, поддержка мультиязычности;
- разработали первое ядро: типографика, цвета, сетки, базовые компоненты, иконки, цвета;
- создали сore раздел в Figma и начали разработку библиотеки компонентов для React, синхронизированные между собой.
К концу 2023 года у нас появилась первая стабильная версия, готовая к внедрению.
Этап 3. «Миграция = эффект» (2023-2024)
На этом этапе началась самая сложная, но и самая ценная работа -массовый переход на новую систему. Мы начали переводить продукты на новую систему: с внутренних продуктов и поэкранно. Параллельно разрабатывая новые компоненты и добавляя функционал текущих по запросам команд.
Ключевые шаги:
- запустили миграцию ключевых продуктов;
- расширили локализацию: помимо русского и английского, добавили татарский язык (важно для региональных пользователей);
-внедрили автоматическую синхронизацию между Figma и кодом: дизайнер меняет токены цветов, в библиотеки они появляются автоматически.
Результаты оказались ощутимыми:
- время на проектирование новых экранов сократилось на 30-40%;
- онбординг новых дизайнеров и фронтендеров стал в 2 раза быстрее;
- улучшились метрики: NPS, время выполнения задач, удовлетворенность пользователей.
С точки зрения СТО эта инициатива одновременно снижает издержки и улучшает качество, другими словами снижает уровень хаоса и увеличивает слаженность работы экосистемы и команды.
Этап 4. «Система как стандарт» (2024 - настоящее время)
Сегодня 80% внутренних продуктов работают на нашей дизайн-системе. Но мы пошли дальше:
- адаптировали нашу систему по стандартам доступности, принятым в РФ;
- начали разработку библиотеки компонентов для Android;
- открыли доступ к библиотеке для внешних подрядчиков, обязав использовать ее как стандарт;
- разработали версию для мобильных устройств и выпустили библиотеку для PWA (на основе нее в этом году вышла PWA версия мобильного банка для физических лиц).
Это дало важный эффект: единый UX опыт для внешних и внутренних клиентов, независимо от того, какая команда делала продукт - внутренняя или внешняя.
Мы по сути создали не UI-кит, а инфраструктурный продукт. Такой же критически важный, как CI/CD или Paas.
Что мы поняли за эти 10 лет
Дизайн-система - это не про пиксели и не про красоту. Это про масштабирование компании.
Когда вы маленькие, хаос бесплатен. Когда вы большие - хаос становится самым дорогим участником команды.
Инвестиции в дизайн-систему окупаются не в привычных "красивых экранах", а в:
- скорости принятия решений;
- предсказуемости и безопасности разработки;
- снижении технического долга;
- качестве пользовательского опыта;
- упрощенном онбординге.
Мы выросли из Google Material давно - и это был естественный процесс. Сегодня наша дизайн-система Ornament - архитектурный фундамент всей цифровой экосистемы компании.
P.S.
Сейчас мы работаем над версией 2.0 с фокусом на UI/UX паттерны и создания единой базы знаний с применением AI. Но это уже другая история…
Ключевые теги:
Подписывайтесь на мой Telegram канал: