Видео со стрима «Слияние дизайн-систем: опыт Ozon»

17 ноября 2021 года состоялся первый русскоязычный стрим Figma, на котором я был гостем. В течение часа я делился нашим опытом дизайн-систем в Ozon. Выкладываю видео:

youtu.be/SunT0K5ULH4

В видео рассказал:

1. О трёх элементах, из которых состоит любая прочная дизайн-система: UI-кит, фронт-либа и документация. Что будет, если один из них убрать?

2. Над какими проектами работают дизайнеры в Ozon, а также какие у них потребности к дизайн-системам. Всего у нас более 80 продуктовых дизайнеров и около 15 команд.

3. Как выглядит типичный пайплайн работы дизайнеров и фронтов на небольшом проекте и почему в крупных компаниях он становится неэффективным.

4. О двух возможных стратегиях слияния: поглощении и создании новой дизайн-системы, плюсы и минусы обоих стратегий. Примеры слияния, которое я проводил с иконками Ozon, а также первая попытка внедрить единую дизайн-систему веб-проектов.

5. Сложности слияния на равных и переговоры, а также о приходе руководителя всего продуктового дизайна Ozon. О важности лидера дизайна.

6. Ценности нашей новой дизайн-системы для веб-проектов: источник правды в коде, токенизация, витрина компонентов.

7. Команда дизайн-системы. Какой был процесс создания. Итоги полугода работы сборной команды дизайн-системы из 8 человек.

8. Немного цифр: на выходе 40 готовых компонентов, кит весом в 700 мб, 400 тысяч слоёв и первый боевой проект, который использует новую систему. О наших планах переезда всех внутренних фронтовых систем.

Не пропусти презентацию с этого выступления, она выложена в Figma Community.

Это уникальный полезнейший контент. Я очень рад, что Ozon настолько открытая компания, что я смог поделиться нашими подходами в мельчайших деталях и рассказать об ошибках. Обычно такое закрывают под NDA, не разбираясь, потому что «как бы чего не вышло».

#для_профи #дизайн_системы #Figma #Ozon

#ui_review
1. Разбор лендинга про игровой сервер

Попробую быстрый формат дизайн-ревью.

В @designchat2 пришёл молодой парень, который попросил оценить его дизайн лендинга в Фигме. Я и другие участники чата оставили ему полезных комментов.

Дизайн в Фигме с комментами →

Смотреть лучше с десктопа. Чтобы сделать комменты видимыми, нажми C. Работа вполне показательная и ошибки типичные, видел их сотни раз в портфолио других. Если занимаешься лендингами, заходи почитать фидбэк, пока его не свернули. И да, лендинги продуктовым дизайнерам делать уныло, но почему бы не размяться.

@slashdesigner #первые_шаги #лендинги

Проект #UI_ревью: разбор твоего дизайна интерфейсов

Я хочу создать сообщество, похожее по духу на @figmachat, где люди помогают друг другу в рамках заданной концепции.

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

Все ценные комментарии из этого файла были причёсаны и перенесены в финальный файл разбора, который я выложил в Figma Community. Вот что получилось:

UI Review #1. Утянуть разбор к себе →

Читать разборы и исправлять ошибки — прекрасный способ прокачиваться в дизайне через настоящую ежедневную практику, которая максимально близка к опыту работы с ментором в агентстве или IT-компании. Это гораздо полезнее, чем смотреть случайные обучалки по дизайну на Ютюбе и делать шоты на Дрибле в пустоту.

UI Review специализируется на продуктовом дизайне и проектировании для экранов. Желательно присылать работы, которые требуют нашей экспертизы именно в этих темах, а не только нуждаются в оценке визуального дизайна. Мы не про маркетинговый дизайн: лендинги, брендинг, баннеры и полиграфию, а про продуктовый и интерфейсный: дашборды, B2B, виджеты, приложения, сложные интерфейсные механики и флоу.

Выбранный мной формат ревью предполагает техническую работу по сохранению комментариев, которую будет делать мой помощник. Она требует оплаты, поэтому, получить разбор можно будет за скромные 500 ₽ (чуть больше 6$). Мы вышлем инструкцию для оплаты, когда подтвердим, что работа попадёт на разбор. Сами комментарии в разборах мы оставляем бесплатно.

После ревью подавший работу может прислать исправленную версию и она будет добавлена в уже опубликованный выпуск ревью в Figma Community. Вот это будет вообще мечта.

Чтобы принять участие в UI Review, оставляй заявку в группе @uireview.

Чтобы получать уведомления о новых разборах и комментировать работы, вступай в канал @uireviewers.

Чтобы читать ревью других, оставайся на @slashdesigner, все ревью будут выкладываться в рубрике #ui_review.

Ссылки по теме:
• Правила попадания на ревью и процесс
• Требования к работам
• Какие выгоды получают авторы?
• Правила ревью для авторов

