Growth и Marketplace — UI-разработка для крупного цифрового продукта
С октября 2021 года по февраль 2024 года я работал над picsart.com в роли Senior UI Engineer — сначала в команде Growth, затем в Marketplace.
Моя работа: интеграция дизайн-системы Picsart, создание недостающих компонентов, внедрение поддержки языков с письмом справа налево с нуля и значительная часть задач по доступности в зоне моей ответственности.
picsart.com — масштабная продуктовая платформа, над которой одновременно работают многие команды. Моя задача — сохранять единообразие, доступность и готовность UI в зоне ответственности команды для всех поддерживаемых языков.
На сайте Picsart представлены разные продукты и типы страниц:
Над picsart.com одновременно работают многие команды. В каждой есть человек, отвечающий за интеграцию Design System. В моей команде за это отвечал я.
Я был основным UI-разработчиком команды и работал преимущественно над сайтом Picsart:
Отдельный продукт команды Growth, в котором пользователи создают визуальный контент и материалы для соцсетей и адаптируют их под форматы разных платформ — текст, изображения, заголовки и эмодзи в одном редакторе.
Как основной UI-разработчик команды Growth я реализовал его интерфейс с помощью React, HTML/CSS, JSS и Styled Components.
В своей команде я был основным ответственным за UI и интеграцию дизайн-системы на picsart.com и в отдельных продуктовых направлениях:
Общие компоненты предоставляла команда Design System.
Если нужного решения не было, я создавал недостающие компоненты для нашего продуктового направления, согласуя их с системой, чтобы интерфейс оставался целостным.
В зоне своей ответственности я с нуля реализовал многоязычность, включая RTL/LTR.
Вместо того чтобы исправлять значения left и right на каждой странице, я перестроил логику направления вёрстки на основе логических CSS-свойств — inline и block, start и end. Теперь при смене направления оно применяется ко всей структуре.
Когда я начал, доступность была реализована лишь частично. Я выполнил значительную часть задач по внедрению WCAG в своей зоне ответственности, закладывая требования в сами компоненты, а не добавляя их позже.
Проверял каждый компонент на разных разрешениях и в разных браузерах, чтобы страницы вели себя одинаково для всех посетителей.
В команде Growth я оптимизировал страницы Discovery и их кодовую базу.
Скорость страниц измерялась до и после изменений; конкретные показатели здесь не публикуются.
Как общая дизайн-система внедрялась на страницах моей зоны ответственности.
Использовать компоненты дизайн-системы везде, где они подходят; создавать новые только при реальной необходимости.
Новые компоненты используют общие токены, отступы и состояния.
Логические CSS-свойства вместо жёстких left и right, чтобы RTL поддерживался на уровне структуры.
Доступность учитывается в каждом компоненте, а не добавляется в конце.
Каждый компонент проверяется на разных экранах и в разных браузерах.
Пять направлений работы и подход к каждому.
При переключении страницы с письма слева направо на письмо справа налево обычно приходится искать каждое значение left и right.
Я перестроил логику направления на основе CSS logical properties:
Теперь смена направления применяется ко всей структуре, а не исправляется отдельно на каждой странице.
Общие компоненты от команды Design System интегрированы в:
Расположение компонентов определялось потребностями продукта; за согласованность между направлениями в своей команде отвечал я.
Некоторых решений для Marketplace не было в общей системе. Для них я создавал компоненты своей команды, которые:
При минимальной исходной поддержке доступности она стала частью компонентов в моей зоне ответственности, а не поздней правкой. Значительную часть этой работы по WCAG я выполнил сам.
Отдельный продукт команды Growth для создания визуального контента и публикаций в соцсетях с адаптацией под форматы разных платформ. Как основной UI-разработчик команды я реализовал его интерфейс на React, HTML/CSS, JSS и Styled Components.
Расскажите, что Вы создаёте. Я отвечу в течение двух рабочих дней.
Новый сайт, интерфейс продукта, дизайн-система или улучшение существующего решения.
Предыдущий и следующий проекты.
Eng
Հայ
