Mara UI
Контекст продукта
Mara UI — внутренняя дизайн-система компании Mediatech, покрывающая все продукты: от мультиплатформенных стриминговых приложений до лендингов и внутренних инструментов. Используется в дизайне и фронтенд-разработке одновременно.
Контекст продукта
Mara UI — внутренняя дизайн-система компании Mediatech, покрывающая все продукты: от мультиплатформенных стриминговых приложений до лендингов и внутренних инструментов. Используется в дизайне и фронтенд-разработке одновременно.
Моя роль
Ведущий дизайнер и инициатор. Придумал систему, построил её с нуля, провёл через внедрение во всю компанию. Mara UI в активном использовании и постоянном развитии по сей день.
Моя роль
Ведущий дизайнер и инициатор. Придумал систему, построил её с нуля, провёл через внедрение во всю компанию. Mara UI в активном использовании и постоянном развитии по сей день.
Проблема
Каждый проект начинался с нуля — время уходило на решения которые уже принимались раньше
Компания вела несколько продуктов одновременно, но общей основы не было. Одни и те же решения принимались снова и снова — и дизайнерами, и разработчиками.
Проблема
Каждый проект начинался с нуля — время уходило на решения которые уже принимались раньше
Компания вела несколько продуктов одновременно, но общей основы не было. Одни и те же решения принимались снова и снова — и дизайнерами, и разработчиками.
Кнопка из одного продукта не переносилась в другой без переработки
Цвета, шрифты, отступы выбирались заново на каждом проекте
Мультибренд без системы держался только на ручном контроле
Каждый новый проект открывал Figma с чистого листа. Цвета подбирались вручную, типографика согласовывалась заново, компоненты пересобирались. Интересная работа — лейаут, иерархия, маркетинговая логика — была погребена под настройкой. Разработчики дублировали ту же проблему на своей стороне: без единой библиотеки каждый проект рос отдельно.
Каждый новый проект открывал Figma с чистого листа. Цвета подбирались вручную, типографика согласовывалась заново, компоненты пересобирались. Интересная работа — лейаут, иерархия, маркетинговая логика — была погребена под настройкой. Разработчики дублировали ту же проблему на своей стороне: без единой библиотеки каждый проект рос отдельно.
Решение
Двухуровневая система которая покрыла все продукты и все платформы
Построил систему из source-переменных и семантических токенов, типографической шкалы, числовой базы и библиотеки компонентов — всё связано, всё переключается.
Решение
Двухуровневая система которая покрыла все продукты и все платформы
Построил систему из source-переменных и семантических токенов, типографической шкалы, числовой базы и библиотеки компонентов — всё связано, всё переключается.
292 source-переменные для четырёх брендов, 132 семантических токена с поддержкой светлой и тёмной темы
Типографика и отступы на базовой единице X = 4px, адаптированы под десктоп, мобайл и ТВ
Компоненты настраиваются через свойства без разрыва связи с библиотекой, Storybook для фронтенда
Смена бренда — одно переключение режима. Смена темы — одно переключение режима. Компонент, созданный для TV+, работает в Televizor.by без переработки. Вдохновением послужили Gravity UI, Undesign и Shadcn — система гибкая, но не выходит за рамки. Дополнительно разработал веб-инструмент для быстрого подбора и выгрузки цветов из палитры — убрал целый класс мелких рутинных задач.
Смена бренда — одно переключение режима. Смена темы — одно переключение режима. Компонент, созданный для TV+, работает в Televizor.by без переработки. Вдохновением послужили Gravity UI, Undesign и Shadcn — система гибкая, но не выходит за рамки. Дополнительно разработал веб-инструмент для быстрого подбора и выгрузки цветов из палитры — убрал целый класс мелких рутинных задач.
Где работает
Система прижилась везде — от стриминга до автосалона
Mara UI легла в основу продуктов разного масштаба и типа — и везде показала себя одинаково хорошо.
Где работает
Система прижилась везде — от стриминга до автосалона
Mara UI легла в основу продуктов разного масштаба и типа — и везде показала себя одинаково хорошо.
TV+, Televizor.by, Hotel TV — мультиплатформенные медиапродукты
DataHata, Каналона, Deepal — от лёгкого лендинга до крупного каталога
Channel Maker — внутренний инструмент, спроектирован и сверстан быстро
Плеер, созданный для TV+, переиспользован в Televizor.by без редизайна. Новые страницы DataHata собираются быстро — структурные решения уже приняты, команда фокусируется на контенте. Channel Maker — внутренний EPG-редактор — был спроектирован и сверстан за минимальное время именно потому что система уже была готова.
Плеер, созданный для TV+, переиспользован в Televizor.by без редизайна. Новые страницы DataHata собираются быстро — структурные решения уже приняты, команда фокусируется на контенте. Channel Maker — внутренний EPG-редактор — был спроектирован и сверстан за минимальное время именно потому что система уже была готова.
Результат
Одна система, девять продуктов, каждый следующий проект быстрее предыдущего
Система сократила время на рутину и освободила команду для содержательной работы — это видно в цифрах и в том как команда работает каждый день.
Результат
Одна система, девять продуктов, каждый следующий проект быстрее предыдущего
Система сократила время на рутину и освободила команду для содержательной работы — это видно в цифрах и в том как команда работает каждый день.
Время на дизайн новой страницы: 7 дней → 3 дня
Время на создание полноценного лендинга: −45%
В production на Mara UI: 8–9 продуктов, ещё 3 в разработке
Шесть человек используют систему ежедневно: один дизайнер, два веб-разработчика, два Android-разработчика, один iOS-разработчик. Интересные решения — лейаут, иерархия, что сказать и где — это то на что теперь уходит время команды. Всё остальное уже сделано.
Шесть человек используют систему ежедневно: один дизайнер, два веб-разработчика, два Android-разработчика, один iOS-разработчик. Интересные решения — лейаут, иерархия, что сказать и где — это то на что теперь уходит время команды. Всё остальное уже сделано.