Шаг за шагом: как добиться синхронности в дизайн-команде за 9 месяцев

Привет, меня зовут Артём Говердовский, и я дизайн-директор в Сбер Домклик. В моëм подчинении 49 дизайнеров, среди которых 6 лидов. Всего в дизайн-отдел Сбер Домклик входят такие направления:

• Продуктовый дизайн (веб, вебвью, мобильное приложение iOS и Android);
• Коммуникационный дизайн (бренд-дизайн, 2D/3D, motion, видеопроизводство, оформление внутрянки вроде выставок, мероприятий, офисов продаж);
• Специальные проекты (лендинги, disrupt-проекты, проверка гипотез и любая помощь на начальных этапах, когда нужно оперативное выделение ресурса дизайна);
• Пользовательский опыт и развитие (UX/CХ-исследования, discovery-работа, анализ конкурентов, мониторинг фичей, выявление потребностей).

По шести лидам у нас такое распределение нагрузки:

• Один лид отвечает за UI/UX и дизайнеров в направлении «Витрина» и «Специальные проекты»;
• Один лид отвечает за UI/UX и дизайнеров в направлении «Внутренние сервисы и B2B продукты»;
• Один лид отвечает за UI/UX и дизайнеров в направлении «Ипотечный путь B2C»;
• Один лид отвечает за нашу дизайн-систему;
• Один лид отвечает за всех коммуникационных дизайнеров и бренд-дизайн;
• Один лид отвечает за UX/CХ-исследования пользовательского опыта.

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

Подробнее прочитать про то, как стартовать на новом месте, я написал в своей статье «Чеклист дизайн‑директора на новом рабочем месте». Путь был проделан большой, у нас был какой‑то план и мы его придерживались, и, как мне кажется, у нас получился очень продуктивный спринт в 9 месяцев.

Прежде всего скажу, что я люблю систематизацию, понятные цели и прозрачность в процессах. Поэтому любые наши действия и задачи (мои как дизайн-директора и дизайн-лидов) должны вести к достижению какой-то цели внутри Домклика как в рамках компании, так и в рамках дизайн-команды. Поэтому я разбил все наши активности на 6 эпиков, которые покрывают всë, что мы делаем внутри дизайн-отдела:

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

• Продукт. Сюда входят все задачи, цель которых — проработка UI/UX, единого клиентского опыта и архитектуры во всех цифровых-каналах и сценариях.

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

• Дизайн-система. Здесь собраны все задачи направленные на разработку и улучшение дизайн-системы и процессов работы с ней.

• Коммуникации. Сюда попали все задачи по разработке и развитию брендбука, айдентики, внешних и внутренних бренд-коммуникаций, мерча, 2D/3D, motion, видеопроизводству, оформлению внутрянок вроде выставок, мероприятий, офисов продаж и т. д.

• Опыт пользователя. В этом эпике все задачи, связанные с проработкой UX-исследований и discovery-продуктов.

Ниже я расскажу про каждый эпик в формате ДО (это точка «А» — момент моего трудоустройства в Сбер Домклик, то, с чего мы начинали) и ПОСЛЕ (что получилось после 9 месяцев работы, то есть точка «Б» — куда мы пришли).

Процесс (ДО)

Самой большой проблемой для меня было то, что на старте, когда я только присоединился к команде Домклика, мне было трудно ставить задачи и отслеживать их, потому, что в дизайн-отделе не была сформирована культура ведения больших проектов и задач. То есть любая задача записывалась где‑то «в уме» с неопределëнным дедлайном, и следить за еë корректностью и выполнением было почти невозможно. А если задач 20? а если 200?

У меня 6 лидов, до каждого нужно донести задачу, и самое главное — отследить еë выполнение. А лидам в свою очередь важно понимать, зачем им делать ту или иную задачу, какая у нас цель и как задача повлияет на эту цель. Правильно выстроенные процессы и система работы между моими «минус один» (лидами), для меня всегда цель № 1. Обладание принятой всеми лидами и понятной системой иерархии задач означает, что команда, которую я сформировал, может уверенно и успешно вести корабль, даже когда меня нет на капитанском мостике.

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

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

Процесс (после 9 месяцев работы)

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

Всю систему ведения крупных проектов я построил на связке Confluence (там мы ведëм дерево проектов и задач по каждому из лидов, разбиваем задачи на этапы и проставляем у каждой дедлайны, чтобы легче было отслеживать) и Jira (тут ведëм уже конкретные задачи). Все задачи из Jira связаны с проектами в Confluence и наоборот. Появилась структурность. Поручения встали на рельсы чëткого следования по дедлайнам к общей цели в рамках одного из эпиков. Если кратко, то получилось создать удобную систему контроля задач, ведущих к определённым целям, и это здорово ускорило нашу команду.

