Платформа управления кодом
Русский аналог GitHub/GitLab для банка. Дизайн-система собиралась 8 месяцев — сейчас это две недели.
Сейчас бы я сделала это так
В 2023 самой долгой частью проекта оказалась не функциональность, а сборка дизайн-системы и навигации. Восемь месяцев на токены, компоненты, IA, прототипы, унификацию — и это с готовой сторонней ДС в качестве отправной точки. Сегодня тот же объём — две недели через token-spec-first подход + плагин для Figma. Я провела этот эксперимент с собственным портфолио — занял один вечер. Лаб-кейс ниже.
Как это было сделано тогда
Задача
Разработать платформу управления кодом и CI/CD для банка — русский аналог GitHub, GitLab, Bitbucket, SonarCube. Полный контроль над проектами SaaS и On-Prem с интуитивным интерфейсом.
Анализ
- Потребности команды разработки банка
- Существующие решения на рынке
- Существующие дизайн-системы банка и возможность покупки сторонней ДС
Что заняло больше всего времени
Не фичи. Дизайн-система и навигация.
Платформенный продукт — это десятки экранных типов (списки, детали, диффы, статусы, инспекторы, дашборды), каждый со своим набором состояний. Без чёткой системы каждый дизайнер изобретал свой паттерн — потом мы тратили циклы на унификацию задним числом.
Навигация оказалась ещё сложнее. Иерархия сущностей (org → проекты → репозитории → ветки → ревью → пайплайны) требовала несколько уровней навигации одновременно: глобальный, контекстный, breadcrumb, in-page tabs. Каждое новое требование от команды поднимало вопрос «в какой уровень это добавлять» — и каждый раз ответ зависел от того, как мы уже спроектировали соседние сущности.
Процесс
Информационная архитектура сервиса — карта связей между сущностями (репозитории, пайплайны, ревью, политики, метрики качества).
User Story Map — определила бэклог команд.
Дизайн-система — выбрали стороннюю, купили, доработали под потребности. Доработка заняла больше, чем планировалось: компоненты, которые в обычном продукте используются 2-3 раза, здесь нужны были в 10+ контекстах с разной семантикой состояний.
Прототипы — протестировали на разных ролях будущих пользователей: разработчик, тимлид, ревьюер, релиз-менеджер.
Скорректировали — отправили в delivery с сопровождением.
Итог
Разработали с нуля систему управления кодом, успешно внедрили в банке. На этапе MVP функционала было немного — позже добавили: создание форков, обратный pull request, комментирование, статистику ошибок, управление качеством кода.
Моя роль на проекте
- Работа в команде, мой продукт — качество кода
- Обучение и ведение стажёров. Синки, 1×1, ревью, развитие
- Выстраивание процессов в команде
- Формирование бэклога и стратегии в продукте и интеграция их в систему
- Внедрение исследований на каждом этапе разработки и постаналитики
Что бы я сделала иначе
Дизайн-система — первой задачей, не последней. С чёткой структурой токенов и компонентов сборка платформенного продукта ускоряется в разы — даже без AI-инструментов. С ними — в десятки. Эксперимент с собственным портфолио показал: полная система (токены, компоненты, документация, Figma-библиотека) собирается за один вечер. Этот же подход на проект масштаба code platform — две недели максимум.
Главное правило для платформенных продуктов: никогда не начинать рисовать экраны без системы. Соблазн «сначала покажем функциональность, потом причешем» обходится потом в восемь месяцев чистки. Сегодня цена этого правила — пара дней на старте. Тогда — половина срока всего проекта.