Дизайн-система: разработка, внедрение, подводные камни

Антон Дуканич, SEMrush
ProfsoUX 2019

На кого рассчитан доклад:

1. Большие компании, которые планируют, начали или уже разработали дизайн-систему.
2. Те, кто сталкивается с проблемами организации команды, процессами разработки ДС или ее внедрением в продукт.
3. PO, PM, UX/UI-дизайнеры, Front-end разработчики участвующие в разработке ДС.
4. Все те, кто соскучился по докладам про дизайн-системы 😉

Тема дизайн-систем уже заезжена и вызывает боль у некоторых слушателей, но тем не менее, я бы хотел поделиться опытом разработки и внедрения большой системы и рассказать о проблемах, связанных с ее эксплуатацией и разработкой, про процессы между командами. Про подводные камни, с которыми мы столкнулись. Я бы даже назвал свой доклад — подводные камни в море кита.

Transcript

1. Подводные камни в море кита Дизайн-система: разработка, внедрение, подводные камни
2. Дизайн-система – отдельный продукт 1. Инструмент унификации интерфейсов; 1. Выделенная команда; 1. Основная ЦА: Frontend-разработчики и дизайнеры; 1. Сайт = Production; 1. Источник правды.
3. INTERGALACTIC (UI-Kit, «Кит»)
4. Процессы создания гайдлайнов Подводный камень №1
5. UI-Kit Team UX/UI Team Распределение гайдлайнов между UX Процессы создания гайдлайнов
6. UX на фултайм Процессы создания гайдлайнов UI-Kit Team UX/UI Team
7. Подводный камень №2 Синхронизация знаний
8. 1. В большой команде всегда есть риск расхождений; 2. Что не запрещено — разрешено; 3. Сложно менять «старое» на «новое»; 4. Вкусовщина. Трудности Синхронизация знаний
9. 1. Синхронизация UX решений («синки»); 2. Работа над решением начинается с поиска похожих решений; 3. Полиция UI Kit-а. Решения Синхронизация знаний
10. Подводный камень №3 Разработка сложных компонентов
11. Простые Разработка сложных компонентов
12. Сложные Разработка сложных компонентов
13. Component Backlog Iteration Backlog Iteration 1 - 4 weeks Component increment Проект разработки сложного компонента Разработка сложных компонентов
14. Подводный камень №4 Внедрение дизайн-системы
15. 1. Команды разработки полностью отвечают за свой продукт; 2. UX-команде сложно интегрировать общее решение; 3. UX/UI-задачи часто падают вниз бэклога как не приоритетные; 4. Разработчики не хотят трогать то, что уже работает и ладно. Трудности Внедрение дизайн-системы
16. 1. Процесс перехода на кит; 2. Frontend-разработчик из UIKit Team приходит в команду и помогает; 3. “Подсадить” на дизайн-систему. Решения Внедрение дизайн-системы
17. Как мы измеряем кита
18. Repository 1 Статистика использования компонентов Repository 2 Repository N Repository 3 Product 1 Product 2 Product 3 Product N Button: Input: Select: Import found Import not found Import found Import found Import found Import not found Import not found Import found Import found Import not found Import found Import found
19. Использование компонентов в продуктах 25
20. Опросы
21. Оценка дизайна 1. Чек-листы; 2. Аудит продуктов относительно кита; 3. Фидбек пользователей.
22. 1. Согласуйте процессы взаимодействия; 2. Разрабатывайте итерационно и быстро; 3. Отслеживайте расхождения; 4. Создавайте удобный сервис для дизайнеров и разработчиков. Заключение
23. Спасибо за внимание! Антон Дуканич a.dukanich@semrush.com