Назад
Что ещё было сделано

– Описали и внедрили процесс контрибьюта от продуктовых команд

Мы можем делать больше с небольшим ресурсом. Продуктовые команды выделяют свой ресурс на контрибьют: правка багов, создание новых компонентов, различные доработки.

– Изменили отношение к ДС

Команды активно участвуют в обсуждениях новых компонентов, предлагают новые идеи.

– Полностью пересобрали и внедрили токены цвета

Была задача от бизнеса: нужно уметь менять цветовую тему в интерфейсе платформы. Нам пришлось переосмыслить подход к использованию цвета и семантике. 

Мы разработали план по переезду на новые токены в дизайне и разработке. Сложнее всего было продуктовым командам. Общими силами и с нашей поддержкой мы смогли перевезти на новые токены более 50 команд за 4 месяца.

– Написали много полезной документации

Описали жизненный цикл компонента, гайды по сборке локальных компонентов, миграции на новые токены и тд.

– Разработали и внедрили процесс контроля качества Design Gate

Мы внедрили важный процесс, который помогает нам контролировать макеты перед передачей в разработку и влиять на сверстанные экраны перед релизами.

Теперь это направление выделилось из ДС в отдельную команду, так как эта работа требует много времени и ресурсов, но она очень важна для руководства.

Что ещё было сделано

– Описали и внедрили процесс контрибьюта от продуктовых команд

Мы можем делать больше с небольшим ресурсом. Продуктовые команды выделяют свой ресурс на контрибьют: правка багов, создание новых компонентов, различные доработки.

– Изменили отношение к ДС

Команды активно участвуют в обсуждениях новых компонентов, предлагают новые идеи.

– Полностью пересобрали и внедрили токены цвета

Была задача от бизнеса: нужно уметь менять цветовую тему в интерфейсе платформы. Нам пришлось переосмыслить подход к использованию цвета и семантике. 

Мы разработали план по переезду на новые токены в дизайне и разработке. Сложнее всего было продуктовым командам. Общими силами и с нашей поддержкой мы смогли перевезти на новые токены более 50 команд за 4 месяца.

– Написали много полезной документации

Описали жизненный цикл компонента, гайды по сборке локальных компонентов, миграции на новые токены и тд.

– Разработали и внедрили процесс контроля качества Design Gate

Мы внедрили важный процесс, который помогает нам контролировать макеты перед передачей в разработку и влиять на сверстанные экраны перед релизами.

Теперь это направление выделилось из ДС в отдельную команду, так как эта работа требует много времени и ресурсов, но она очень важна для руководства.

Процесс
Что нужно было полечить
  • – Много кастомных компонентов. 
  • – Нет налаженного производственного процесса. 
  • – Нет стратегии развития. 
  • – Команды не понимают значимости дизайн-системы.
  • – Не хватает компонентов. 
  • – Есть расхождения дизайна с разработкой.
Как решали проблемы

– Много кастомных компонентов

Был проведен анализ текущей библиотеки компонентов дизайн-системы, мы искали неиспользуемые или схожие компоненты. Далее была разработана стратегия по замене кастомных компонентов у продуктовых команд компонентами из дизайн-системы, с целью сокращения кастома и повышения метрики Adoption.

– Нет налаженного производственного процесса

Мы доработали процесс разработки и обновления компонентов: добавили этапы исследования, оценки, тестирования, ревью и демо функционала для команд. Для увеличения эффективности и минимизации ошибок были внедрены инструменты автоматизации для сборки и деплоя компонентов.

– Нет стратегии развития

Было проведено глубинное исследование лучших практик и современных тенденций в области дизайн-систем, а также учтены потребности текущих и будущих проектов. Была разработана долгосрочная стратегия развития, основанная на потребностях продуктовых команд, бизнес целях и с прицелом на устойчивую эволюцию дизайн-системы.

– Команды не понимают значимости дизайн-системы

Запущена серия обучающих мероприятий для всех желающих, направленная на ознакомление с принципами построения дизайн-системы и практиками работы с ней. Для этого были подготовлены обучающие материалы и практические сессии с целью усиления понимания всей командой значимости и преимуществ использования дизайн-системы. Также были проведены митапы с планами на дизайн-системы и с демонстрацией открытого бэклога команды.

– Не хватает компонентов

Мы собрали список недостающих компонентов и провели аудит текущего набора в библиотеке. Нам нужно было понять, что должно попасть в общую библиотеку, а что будет жить локально в командах. После проведенного анализа мы запланировали работу по отсутствующим компонентам и добавили их в общий бэклог.

– Есть расхождения дизайна с разработкой

Был проведен гэп-анализ компонентов в дизайне и коде. Мы разметили все компоненты, которые отсутствовали либо в разработке, либо в макетах и также запланировали по ним работы. Был описан и внедрён процесс обновления дизайн-библиотеки и сторибука. Таким образом мы смогли пофиксить проблему с использованием компонентов дизайнерами раньше, чем они появляются в разработке. Также был разработан процесс регулярной проверки и обновления компонентов, чтобы устранить любые расхождения (DS Check up).

Что ещё было сделано

– Описали и внедрили процесс контрибьюта от продуктовых команд

Мы можем делать больше с небольшим ресурсом. Продуктовые команды выделяют свой ресурс на контрибьют: правка багов, создание новых компонентов, различные доработки.

– Изменили отношение к ДС

Команды активно участвуют в обсуждениях новых компонентов, предлагают новые идеи.

– Полностью пересобрали и внедрили токены цвета

Была задача от бизнеса: нужно уметь менять цветовую тему в интерфейсе платформы. Нам пришлось переосмыслить подход к использованию цвета и семантике. 