Также мы внедрили единый дизайн-процесс по всем продуктовым командам, за что отдельное спасибо одному из моих лидов, который сначала изучил все процессы по всем командам, а потом настраивал их и искал консенсус, чтобы все команды перешли на новый единый процесс. Так у нас появился структурированный подход, дизайнеры начали проводить задачу по процессу в Jira (гипотезы, анализ рынка и конкурентов, макет, UX-редактура, дизайн-рецензирование кода). Комплект работ по внедрению единого продуктового дизайн-процесса привëл к ускорению работы над задачами, пониманию заказчиками процессов, появились понятные артефакты на входе и выходе задач и сформированные ожидания, а также распределённые зоны ответственности.

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

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

В результате в эпике «процесс» за 9 месяцев мы упростили коммуникации между бизнесом и дизайном, выстроили прозрачные для всех процессы и запустили единые подходы к работе внутри дизайн‑команд. Это теперь наш фундамент, который позволяет нам не «расползтись», какой бы проект мы ни взяли.

Продукт (ДО)

Одним из основных и главных вызовов в продукте было внедрение новой дизайн‑системы 2.0 (о ней чуть позже) совместно с редизайном продукта. Команд много, у каждого свои бэклоги, свой темп, свои метрики и KPI, которые надо сохранить на высоком уровне. По волшебной кнопке взять и запустить редизайн в работу на весь Домклик, как на уровне продуктовых B2B-команд, так и на уровень B2C, — огромный вызов по синхронизации времени, людей и этапов работы: кому‑то от редизайна нужно только обновление UI, по сути re-skin старых компонентов, а кому‑то от требуется полный цикл UI+UX, то есть и re-skin, и проведение пользовательских исследований, которое ведёт к изменениям в продукте.

Продукт (после 9 месяцев работы)

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

Решили начать с таблицы, в которую записывали договорённости с каждой командой относительно сроков и объёма работ (UI или UI+UX). Далее каждый продуктовый лид на своём уровне заполнял поля по своему направлению. За три недели нам удалось полностью договориться со всеми командами, согласовать все дедлайны, вписать объёмный редизайн в план работ до конца года и общий бэклог.

Но начать внедрять редизайн на уровне продуктовых дизайнеров без четких руководств — заведомо провальная идея. А с учётом того, что раскатывать нам его нужно как на B2C-, так и на B2B-продукты (кстати, о том, как как создавать дизайн внутренних продуктов, делились в этой статье), без чёткого плана действий было не обойтись. Поэтому одной из задач, которую мы решали, было составление руководства по редизайну. По сути, это свод правил и рекомендаций с привязкой к конкретным компонентам новой дизайн‑системы 2.0. Параллельно согласовывали их между собой (я как дизайн-директор и команда лидов), между нашими продуктовыми дизайнерами и со СБЕРом, чтобы не уходить далеко от материнского фирменного стиля, иметь общие наследуемые паттерны, но в тоже время обновить компоненты под запросы дизайнеров и бизнеса. Ушли в проработку модулей, ведь новый Домклик — это прежде всего функциональная модульность (об этом я, видимо, напишу в другой статье о всём процессе редизайна и тому, что у нас в итоге получилось).

Пока мы апробировали все подходы, описанные выше, нам как по рельсам удалось реализовать и выкатить в эксплуатацию два крупных проекта в новом дизайне — «Моя недвижимость» и «Главная страница».

За 9 месяцев мы обкатали все процессы и выходим на полный редизайн веб- и мобильных версий с проработкой единого клиентского опыта во всех цифровых (и не только) сценариях.

Рост и развитие (ДО)

В этом эпике основная проблема была ясна сразу: отсутствие инструментов и сценариев по развитию навыков и карьерного трека у дизайнеров любого из направлений, входящих в отдел дизайна. Оцифровка дизайнера — задача не из лёгких, и тут можно подискутировать на тему релевантности данного метода. Но мы для себя решили, что нам такая система точно нужна, и поставили перед собой задачу создать карту компетенций UI/UX-дизайнера.

Более того, у нас, как у отдела дизайна, находилась в хаосе вся наша внутренняя база знаний (статьи, адаптация новичков и другой внутренний дизайн‑контент). Поэтому ещё одной трудностью для нас было сформировать такую область и сделать её внутренней базой знаний отдела дизайна.

Рост и развитие (после 9 месяцев работы)

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

