Ozon Tech Community Design Meetup

В Ozon более 150 дизайнеров (продуктовых, креативных, коммуникационных, бренда), десятки исследователей и не менее дюжины UX-редакторов. Эта команда работает над бесчисленным количеством продуктов, от больших до маленьких, чтобы наши пользователи становились чуточку счастливее.

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

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

Дисклеймер: в докладах может встречаться техническая жесть, понимание которой о̶т̶к̶р̶о̶е̶т̶ н̶о̶в̶ы̶е̶ ч̶а̶к̶р̶ы упростит общение с разработкой и ускорит Time To Market. Мы предупредили.

📅 17 февраля (пятница)
🕗 18:00

Программа встречи:

💬 12:04 Кирилл Семушин (Ozon), руководитель направления «Продуктовый дизайн и пользовательские исследования»
«Дизайн в Ozon»
У нас было 2 дизайн-системы, 150+ дизайнеров, отдел исследований, 2 крупных направления и десятки поменьше. Не то чтобы всё это было категорически необходимо в большом продукте, но если уж стремишься делать крутой маркетплейс, то к делу надо подходить серьёзно.
💬 35:46 Виктор Теплов (Ozon), старший продуктовый дизайнер в группе «Дизайн-система»
«Пилим Библу или Рефакторинг дизайн-системы»
-‎ Откуда берутся проблемы с производительностью,
- Как мы пересмотрели организацию библиотеки,
- Шоукейс дизайн-системы: что ты такое?
- Как облегчить компоненты, используя новые возможности Figma.
💬 1:24:41 Богдана Кибза (Ozon), руководитель группы «Дизайн-система»
«Дизайн-система ✕ SDUI: как мы собирали грабли»
Расскажем, как мы строили дизайн-систему в большом продукте, который постоянно меняется. Даже не так. Как мы набивали шишки и учились на собственном опыте.
Что такое Server Driven UI? Чем этот подход отличается от классической разработки? Причём тут вообще дизайн?! Забудьте на время о Figma и готовьтесь взглянуть на тему шире.
💬 2:35:20 Алексей Авдеев (Mish), CTO
«Как подружиться c фронтенд-разработчиком»
Передача дизайна в разработку — один из этапов пути до прода. Программисты, которые потом работают с этими макетами, замечают в них одни и те же ошибки. Эти ошибки замедляют разработку: заставляют переспрашивать, уточнять и переделывать. Часто это выливается в затянутые сроки, сорванные бюджеты и недовольство заказчика.
Ошибки легче исправить на ранних этапах. Разберём популярные проблемы с макетами и их решения.
💬 3:21:33 Евгений Антонов (Ozon), старший разработчик мобильных приложений в группе «Дизайн-система», Никита Новосёлов (Ozon), руководитель отдела дизайна «Опыт покупателя»
«Интерактив: разбор макетов глазами мобильного разработчика»
Встретились как-то разработчик и дизайнер… и разобрали макеты от гостей митапа.

[ЛидияКрапивина-зх]

Безумно интересная и полезная программа. Просмотрела все 4 часа залпом.

[OzonTech]

💬 12:04 Кирилл Семушин (Ozon), руководитель направления «Продуктовый дизайн и пользовательские исследования»
«Дизайн в Ozon»
💬 35:46 Виктор Теплов (Ozon), старший продуктовый дизайнер в группе «Дизайн-система»
«Пилим Библу или Рефакторинг дизайн-системы»
💬 1:24:41 Богдана Кибза (Ozon), руководитель группы «Дизайн-система»
«Дизайн-система ✕ SDUI: как мы собирали грабли»
💬 2:35:20 Алексей Авдеев (Mish), CTO
«Как подружиться c фронтенд-разработчиком»
💬 3:21:33 Евгений Антонов (Ozon), старший разработчик мобильных приложений в группе «Дизайн-система», Никита Новосёлов (Ozon), руководитель отдела дизайна «Опыт покупателя»
«Интерактив: разбор макетов глазами мобильного разработчика»

[yappix]

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

[OzonTech]

🗨 Егор Шугаев
Методология сборки компонентов в фигме, также просходит в коде? Как это мержится?
👺Виктор
Мы не можем полностью синхронизироваться с разработкой. Всегда остаются какие-то хаки и костыли. Но мы всё это оговариваем с фронтами в момент груминга компонента.

🗨 Victor Akinchits
Имхо, компонент, который можно «легально» детачить — overthinking
👺Виктор
Атомы и обёртки не теряют связь с либой. Разобранный стек — лишь автолейаут с нулевыми значениями.

🗨 Семён Вишневский
В продолжение вопроса про кнопку — как распил кнопки засинхронизирован с разработчиками?
👺Виктор
На уровне нейминговой конвенции. У нас Button-500, у них Button с параметром 500.

🗨 Александр Ерофеев
Как вы можете измерить успех рефакторинга дизайна системы в Figma и какие показатели следует использовать? Для каких компаний порекоменд использовать компонентный подход для создания с нуля?
👺Виктор
Разговор о большой ДС. Если у вас файл с компонентами шевелится — у вас не большая.

🗨 Владимир Омельченко
Виктор, таблицы у вас собираются построчно или колоночно?
👺Виктор
Из компонента ячейки собирается строка. Из строк — таблица.

🗨 Семён Вишневский
Например: на уровне сложного компонента из фантика. Может ли дизайнер натыкать из огромного количества настроек компонента такой стейт, который противоречит законам использования компонентов?
👺Виктор
Конечно может. Но в Showcase описаны валидные варианты.

