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

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

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

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

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

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

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

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

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

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

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

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

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

Первая версия дизайн-библиотеки

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

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

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

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

  • 👨‍🎓Я новичок и хочу понять, что вообще происходит. Нужен необходимый минимум информации, чтобы познакомиться с контекстом и приступить к первой задаче.
  • 🤔У меня конкретный запрос: как сделать иконку, заказать иллюстрацию, провести исследование? Возможно, человек никогда не создавал анимации, и у нас есть понятный гайд, как решить эту задачу.

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

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

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

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

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

Как улучшаем

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

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

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

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

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

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

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

Раздел про анимации

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

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

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

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

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

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

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

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

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

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

(Это мы)
0
41 комментарий
Написать комментарий...
Artemy Dartsov
Cегодня нас уже 28

И что ни один из 28 дизайнеров не сказал, что прятать в приложении популярный раздел Список сообществ и Последние сообщества под всплывающую панель с дополнительным нажатием это плохая идея?

Как и замена кнопки Уведомлений на Тиктоки в нижней панели до этого.

Ответить
Развернуть ветку
Vladimir Mirolubow

Тоже самое с музыкой - нахрена мне предлагать при входе каждый раз раздел шлако-рекомендаций, вместо перехода на таб "Моя музыка"? 
Я понимаю, что им похеру и шлак надо продвигать как-то, но BLEAT, ведь можно стейты последние запоминать, не? И где тут каноны? 
Я не говорю уже про невозможность отключить ebanie клипы, содержание которых отталкивает от использования социалки всё больше и больше. Впрочем, давно уже нашел спасение в спотифае, реддите и твиттере.

Ответить
Развернуть ветку
Artemy Dartsov

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

Ответить
Развернуть ветку
Борат Язь

Все 0.0001% пользователей, которые воспользуются этой возможностью.

Ответить
Развернуть ветку
Борат Язь

При чем тут дизайнеры? Продакт решил так. А решил так, чтобы продвигать свой клон тик-тока. Цель поставлена, KPI надо растить.

Ответить
Развернуть ветку
Alex Martov

Добавили ленту новостей "a la" Яндекс Дзен. В какую же сраку превратился ВК :( Дизайнеры молодцы ребята, многое смотрю в их гайдах, спасибо что делитесь. Манагеры конечно же уничтожают продукт, убери ВК пиратский контент, как ему придет конец.

Ответить
Развернуть ветку
Reny

Вот концепт (на основе другого концепта), но там такая же идея с разделением сервисов и меню навигации.

Ответить
Развернуть ветку
Виктор Овчаров

Стажерка... Ну ок... Дизайнерка?... 😂🤣😂
Ради пары одобрений от особо упоротых феменисток и ЛГБТ так обосрать русский язык... 🤨
Днище полное, Яша... 😔

Ответить
Развернуть ветку
Ксюша Анфимова

Сразу видно, что правил русского языка вы не знаете

Ответить
Развернуть ветку
Григорий Клюшников

Какая адовая бюрократия, господи. Это уже даже не смешно.

Ответить
Развернуть ветку
Иван Касаткин

Абсолютно любая новость про ВК: *выходит*
Гриша: АААААААААААААА!!!!

Ответить
Развернуть ветку
Павел Князев

Ну какая же это бюрократия?

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

Респект ребятам, это монументальная работа и хорошая база знаний для любого дизайнера.

Ответить
Развернуть ветку
Григорий Клюшников

Так а толку от этой работы, если продукт только хуже становится? Кажется, если бы последние несколько лет в ВК не работал никто кроме сисадминов, поддерживающих сервера в работоспособном состоянии, он был бы лучше.

Кстати, а что делают дизайнеры, когда всё уже задизайнено? И зачем их целых 28, откуда столько работы берётся в готовом продукте?

Ответить
Развернуть ветку
S.Z

В итоге по теме Канона ничего не написал, ушёл в дефолтное обсирание вк. Вопрос, нахрена ты им вообще пользуешься

Ответить
Развернуть ветку
Григорий Клюшников

Потому что пока больше нечем. Но я надеюсь это исправить своим проектом.

Ответить
Развернуть ветку
S.Z

А зачем себя мучить? Я не пользуюсь и не мучаюсь. С одноклассниками переписываться?

Ответить
Развернуть ветку
Григорий Клюшников

Нет, а чем пользоваться вместо ВК? Инстаграмом? Он ещё хуже. Фейсбуком? Тем более. Простите, но у меня нет жизни, без соцсетей я вообще кукухой поеду.

Ответить
Развернуть ветку
S.Z

А че ты там делаешь-то в этом вк

Upd. Все, понял вопросов нету

Ответить
Развернуть ветку
Эбдул Эшотович

Эмм. Я уверен что есть куда больше соцсетей, чем ты перечислил.

Ответить
Развернуть ветку
Yaroslav Tugolukovskiy

И тем не менее, новичкам в дизайне и разработке будет полезно почитать о процессах, например. Там все довольно неплохо описано. 

Ответить
Развернуть ветку
Владислав Рогов

Статью наверное тоже по канонам писали)

Ответить
Развернуть ветку
Ипполит Воробьянинов

Все компиляторы сделаны с использованием компиляторов...

Ответить
Развернуть ветку
Иван Барышев

Гриш папей таблеток

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Vyacheslav Rubanyuk

Спасибо за статью.
Расскажите, пожалуйста, как дизайнеры балансируют между желанием создать удобный интерфейс и задачами от начальников по внедрению/продвижению того, что неудобно/неинтересно, но нужно для бизнеса.

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