#первые_шаги

Правило семи

У любого человека есть ограничение кратковременной памяти, которое было описано учёным Джорджем Миллером в 1956 году. Этот эффект называют «кошельком Миллера» и о нём есть статья в Википедии: Магическое число семь плюс-минус два.

Эффект заключается в том, что мы можем какое-то время держать в голове около 7 объектов. Кто-то на пару больше, кто-то меньше. Если мы видим список из 7 пунктов, велики шансы, что мы сможем воспроизвести его, ничего не забыв.

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

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

Если в меню больше 7 пунктов, с продуктовой точки зрения нужно пересмотреть навигацию. Но есть и тёмная сторона: маркетинг, который хочет заработать денег. Маркетинг обычно хочет впихнуть в продукт как можно больше пунктов меню, как можно больше настроек и мигающих баннеров, заполнить *пользой* максимум места. И иногда маркетинг стоит слушаться в ущерб правилу семи, потому что польза важнее правил. Ну и что, что покупатели не запомнят всё меню из 14 пунктов в крупном гипермаркете? Зато они дадут большой выбор и повысят шансы на переход.

Я вдохновился на этот пост, когда наткнулся на длинный список, в котором можно настроить 152 типа уведомлений от LinkedIn.

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

Продукт трепыхается и пытается решить непосильную задачу: сделать один свитч на всё не разрешают, группировка уже не спасает, вёрстка получается невыразительной и раздутой. Но комичным этот макет делает именно визуальное пренебрежение правилом семи. Когда мы взаимодействуем с интерфейсом, мы взвешиваем, нужно ли инвестировать в него время и какую пользу это принесёт в итоге. Есть предел, после которого мы отказываемся от идеи пройти интерфейс до конца и находим себе более полезное занятие, чем анализ каждой из этих настроек. Тогда мы просто настраиваем фильтр, который с порога автоматически удаляет любые письма от LinkedIn и блокируем уведомления на уровне ОС.

#первые_шаги #UX

#ui_ревью
2. Разбор лендинга для финсервиса Monetha

В этом выпуске разберём ещё один лендинг. Основная его проблема — расплывчатые формулировки и отсутствие осязаемой выгоды.

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

Внутри:
- На что менять немодных флэт-людей
- Какой ширины должна быть полоса набора
- Как навести порядок в слоях

Файл в Figma Community →
Его можно скопировать себе в Drafts, все комментарии на странице «Ревью»

Больше не принимаю лендинги. Хочется поразбирать что-то более сложное: интерфейсы, сервисы и приложения.

Заявки на разборы принимаю в группе @uireview. О формате рубрики

@slashdesigner #первые_шаги

Метрики для дизайнера

С наступившим! Плавно выходим из новогодней спячки и возвращаемся к дизайну.

Моя коллега Саша Савельева — очень крутой продуктовый дизайнер из Ozon. Она одна из немногих знакомых мне спецов, кто применяет на практике метрики и делится своими знаниями.

Эта тема недостаточно освещена в русскоязычном комьюнити, поэтому Саша написала статью для /designer:

slashdesigner.ru/ux/retention

Тезисы из статьи:

1. Метрики — хороший аргумент в спорах, поскольку основаны на фактах.

2. Метрики дают проверить эффективность дизайн-решений.

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

4. Ключевые показатели для продуктового дизайнера — конверсия и retention (возвращаемость).

5. Лучше иметь 10 пользователей, которые возвращаются в продукт через какое-то время, чем 100, которые не возвращающихся.

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

7. Убедить команду, что работа с цифрами важна, очень сложно, но необходимо.

8. Надо подключить систему аналитики и ввести замеры в еженедельную рутину.

Кстати, Саша завела канал @delo_v_designe. Подписывайся, если интересуешься темой количественной аналитики.

#для_профи #метрики

Бэкапимся

Если вы работаете в крупных российских компаниях, особенно, госбанках, качайте ваши макеты в .fig, если ещё этого не сделали.

Файлы FigJam сохраняются через меню File внутри Фигмы.

Figma может в любой момент закрыть корпоративные аккаунты на базе доменов в зоне RU, чтобы не нарушать требования о санкциях. Тогда продолжать работать над макетами получится только с личных акков через VPN. Добро пожаловать в дивный новый мир, где Россия — страна-изгой. Не закрывайте глаза на происходящее и читайте новости!

#для_профи

Мы прекращаем работу на неопределённый срок

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

Нет никаких эмоциональных сил отвечать на вопросы по Фигме и параллельно убирать сообщения с агитацией и негативом.

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

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

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

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

Я уехал из России и перезапускаю канал

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

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

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

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

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