Более того, чтобы наша карта компетенций дизайнера не была «картой в вакууме», оторванной от системы HR, мы доработали её с учётом правок от отдела HR, чтобы в дальнейшем запустить во всей компании. В долгосрочной перспективе это должно помочь нам вырастить классных дизайн‑специалистов, повысить лояльность сотрудников и привлекательность HR‑бренда.

В совокупности, за 9 месяцев мы создали самодостаточный метод оценки компетенций и навыков дизайнера, завязанный на системе достижений, профессиональных и социальных скилов, оценки 360 от руководителя и рекомендаций с конкретными заданиями по повышению категории, использующих и нашу внутреннюю «базу знаний».

Кстати о «базе знаний»: её мы тоже создали с нуля. Наполнили выжимкой из того, что я в своё время создал в рамках своего проекта ДЗГН360. Это полноценная библиотека материалов о дизайне и дизайнерах, процессах и развитии, метриках и исследованиях, психологии дизайна, дизайн‑менеджменте и т. д. На её основе мы и создавали «базу знаний».

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

Но чтобы это всё точно работало, важно заботиться о микроклимате внутри команды, о проблемах и переживаниях, слушать запросы. Но это не такая простая задача, когда у тебя 49 человек. А если ты хочешь получить обратную связь по всей компании?

Я решил создать два опросника про микроклимат. Один для дизайнеров, где они могут анонимно и только со мной поделиться всем, что «болит». А результаты из второго опросника доступны PO и CPO, да и вообще всем тем, кто работает или как‑то соприкасается с отделом дизайна. Я делю все запросы по темам, и дальше все предложения, жалобы, рекомендации и пожелания идут в работу в рамках одного из наших эпиков. Этот инструменты помогает нам делать калибровку и отслеживать настроения как внутри команды, так и за её пределами.

Дизайн-система (ДО)

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

• Была абсолютно не гибкая, не позволяла нам идти в подход mobile first, в котором и нативные приложения, и adaptive web, по-моему мнению, должны быть идентичны ради единообразия пользовательского пути.
• Имела массу проблем с синхронизацией как внутри команды дизайн-системы, так и в продуктовых командах.
• Была хаотична: один и тот же компонент мог иметь несколько отличающихся вариаций, отсутствовало единообразие и согласованность.
• 12 файлов в Figma. И тут без комментариев, думаю, можно и так понять, что столько файлов лишь под дизайн-систему — это перебор.

Дизайн-система (после 9 месяцев работы)

Первым делом надо было понять, как грамотно распутать клубок устаревшей дизайн-системы 1.0. Мы проанализировали существующие процессы, составили списки со всеми задачами с разделением на компоненты для планирования, и организовали родительские задачи в общий список с разделением. Были четко расставлены приоритеты, и Ярослав с командой взялся за обновление нашей дизайн-системы. Мы начали создание почти с нуля дизайн-системы 2.0. Что было сделано за 9 месяцев работы:

• Сократили количество файлов: из 12 файлов сделали 1.
• Появилась структура и документация: статусы, настройка и навигация по компонентам, переход на фирменный шрифт СБЕРа, общая база всех компонентов, правила версионирования через Figma, стандарты контроля версий и другие необходимые гигиенические активности/
• Внедрили дизайн-токены и переменные. Дизайн-система 2.0 перешла на гибкую систему изменения любых переменных, включая шрифты, цвета, закругления и т. д. Кстати, о том, что такое дизайн-токены, можно почитать в статье нашего дизайнера «Что такое дизайн‑токены простыми словами».
• Внедрили подход по созданию единого mobile: создали единую мобильную библиотеку, которая сократит время на разработку и поможет в будущем оптимизировать любые изменения в iOS, Android и Webview.
• Отработали инклюзивность. Подошли к дизайн-системе 2.0 c соблюдением стандартов WCAG и ГОСТа: контрастность дизайн элементов для слабовидящих и пожилых, клавиатурное управление интерфейсом, визуальная фокусировка на элементах интерфейса, озвучка интерфейса и др.
• Синхронизировали все компоненты (в мобиле и вебе) с продуктовыми дизайнерами для внедрения новых компонентов дизайн-системы 2.0 в запланированный редизайн каждой продуктовой команды.
• Запланировали работы по синхронизации команды дизайн-системы и разработки, чтобы в короткие сроки сверстать новые компоненты и безболезненно перейти на них до начала общего редизайна.

Работ по новой дизайн-системе 2.0 у нас запланировано ещё много: проработать микроанимации в компонентах, проработать виброотклик, внедрить светлую и тёмную темы, создать компоненты виджетов с возможность собирать интерфейс как конструктор, создать и выкатить в stage, чтобы можно было в «живую» прокликать и просмотреть все компоненты, и другие дела. Но то, что я описал выше и что было сделано за эти 9 месяцев, позволило нам получить очень прочный фундамент, на котором в дальнейшем мы будем строить все наши интерфейсы и который можно гибко развивать и масштабировать.