Ответить
Развернуть ветку
Yes, Your Grace
между желанием создать удобный интерфейс и задачами от начальников по внедрению/продвижению

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

Ответить
Развернуть ветку
Евгений Маринов

году в 2006-2007, будучи мелким шкетом каким-то макаром в вопросах и ответах мэйл.ру наткнулся на программиста Руслана, который тогда пилил java mail.ru агент. Я описывал проблему, он мне ответил и предложил потестировать новый билд. так на добровольных началах я ему помогал где-то с год отлавливать баги. причем плодотворненько так правили. а вот потом началось. сначала его заставили отчитываться каждый день за то, что он делает. потом ко мне приставили менеджера, у которого и без меня работы было дофига и срок исправления бага с 30-60 минут растянулся до 1-2х дней. ну а вишенкой на торте стали постоянные извинения программиста, который в течение месяцев отписывался в стиле "Да-да, я помню про эти баги, но у меня от начальства приоритет на внедрение какой-то лабуды из "моего мира"". так за 3-4 месяца из условных 50 багов было исправлено штук 5-10 и на сим я распрощался с тестированием. Подозреваю что ничерта не изменилось и до сих пор думаю, что 1 индивид в разы продуктивнее, чем индивид с вышестоящим начальством

Ответить
Развернуть ветку
Павел Коган

Вы в 21 году придумали внутреннюю вики и ramp up план?

Ответить
Развернуть ветку
Огурец Молодец

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

Ответить
Развернуть ветку
Михаил Лихачёв

Именно поэтому Канон не является методичкой по принятию решений и списком устоявшихся правил дизайна, а всего лишь отвечает на вопросы по процессам в команде

Мы как раз поэтому и не пишем гайдлайны по компонентам в том же объёме, в каком делают Apple (Human Interface Guidelines) и Material Design. Хоть и описание некоторых вещей упростило бы нам работу, позволяя не отвечать на одни и те же вопросы, но они бы создавали рамки дизайнерам, заставляя принимать правила как данность

С другой стороны, в таких гайдах всегда можно добавить пометочку, что это всего лишь рекомендация, и что для каждого правила существует исключение 🙃

Ответить
Развернуть ветку
Ludmila Mikhailova

Интересно, думала, что вконтакте гораздо раньше к этому пришли

Ответить
Развернуть ветку
Михаил Лихачёв

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

Потребность и потенциальную пользу начали ощущать при переходе на удалёнку в марте год назад и при росте команды 

Ответить
Развернуть ветку
Ann Partovi

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

Не знаю, миф это или нет, но психологически мы способны держать в голове одновременно не более 3-5 объектов, а все эти супермусорные подменю действительно вызывают большие вопросы. Рассуждаю с дивана как пользователь, но так это выглядит для меня - руководству хочется урвать по всем направлениям, но разделять и властвовать не докумекало. В том и суть эволюции, телеграм, все дела. Чисто с эргономичной точки зрения мне удобен телеграм как ничто другое, почти все действия модно делать одной рукой, нет огромного меню, агрессивно-пассивной рекламы и навязывания подписки, но это уже вопрос не к вам. 

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

Ответить
Развернуть ветку
Гриша Булыжников

28??? 28 человек не могут сделать приличный дизайн?? Пздц..

Ответить
Развернуть ветку
Марсель Исмагилов

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

Ответить
Развернуть ветку
prosto.vasilich

Канонка!!! Канонка где???!!!1!!1!! Негоже в такой прогрессивной команде дизайнеркам и стажеркам без канонки то онбордить.

Ответить
Развернуть ветку
Oleg Dubovitskiy

Я хоть и не дизайнер и не дизайнеровод, но почитал и это полезно. Так можно оформить онбординг всех сотрудников

Ответить
Развернуть ветку
Bullshit detector

А когда вы деньги зарабатываете для компании?))

Давайте я переведу на русский фрагмент статьи за вас.

Мой вариант:
Кроме инструкций, в которые можно вставить фио, чтобы назвать это модным онбордингом, мы обязательно тратим рабочее оплаичваемое время на:
Общение на посторонние темы с коллегами
День в неделю на неключевые непродуктовые задачи
Отдельно собираемся подумать все вместе, хотя как? Если это все чаще встреча онлайн))
Наставничество, чтобы 2 сотрудника тратили время, а не 1. Наш онбординг не справляется с задачей обучения новичков на 100 процентов, нужен еще наставник. Благодаря такому подходу мы не успеваем выделять время на ключевые задачи с примерно одинаковой скоростью в компании.

А вот как было у вас:

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

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Юлия Антипова

Какие молодцы! Классная штука 👍 Утащу к себе.

Ответить
Развернуть ветку
Антон Миронов

Тащить из Dropbox это адский UX

Ответить
Развернуть ветку
Евгений Голубев

"описывали подход к оформлению приложения" - это то, где 3й год не исправили говно которое сами признали и молчите на очевидные вопросы?)

Ответить
Развернуть ветку
Kassandra

Так, уже 2024, а вк все такой же упоротый и неудобный. Мне понадобилось 5 мин, а это много, чтобы найти нужную вкладку, вы там точно профи своего дела? Вижу что нет. Вк неудобен, тяжел, захожу раз в пару месяцев только чтоб в личку администраторов города кляузу подать.

Ответить
Развернуть ветку
38 комментариев
Раскрывать всегда