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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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