Дизайн-система «МегаФона»

Главное о кейсе

Разработали дизайн-систему, которая обеспечивает консистентность и гибкость всех элементов с учётом экосистемных сервисов. Объединили единой технологической платформой и связали продукты единым визуальным стилем и паттернами.

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



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

.

3. На базе дизайн-системы сделали конструктор типовых страниц в Figma и React из готовых компонентов. Это упростило работу контент-менеджеров — страницы собираются без кода, а дизайнеры только проводят ревью

.

4. Для нас неотъемлемой частью являются процессы, поэтому создали отдельное направление Design Experience. В рамках него создали инструменты, которые автоматизируют различные процессы внутри команды. Так гораздо эффективнее.

Как проект изменил жизнь пользователей

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

Дизайнеры:


1. Придерживаются единого стиля продуктов без лишней рутины.
2. Используют описанные UX-паттерны, сохраняя консистентность продукта
.
3. Тратят меньше времени на подготовку макетов, используя готовые компоненты.
4. Быстрее находят и исправляют ошибки в макетах с помощью плагина.
5. Не теряют свои правки при ревью.
6. Получают на вёрстке задуманное за счёт синхронизации дизайн-системы в Figma и на React.

Разработчики:
1. 

Получают библиотеку с технической документацией, которая упрощает онбординг новых сотрудников
.
2. Не тратят время на повторную разработку и тестирование компонентов на каждом проекте.
3. Освобождают ресурсы на выполнение сложных технических задач вместо переделки базовых стилей.
4. Легко ориентируются в макетах коллег благодаря ченджлогу.


Бизнес-заказчик:

1. Сокращает ТТМ благодаря использованию готовых компонентов.
2. Тратит на выпуск продуктов меньше ресурсов, т.к. привлекает меньше специалистов для работы с готовыми решениями.
3. Запускает качественный продукт с консистентными интерфейсами.

Абоненты:


1. Не испытывают сложностей с интерфейсом в любой точке соприкосновения с брендом.
2. Следуют привычным паттернам во взаимодействии со всеми продуктами компании.
3. Получают качественный продукт без технических ошибок.

Бизнес-задача и ее решение

Мы ставили перед собой следующие задачи:


— переосмысление визуального подхода, включая полную переработку дизайн-системы и шаблонов взаимодействия
;
— внедрение новых принципов, правил и паттернов дизайн-системы на всех этапах, включая создание макетов и разработку
;
— повышение уровня таких параметров, как доступность для пользователей, удобство и быстродействие
;
— разработка инструментов, процессов и методологии работы в команде продукта

.

Концептуальные изменения и ключевые особенности


1. Разработали новую дизайн-систему.
Она обеспечивает консистентность и гибкость всех элементов, учитывая экосистемные сервисы.

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

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


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


5. Разработали конструктор типовых страниц.

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


6. Создали инструменты для автоматизации процессов внутри команды, повышения эффективности и оптимизации оперативной деятельности
.

Разработали плагин для проверки макетов на соответствие дизайн-системе. Он помогает более тщательно оценивать дизайн с точки зрения установленных стандартов и параметров. Так мы тратим меньше времени на разработку макетов и сокращаем количество доработок.

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

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

Крафт (мастерство), реализация, технические детали

Дискретность библиотек

МегаФон большая компания с различными направлениями и продуктами. Чтобы все продукты были объединены базовым стилем, но при этом могли различаться и быть уникальными мы разделили библиотеку на несколько уровней: Core библиотека содержит все базовые стили и компоненты — они универсальны для любого направления и каждый продукт бренда узнаются благодаря этому “ДНК”. На атомах и молекулах Сore-библиотеки строятся уже продуктовые библиотеки с организмами и темплейтами. У B2C сегмента будут свои карточки товара, формы оплаты и стиль коммуникаций, у B2X они будут другими. Таким образом мы даём каждому направлению воздух для креативных рамок, но все они будут иметь единый стилистический фундамент.


Синхронизация компонентов дизайна и разработки

Одна из частых проблем в разработке — грамотная передача спроектированного интерфейса, что влечёт за собой потерю качества конечного продукта и растягивание времени самой разработки. Чтобы упростить коммуникацию, мы максимально синхронизировали компоненты, их стили и проперти в Figma и React. К сожалению, ни одно готовое решение нам не подошло, поэтому нам пришлось вырабатывать свои технологии и скрупулёзно достигать необходимого результата: синхронизации “языка” дизайнера и разработчика, элементов которыми они оперируют и всевозможных технических параметров.


Автоматизация процессов

Чтобы максимально исключить человеческий фактор, который может вызвать несоответствие макетов и дизайн-системы, мы разработали плагин, проверяющий чистоту макетов. Разработку мы доверили нашим коллегам из Red Collar. Его главное преимущество в том, что он не просто указывает на ошибки, а позволяет их исправлять в один клик или помечать специфику для разработки. Он сам подбирает подходящие стили и компоненты для применения в макете взамен ошибочных, а дизайнеру доступен полный список для замены с возможностью корректировать результат работы плагина. Так же мы создали чек-лист проверки, который будет вести статистику при передачи макетов и отдельный фреймворк для дизайн-ревью. Изюминкой является то, что многие параметры этих инструментов синхронизированы между собой и проходят красной линией через весь процесс от проектирования до релиза


Конструктор страниц

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Портал

Чтобы специалистам внутри компании и на стороне подрядчиков было удобно работать с дизайн-системой, нужна была база знаний о ней. Мы доверили задачу по её созданию коллегам из Red Collar. У них получилось сделать полезный и удобный инструмент благодаря свежему взгляду со стороны.

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

Одной из основных «фишек» плагина является не только проверка на ошибки, но и их исправление через замену стилей/компонентов на гайдовые. В время разработки плагина Figma зарелизила Variables (переменные), и мы перешли на них для удобства реализации тёмной темы в дизайн-системе. Это было сразу учтено в плагине, что сделало его единственным на тот момент решением на рынке, которое умеет менять цветовые стили на переменные. Это сэкономило нам огромное количество времени при обновлении макетов для использования тёмной темы.

Скриншоты

Видео