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

Команда

У нас более 20 продуктов. Каждому из них нужен UI. Эти продукты могут быть несвязанными друг с другом (например, сайт Домклик и внутренний портал для сотрудников), а могут быть встроены в основной продукт (например, личный кабинет связан с витриной сайта). Эти многочисленные продукты могут быть в виде веб-, адаптивных, iOS- и Android-приложений. А ещё не забывайте о запуске новых продуктов, для которых тоже нужен дизайн. Делать всё с нуля — задача более сложная, чем взять готовые компоненты.

Наша команда включает владельца продукта, дизайнеров, мобильных и веб- разработчиков, руководителей разработки.

У нас проходят все активности, какие бывают в других продуктовых командах: дейли, груминги, планирования, ретро, демо.

Как я говорил в начале, у ДС есть своя аудитория — у нас это дизайнеры, разработчики, владельцы других продуктов.

Для информирования и работы с нашими пользователями мы применяем:

чат поддержки (общение с нашей командой);
ежемесячная онлайн-встреча для дизайнеров «Приём обращений»;
онлайн-встреча «Дайджест ДС»;
витрина UI-компонентов (веб и мобильная);
документация и руководства для дизайнеров и разработчиков;
два Telegram-канала с нашими новостями по дизайну и разработке;
онлайн-демонстрация новых компонентов.

Расскажу подробнее о каждом инструменте.

Чат с пользователями

Это чат, в котором мы отвечаем нашим пользователям. Есть ветка для дизайнеров, веб-, iOS- и Android-разработчиков. Бывает, что какие-то запросы на доработку компонентов принимаем прямо из чата. Если доработка мелкая, то делаем её в тот же день, и счастливый пользователь идёт дальше работать.

Онлайн-встреча «Приём обращений»

Это ежемесячная встреча, на которой мы общаемся с нашими дизайнерами. Они могут показать макеты, спросить совета. Из команды ДС всегда присутствуют все наши дизайнеры, поэтому мы можем ответить на любой вопрос. Рассказываем о датах выхода новых компонентов, а также о возможных сложностях.

Онлайн-встреча «Дайджест ДС»

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

Витрина UI-компонентов

На самом деле у нас аж четыре витрины компонентов. Две — вебовские: React и Angular, и две мобильные. Вебовские можно посмотреть на вебе, а мобильные — в виде мобильных приложений. Очень хорошо, что можно пощупать свои компоненты на том устройстве, на котором они свёрстаны.

Пример витрины компонентов для iOS (такая же есть и для Android).

Документация и руководства

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

Также мы пробуем формат видеопрезентаций компонентов. Это для тех, кто пропустил все новости, недавно устроился на работу — чтобы быть в курсе того, как настраивается и работает компонент в Figma, какие у него есть особенности. Видео воспринимается легче, чем сухой текст из документов. Думаю, это будет полезно дизайнерам. Потестируем, посмотрим!

Видеоруководство: из Figma ссылка на видео в нашем Confluence.

Новостные каналы

У нас есть канал с новостями ДС с дизайнерской точки зрения, и канал чисто для разработчиков с описанием релизов и указанием их версий.

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

В дизайнером канале мы делимся новостями ДС: рассказываем, что сделали за неделю, в каких активностях участвовали (например, выступали на конференции или участвовали в хакатоне). Также в канале обращаемся к дизайнерам с просьбой прислать какие-то макеты или примерить бета-версию тёмной темы к их макетам и прислать обратно список багов.

Хотя канал дизайнерский, его читают и разработчики, и менеджеры.

Онлайн-встреча «демо»

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

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

Мой канал в телеграм https://t.me/ux_advocate

Рабочий процесс команды дизайн-системы