Всем привет, я Матвей Правосудов, старший продуктовый дизайнер ВКонтакте. Ранее мы делились нашей системой VKUI и описывали подход к оформлению приложения для iPad.

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

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

Департамент дизайна ВКонтакте вне работы

Всё началось с онбординга

В марте 2020 года Команда ВКонтакте ушла на удалёнку. Департамент дизайна начал адаптироваться: стали по максимуму использовать Figma, перевели еженедельное дизайн-демо в онлайн и участили созвоны, чтобы не терять живое общение.

Летом мы планировали взять стажёра в команду дизайна, а в команду e-commerce параллельно присоединялась дизайнерка. Нам впервые предстояло онбордить дизайнеров в режиме онлайн. В офисе всё было проще — настроили ноут, получили доступы, посмотрели на файлики, сходили за чаем и начали пилить задачу. Все вопросы разбирали сразу — достаточно было подъехать на стуле. С удалённой работой всё сложнее. Есть две большие проблемы:

1. Много знаний живёт в головах разных дизайнеров. Это так называемый bus-фактор — вряд ли наставник сможет сразу ответить на все вопросы новичка. В офисе дизайнеры сидят в одной комнате, поэтому ответ находится быстро.

2. Онбординг всегда проходил хаотично. У наставников не было понятного плана, что нужно сделать новичку и им самим, — вопросы решались по мере поступления.

К тому моменту в нашем Dropbox Paper уже было несколько документов с инструкциями по работе в Figma от Миши и Вани. Ещё была статья с серьёзным названием «Регламент для новичка» от Паши. Я предложил её переписать — добавить информацию про доступы и инструменты, ближе познакомить с командой и рабочим процессом.

Одна из первых версий онбординга для новичка

С этой статьёй мы успешно приняли на работу стажёрку и дизайнерку. Конечно, в тексте не оказалось всех ответов на возникающие вопросы, поэтому в ходе онбординга мы собирали обратную связь и улучшали документ. Все материалы объединили в дизайн-библиотеку, чтобы у сотрудников была единая точка входа в статьи и руководства. Так «Канону» было положено начало.

Сценарии и структура

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

Со временем у нас появилось много руководств, в которых легко запутаться. Несколько гайдов по Figma, процессы, документы, инструкции — ужас. Все материалы получились полезными, но ими было сложно пользоваться.

Мы посмотрели на «Канон» как на продукт, у которого будут пользователи (дизайнеры) со своими сценариями, и выделили два самых популярных:

Я новичок и хочу понять, что вообще происходит. Нужен необходимый минимум информации, чтобы познакомиться с контекстом и приступить к первой задаче.

У меня конкретный запрос: как сделать иконку, заказать иллюстрацию, провести исследование? Возможно, человек никогда не создавал анимации, и у нас есть понятный гайд, как решить эту задачу.

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

Актуальная версия главной страницы «Канона»

Кроме онбординга и гайдов, мы систематизируем и лучшие практики разных команд, например:

созвоны с менеджерами и дизайнерами для обмена новостями;
«непродуктовый» день — когда ребята не работают с продуктовыми командами и занимаются другими задачами;
брейнштормы;
наставничество.

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

Как улучшаем

Иногда в процессах и инструментах что-то меняется. Например, ещё пару месяцев назад дизайнеры сами выгружали и готовили иконки для разработчиков под каждую платформу. Теперь мы приблизились к тому, что нужно выгружать всего одну иконку в SVG. Процесс изменился, и мы обновили документ про иконки.

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

Самые честные люди — это новенькие дизайнеры во время испытательного срока.

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

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

Шаблон персонального чек-листа для новичка. Работает ещё и для наставников: сразу понятен список задач на весь испытательный срок

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

Что нам это дало

«Канон» стал неотъемлемой частью онбординга, которая упрощает многие бытовые моменты. Сейчас к нам уже почти не приходят с вопросами, раскрытыми в доке.

Главный результат — новички быстро погружаются в работу. Это очень важная для нас метрика — чем меньше времени занимает онбординг, тем больше сил остаётся на задачи. Так сохраняется импульс и интерес к работе с самых первых дней в компании.

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

Посмотреть своими глазами

Хватит слов! Вот публичная версия «Канона». Она, конечно, немного урезанная — всю внутрянку показать не можем. Чтобы увидеть все статьи и разделы, приходите к нам работать

На что обратить особое внимание

Загляните в «Принципы проектирования продуктов». Это ДНК нашего подхода к дизайну и своеобразный мостик между дизайнерами и продактами, который помогает создавать качественные интерфейсы. Почитайте статьи в разделе «Как?», посмотрите «Лучшие практики». И давайте обмениваться опытом — делитесь своими подходами и лайфхаками в комментариях!

Чем «Канон» может быть вам полезен

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

Публикуем «Канон» — библиотеку знаний дизайнеров ВКонтакте