Дизайн-система для B2C
white-label-продуктов
по продаже билетов

Погружение в задачу

Бизнес-проблемой был устаревший и разношёрстный дизайн на всех платформах. Это было заметно как C-level-руководителям, так и нашим клиентам. Именно с такой формулировкой задача попала ко мне. Я начал изучать вопрос, общаться с продакт-менеджером, разработчиками и ключевыми сотрудниками, чтобы выявить более глубинные проблемы людей, непосредственно работающих над продуктами.

Что обнаружил

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

Решение

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

Variables

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

Базовые компоненты

На самом деле поддерживать все нововведения Figma достаточно тяжело, иногда приходится перерабатывать большую часть компонентов. На данный момент DS поддерживает всё, кроме Slots, вышедших совсем недавно, но вместо них мы успешно используем старый метод с так называемыми Swap-блоками. Но на Slots я продолжаю засматриваться.

Базовые блоки

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

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

Результаты

За 4 года развития дизайн-системы скорость доставки фичей возросла на 35% за счёт того, что дизайнеры и разработчики используют унифицированные компоненты сразу на нескольких платформах. Считали и сравнивали с процессниками по времени, затраченному на задачи из Jira. Кроме того, улучшилось не только качество UI, но и UX, что отмечали респонденты-клиенты при сборе ОС. Благодаря этому NPS вырос на 9 пунктов — до 92. Уровень проникновения составляет примерно 75%, но, думаю, в реале меньше, поскольку сейчас активная фаза перевода киоска самообслуживания на новую ДС.