Коммуникационный дизайн (ДО)

Из-за того, что отдел коммуникационного дизайна обслуживает весь Домклик и, по сути, является мини-студией с постоянным потоком абсолютно разных задач (2D, 3D, motion-дизайн, анимации, видеопроизводство, презентации, мерч, оформление мероприятий, визуализации, KV, иконки, баннеры, шаблоны и др/), то остановиться и сосредоточиться на глубокой проработке фундаментально важных вещей, таких как брендбук, руководства, подходы, общий стиль, направление и вектор развития у команды, не было времени. Шёл очень интенсивный поток задач, где во главу угла вставало «сделать в срок, любой ценой». Всё это очень сильно мешало выстроить сильный и запоминающийся визуальный образ как внутри компании, так и вне её. У бренда много разных точек контакта, много ограничений, много вызовов, и всё это нужно уметь систематизировать.

Коммуникационный дизайн (после 9 месяцев работы)

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

• собрали наследие текущих стратегий и бренд-платформы;
• проанализировали компанию: УТП, позиционирование, цели;
• проанализировали конкурентов: преимущества и недостатки;
• проанализировали целевую аудиторию: мотивация, барьеры, выводы;
• проанализировали визуальную составляющую Домклика и отдельно Сбер-руководства.

Так была положена работа над цифровым руководством по эксплуатации бренда. Почему цифровым? Потому, что порядком надоело получать брендбуки и другие руководства в PDF с пометкой «final», а собрав все файлы предыдущих руководств и брендбуков, которых было более 20, поняли, что нам нужен одно руководство на всю компанию, которое правит всеми и которое объединяет все отделы Домклика.

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

В описательную плоскость руководства у нас входят те самые разделы, которые задают направление всей компании. Это атрибуты (аудитория, рынок и конкуренты, ToV, стратегия компании и HR-культура) и платформа (миссия, преимущества, позиционирование, ценности и облако тегов). А в творческую входит всё то, на чём строятся принципы дизайна-продукта (логотип, шрифт, цвет, 2D- и 3D-принципы, бренд-дизайн, фото- и видеостиль, бренд-сигналы, UI/UX-принципы). Три столпа. Причём без наличия первых двух (атрибутов и платформы) невозможно по-настоящему цельно и с пониманием «как, зачем, для чего, для кого?» разработать третий (дизайн‑принципы).

В конечном итоге мы сформировали цифровое руководство по эксплуатации бренда и готовы раскатить его на всю компанию. Поставленная цель — разработать единые подходы для всех точек соприкосновения пользователя с брендом и связать единой логической нитью бренд-стратегию, идею и принципы с артефактами дизайна: 3D-иллюстрации, интерфейсы, иконки и т. д., — была выполнена. Кстати, отдельно, внутри коммуникационного отдела сформировали команду видео-продакшена, которая помогает нам с созданием шоуриллов, моушн графики, презентацией продуктов, интервью и другим видео-контентом. Результаты нашей работы по эпику «коммуникации» за 9 месяцев можно посмотреть в небольшом шоурилле ниже.

Опыт пользователя (ДО)

Как такового ДО и не было. В команде отсутствовало такое важное звено как «UX‑исследователь» и не было такого опыта. Исследования проводились либо самими дизайнерами, либо в продуктовых командах. Не было единой точки входа на исследования, как и держателя знаний по данной области.

Опыт пользователя (после 9 месяцев работы)

С учётом того, что мы готовились к редизайну, нам было важно понять, как работает (и как должен работать) продукт для наших пользователей, чтобы весь редизайн не скатился в re-skin (когда затрагивается только UI-часть, без UX). Был выделен отдел под исследования. В нём мы стараемся повысить экспертизу и показать важность UX-исследований и подхода Jobs to Be Done в компании. Кстати, статью про руководство по Jobs to Be Done и Desired Outcomes для дизайна интерфейсов можно почитать тут.

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

Во-вторых, мы начали углублённо анализировать рынок и что на нём происходит с точки зрения конкурентов, не только из РФ и не только прямых. На основе такой аналитики нас и рынка мы научились точечно выделять правильные гипотезы и вектор развития наших продуктов.

Во-третьих, в короткое время мы раскатали практику UX-исследований и смогли внедрить подход «сначала исследуем, потом дизайним» в наш запланированный редизайн.

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

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

Если было интересно, можно залететь к нам в коллективный телеграм-канал дизайнеров Домклик, там мы обмениваемся опытом, мыслями, крутыми подборками, идеями, и так далее. ✌