Мы разработали план по переезду на новые токены в дизайне и разработке. Сложнее всего было продуктовым командам. Общими силами и с нашей поддержкой мы смогли перевезти на новые токены более 50 команд за 4 месяца.

– Написали много полезной документации

Описали жизненный цикл компонента, гайды по сборке локальных компонентов, миграции на новые токены и тд.

– Разработали и внедрили процесс контроля качества Design Gate

Мы внедрили важный процесс, который помогает нам контролировать макеты перед передачей в разработку и влиять на сверстанные экраны перед релизами.

Теперь это направление выделилось из ДС в отдельную команду, так как эта работа требует много времени и ресурсов, но она очень важна для руководства.

Метрики на Q1 / 2024

81%
CSI

Повышение CSI дизайн-системы было достигнуто путем внедрения регулярных митапов, анализа обратной связи от пользователей и оптимизации процессов.

60%
Adoption

Мы смогли увеличить уровень принятия дизайн-системы благодаря обучению пользователей, улучшенной документации и активной поддержке от нашей команды.

15%
Custom Usage

Уменьшили использование кастомных компонентов в продуктах с помощью обновления библиотек, внедрения Quality Gate и более быстрой реакции на запросы.

Результаты за 1,5 года

Дизайн-система Pulse UI

О продукте

Работа над дизайн-системой в нашей компании сосредоточена на удовлетворении потребностей продуктовых команд и достижении бизнес-целей. Мы активно изучаем запросы пользователей через регулярные интервью и сбор обратной связи, что позволяет нам выявлять их боли и пожелания. Это помогает нам создавать актуальные инструменты и решения, которые действительно облегчают их работу и способствуют более эффективному взаимодействию.

Наша дизайн-система разработана с акцентом на гибкость и масштабируемость, что позволяет нам быстро адаптироваться к изменяющимся требованиям. Мы постоянно анализируем отзывы, отслеживаем тренды и лучшие практики, проводим исследования и эксперименты. Это обеспечивает постоянное совершенствование существующих решений и добавление новых возможностей, поддерживая актуальность и эффективность нашей дизайн-системы для продуктовых команд.

Подробнее про Пульс

Мой вклад
Аудит и исследование
Стратегия и планирование
Проектирование и разработка
Внедрение в продукты
Поддержка и развитие
Команда
Владелец продукта
Дизайнер (x2)
Frontend-разработчик (x2)
Год
2021 – настоящее время

Процесс

Мы начали с основ

Был проведен анализ текущей библиотеки компонентов дизайн-системы, мы искали неиспользуемые или схожие компоненты. Далее была разработана стратегия по замене кастомных компонентов у продуктовых команд компонентами из дизайн-системы, с целью сокращения кастома и повышения метрики Adoption.

Мы доработали процесс разработки и обновления компонентов: добавили этапы исследования, оценки, тестирования, ревью и демо функционала для команд. Для увеличения эффективности и минимизации ошибок были внедрены инструменты автоматизации для сборки и деплоя компонентов.

Было проведено глубинное исследование лучших практик и современных тенденций в области дизайн-систем, а также учтены потребности текущих и будущих проектов. Была разработана долгосрочная стратегия развития, основанная на потребностях продуктовых команд, бизнес целях и с прицелом на устойчивую эволюцию дизайн-системы.

С какими проблемами столкнулись

Мы собрали список недостающих компонентов и провели аудит текущего набора в библиотеке. Нам нужно было понять, что должно попасть в общую библиотеку, а что будет жить локально в командах. После проведенного анализа мы запланировали работу по отсутствующим компонентам и добавили их в общий бэклог.

Команды не понимали значимости дизайн-системы

Запущена серия обучающих мероприятий для всех желающих, направленная на ознакомление с принципами построения дизайн-системы и практиками работы с ней. Для этого были подготовлены обучающие материалы и практические сессии с целью усиления понимания всей командой значимости и преимуществ использования дизайн-системы. Также были проведены митапы с планами на дизайн-системы и с демонстрацией открытого бэклога команды.

Не хватало компонентов

Итоги

После нескольких итераций и релизов мы достигли стабильной базовой версии, теперь мы можем собирать данные, эффективно оптимизировать процесс и внедрять ключевые функции. Мы разработали и внедрили процесс контрибьюта от продуктовых команд, что позволило использовать внутренние ресурсы продуктовых команд. Команды теперь активно участвуют в обсуждениях новых компонентов и предлагают идеи, что улучшило их отношение к дизайн-системе.

Мы обновили и внедрили новые токены цвета, переведя более 50 команд за 4 месяца. Создали множество полезной документации, включая гайды по жизненному циклу компонентов и миграции на новые токены. Внедрили процесс контроля качества Design Gate, который помогает проверять макеты и сверстанные экраны перед релизами, выделив это направление в отдельную команду.

Как мы измеряем успех

Для оценки работы дизайн-системы мы используем две ключевые метрики: CSI (Component Satisfaction Index) и Adoption. CSI позволяет измерять удовлетворенность команд компонентами, а Adoption показывает, насколько активно команды используют компоненты дизайн-системы. Эти метрики помогают нам отслеживать эффективность и вносить необходимые улучшения.

CSI 81%

Повышение CSI дизайн-системы было достигнуто путем внедрения регулярных митапов, анализа обратной связи от пользователей и оптимизации процессов.

Adoption 60%

Мы смогли увеличить уровень принятия дизайн-системы благодаря обучению пользователей, улучшенной документации и активной поддержке от нашей команды.

Результаты за 1,5 года

Следующий проект

МТС Партнер