IT-индустрия по западному образцу предполагает использование глобальных инструментов вроде сервисов Гугла, Амазона, Майкрософта, Фигмы, Миро и Ноушна, а также десятков других продуктов с офисами в США и Европе. По моему мнению, в России сама отрасль такого IT плавно заканчивается. Теперь любая западная компания, которая остаётся на российском рынке, сталкивается с репутационными рисками. По этой причине старая инфраструктура будет и дальше разваливаться, поскольку всё больше компаний будут уходить.

У дизайнеров в России есть два пути: уезжать из страны или остаться. Во втором варианте участвовать в постепенном выстраивании всей локальной отечественной IT-инфраструктуры с нуля. Это титаническая работа, которая может занять годы.

Я планирую добавить в канал новые темы, в первую очередь про работу дизайнера за границей. Также я делал курс про портфолио продуктового дизайнера и решил выкладывать этот контент в формате постов бесплатно. UPD: проект курса пока заморожен.

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

#стать_лидом №7. Стратегии взаимодействия

Когда-то читал книгу «В команде с врагом». В ней нашёл ценную классификацию из четырёх возможных стратегий в ситуации двустороннего конфликта.

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

Бороться — использовать силовой путь решения, когда перевес на нашей стороне.

Избегать — бежать в безопасное место, где другая сторона не может оказать на нас влияние.

Торговаться — отстаивать свои интересы путём переговоров, идти на компромиссы там, где можем.

Принять — полностью согласиться с противником или даже перейти на его сторону, играть по его правилам.

Читать:
slashdesigner.ru/lead/strategies

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

Велкам в комментарии, буду рад вопросам о выборе стратегий.

#для_профи

Санкции: как дизайнеры в России могут решить проблемы с инструментами

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

Читать:
slashdesigner.ru/emigrate/sanctions

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

1. Заменить платёжную систему на Union Pay
2. Сделать карту в иностранном банке
3. Можно совершить платёж с иностранной карты
4. Переходить на ещё не заблокированные аналоги
5. Пиратить софт, если он работает локально
6. Дождаться, пока появится российский аналог нужного продукта, поучаствовать в его создании
7. Если ничего не подошло, эмигрировать

Знаешь другие варианты? Давай обсудим в комментариях.

#санкции

1. Relocate Info: вакансии, полезные контакты

Хочу порекомендовать канал @relocate_info. Не знаком с авторами и это не реклама, но вижу в нём много ценной информации, связанной с переездом и поиском работы в IT. Вот, например, подборка ссылок про работу на Кипре. А вот запись стрима про визу O1, на которую в США нет квот.

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


2. youtube.com/c/NewHR: регулярные трансляции с разборами резюме от кадрового агентства NewHR

5 апреля будет стрим c Анной Наумовой, PM из Apple. В прямом эфире она будет разбирать резюме продакт менеджеров. Держим в голове, что хороший продуктовый дизайнер — без пяти минут PM.

Вот запись предыдущего стрима на аналогичную тему.


3. glassdoor.com
Флагманский сервис для поиска IT-работы в разных странах. Как Хедхантер, только глобальный. Можно узнать уровень зарплат в разных городах, а также рейтинг компаний и отзывы сотрудников.

#для_профи #эмиграция

Редактор Figura: шутка?

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

Ему даже выбрали смутно узнаваемое название — Figura. Первый вариант был совсем неудачный: Zamaket, по аналогии с лозунгом «ZaНаших».

Пока сложновато определить, шутят ли авторы, или просто плохо подготовились к анонсу. На сегодня в сухом остатке мы видим новый канал, который был создан две недели назад, а также лендосик figura.one на Тильде, на котором идёт сбор лидов.

Задаёмся вопросом, кто сделал громкое заявление. В меню пункт «Команда» вообще не кликается. Но на макетах мы видим имя автора: Илья Сластен. Беглый поиск даёт нам портфолио дизайнера из Калининграда, в био которого в Телеграме упоминается Фигура.

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

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

Вывезти такой проект может только мощная команда под крылом крупной корпорации вроде Яндекса, VK или Сбера, либо стартап с инвестициями и опытным менеджером во главе. Фигма — мегасложный продукт, у него колоссальная кодовая база и годы развития за плечами. Напомню, что основатель Дилан Филд со своей командой развивал продукт с 2012 в условиях бизнес-акселератора, а уже в 2013 поднял больше 3 млн. долларов инвестиций.

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

Спасибо Designdealer за наводку.

UPD: после выхода моего поста ссылка на VK была оперативно исправлена, и я вырезал абзац про это.

#Figura #Figma

Клавиши для ускорения видео

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

После этого смотреть обучающие видео на оригинальной скорости не понравится, всё будет казаться медленным. Я всё смотрю на 1.25–1.5.

Бонус: клавиша F включает и отключает полноэкранный режим. Больше полезных клавиш — в комментариях.

#первые_шаги #горячие_клавиши