кейс

О проекте

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

Чтобы сделать систему прозрачной, МегаФон решил создать интерактивный портал — базу знаний с правилами и принципами работы своей дизайн-системы.

Долгосрочные партнеры

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

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

Продумали игровые механики

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

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

Сформулировали правила

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

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

Разработали принципы создания 3D-иллюстраций

За два года работы с командой МегаФона над иллюстрациями на проектах разного масштаба мы выработали уникальный стиль 3D-моделей. 

Для сайта дизайн-системы сформулировали правила их создания и передали универсальность, с которой подходим к выбору образов: от поиска метафор до работы с материалами, освещением и композицией. Сегодня нашими гайдлайнами пользуются все digital-подрядчики МегаФона.

Прозрачные видео для бесшовного взаимодействия

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

Такие видео весят больше обычных, что может повлиять на скорость загрузки. Чтобы оптимизировать файлы, использовали секвенции изображений, собранные в видео с помощью FFmpeg и загрузили в двух форматах: .webm для большинства браузеров и .mov для Safari. Чтобы загрузка сайта была еще легче, видео подгружаются не сразу, а по мере скролла страницы.

Figma-плагин для проверки макетов

Для оптимизации работы с дизайн-системой создали Figma-плагин. Его цель — уменьшить количество итераций и доработок макетов, а также сократить время, которое разработчики и арт-директоры тратят на проверку соответствия элементов дизайн-системе.

Разработка плагина

Изучили ограничения Figma для дизайна и отрисовали макеты на основе прототипов от команды МегаФона. Отдельным этапом стал сбор требований Figma api для разработки: изучали доступную документацию и форумы, общались с экспертами. 

Frontend инструмента дробит каждый стиль из макетов на мелкие элементы, вплоть до названия слоев, и сравнивает их с образцом — дизайн-системой. Backend сохраняет в базе данных «кастомные» варианты элементов, утвержденные администратором, а также ключи для синхронизации с файлами библиотек. Если в исходном файле поменяется любой дизайн-элемент, плагин узнает об этом.

Результат

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

Сайт помогает всем, кто соприкасается с экосистемой: инхаус-команде и подрядчикам — сокращать время на создание макетов и работать согласованно; соискателям — знакомиться с «внутрянкой» работы в компании; финальным пользователям цифровых продуктов — получать консистентный и предсказуемый опыт взаимодействия.