🗨 Victor Akinchits
Какова корреляция ДС OZI в текущем состоянии с WCAG?
👺Виктор
Только по контрасту цветов до AA. И смотрим на APCA.

🗨 Amaliya M
Как вы обновляете статус компонента в фигме? Руками или есть автоматизация из джиры? Если компонент обновлен в макете, но пока не обновлен на проде, как относятся к такому тестировщики?
👺Виктор
Обновляем руками и головой. Тестировщик не должен пропускать такие компоненты. Дизайнер либо заменяет на старый, либо ждёт новый.

🗨 Vitaly Simanov
Как вы используете токены в своей системе? У вас описаны все компоненты токенами?
👺Виктор
У нас только базовые токены. Палитра, типографика, тени и т.д.

[OzonTech]

🗨 Silences ...
Сколько времени ушло на разработку и тест дизайн-системы?
👺Виктор
Если говорить про OZI, около года на разработку и тесты MVP-версии.

🗨 Кирилл Рыбалко
Сколько человек в команде на данный момент поддерживает дизайн-систему и сколько человек постоянно учавствовало в разработке
👺Виктор
Команда ДС (со стороны дизайна) — 4 человека на две ДС.

🗨 Anna Vrubel
А как быть с техническими ограничениями, если приходить к разработчикам только, когда дизайн уже готов? - мы так сделать не можем, нам бек это не присылает, все работает не так и т.д.
👺Виктор
Конечно ходить к разрабам нужно постоянно. Возможности бека, сущности участвующие в пороцессе, роли, ограничения, всё это нужно выяснить для успешного решения задачи.

🗨 Victory Vorozhtsova
Привет! как доработали дизайн систему, собирали из того, что было или пилили заново?
👺Виктор
OZI пилили с нуля. И в дизайне, и в коде.
В ходе рефакторинга в дизайне пилили с нуля новую версию, в коде правили по живому.

🗨 Dmitriy Teplov
Витя вперёд 🚀
👺Виктор
Спасибо, сын!

🗨 Anna Vrubel
Классная презентация! В каком инструменте делали?)
👺Виктор
Figma only

🗨 Denis Babaev
Виктор, а что насчёт "Pixso", уже задумывались о переходе в команде?
👺Виктор
Трогали, вертели, изучали. Но пока не рассматривали переход.

🗨 Alex TAV
Что будет если токен станет не валидным? всё сломается?
👺Виктор
По какой причине токен может сам стать не валидным не понятно. Мы храним их как указано на упаковке и сроки хранения не превышаем.

🗨 Denis Babaev
Много слухов о том, что очень скоро ИИ заменит дизайнеров до уровней Middle-Senior! Насколько вы уже используете ИИ в команде-компании? Джуны, чаще стали выходить курить?
👺Виктор (AI)
Боятся пока нечего. Боятся пока нечего.

🗨 Victory Vorozhtsova
А как именно простукивается система? просто кнопкой тыкаем к мастер компоненту и так пока не дойдем до атома?
👺Виктор
Открыл файл, принял изменения, опубликовал, открыл следующий в стеке.

🗨 Internet Warrior
У меня есть вопрос. А, что вы будуте делать, если сервера Фигмы упадут, стерутся, хакнул или что-то ещё случится. Что будете в этом случае делать? Или вы храните копии у себя на база данных?
👺Виктор
Копии мы конечно храним, но если сервера Figma упадут, копии не помогут. Это риски современного мира.

🗨 Alex TAV
Какими тестами покрываете? Кто отвечает за успешное прохождение тестов?
👺Виктор
Со стороны Figma следим чтобы не слетали оверрайды при изменении мастера. Со стороны кода всё покрыто скрин-тестами.

🗨 Alexander Bukin
Когда возникает потребность в новом кроссплатформенном компоненте, как он внедряется в ДС?
👺Виктор
OZI, на данном этапе развития, web-only

🗨 Nadezhda Vozdvizhenskaya
Привет! Какой принцип неймига токенов вы используете? Вы каждому элементу задаете свой токен или у вас общий формат? Как вы делите это по темам? Как вы выгружаете токены из фигмы?
👺Виктор
Если коротко, у нас только базовый слой токенов. Без семантического и без компонентного. Пользуемся Figma Tokens (Studio)

🗨 Дмитрий Овсяник
Как определились с названиями компонентов? Есть множество названий одной вещи, какое из них выбрать? Например: message \ notification
👺Виктор
Собираем статистику по другим ДС, обсуждаем с дизайнерами и с разработчиками, приходим к варианту, который всех устраивает и всем понятен.

🗨 Nadezhda Vozdvizhenskaya
Есть ли у вас самописные плагины? Как вы настроили выгрузку токенов на разные платформы? Как вы автоматизировали этот процесс?
👺Виктор
В дизайн-системе BX используем свой плагин для смены темы. Выгружаем через Figma Tokens (Studio). Дальше разработчики платформ парсят себе как им удобно. По API выгружаем иконки.

🗨 Семён Вишневский
Зачем распилили компоненты на уровне параметров? На примере Button
👺Виктор
Чтобы сделать их легче.

🗨 Alex TAV
Что было самым сложным в рефакторинге? Расскажите про факап?
👺Виктор
Не тюнить каждый пиксель и не дёргать разработчиков по каждой мелочи. Не совсем факап, но тюнинг инпутов привёл к мажорному обновлению библиотеки в коде.

[nacpunk]

Доклады разработчиков про технические детали (из доклада Богданы):

[alinna]

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