Гранат 2.0: Обновление интерфейсов экосистемы

23.05.2024

В начале мая прошла конференция MTS Design Granat Conference. Продуктовые команды Мой МТС, МТС Финтех, МТС Умный дом и МТС Автотех и команда дизайн-системы Granat рассказали про обновление визуального стиля и интерфейсов продуктов экосистемы. 

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

Продуктовым командам необходимо начать переход на новый визуальный стиль в этом квартале и запуститься обновленными к январю 2025 года.

Конференция

Сотрудники МТС могут посмотреть конференцию в Корпоративном университете МТС.

 

Ребрендинг и новый визуальный стиль

Почти год назад компания объявила о большом ребрендинге. Появился новый логотип МТС, логотипы суббрендов и коммуникационные материалы. Характер бренда тоже изменился: он стал харизматичным, энергичным, технологичным, эмпатичным и современным. 

Чтобы отражать новый характер бренда, Центр дизайна начал менять продуктовый UX/UI дизайн для клиентов. В сентябре 2023 года мы обновили компоненты для мобильных приложений, а в 2024 году — компоненты веб-приложений. 

Почему важно использовать дизайн-систему и новый визуальный стиль

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

Никита Шехов, 
директор по продуктовому дизайну МТС

 

Переход продуктов экосистемы на Granat 2.0

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

Мы уже проверяем дизайн сайтов и приложений на соответствие новым стандартам, но с января 2025 года критические замечания могут помешать запуску цифрового продукта. 

Продукты экосистемы, который используют компоненты версии 1.0, должны перейти на новую версию. Локальные компоненты необходимо сначала обновить или заменить до версии 2.0 в дизайне, пройти ревью арт-директора и команды дизайн-системы Granat, а позже — обновить их в приложениях.

Новые продукты, которые создаются в экосистеме или только подлючаются к ней, должны использовать компоненты версии 2.0.

 

Обновление дизайн-системы Granat 2.0

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

Обновились библиотеки Granat для мобильных и веб-приложений:

  • Обновили типографику, увеличили скругления и расширили палитру
  • Внедрили автоматическую темизацию в Figma для команд МТС Деньги и МТС Авто
  • Облегчили компоненты при пересборке, дополнили состояниями и расширили спецификации
  • Добавили новые компоненты по запросам команд
  • Собрали примеры анимаций для компонентов
  • Добавили новые библиотеки Variables, Web Molecules, Web Organisms, Ecosystem Modules, Graphic Assets, Placeholders
  • Переработали компоненты с точки зрения цифровой доступности: откалибровали контрастность, написали спецификации по управлению голосом и динамическому шрифту

 

Библиотеки

 

Разработка компонентов в коде по стратегии InnerSource

С конца 2023 года в дизайн-системе поменялся подход к разработке компонентов в коде. Теперь она ведется по стратегии разработки с открытым кодом InnerSource. Командам нужно добавлять разработанные компоненты в единый репозиторий, а три мейнтенера iOS, Android и веб-приложений, помогут вам в этом. 

Вопросы по этой теме и по компонентам в коде направляйте в команду Front Platform. 

 

Локальные компоненты и отсутствие нужных в дизайн-системе 

Важно, чтобы локальные компоненты не противоречили базовой дизайн-системе. Поэтому, когда вы создаете локальные компоненты, используйте Granat по максимуму.

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

 

Опыт перехода продуктовых команд

Мы попросили команды поделиться опытом перевода своих приложений на новый визуальный стиль.

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

Янис Калниньш, арт-директор МТС Умный дом, рассказал о том, как появился Granat 2.0. Он подчеркнул важность коллаборации между командами продукта и дизайн-системы для разработки нового приложения Умного дома.

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

Владислав Ковалёв, арт-директор МТС Авто, представил продукты и решения МТС для автомобилей. Он уделил особое внимание безопасности и доступности интерфейсов. А Александр Силкин, дизайнер продукта МТС Телематика, рассказал о внедрении дизайн-системы в продукт, адаптации новой палитры для автомобильных приложений и преодолении трудностей, связанных с контекстом использования и специфическими требованиями автомобильных интерфейсов.

 

Поддержка

Если у вас возникнут вопросы, пишите в чат комьюнити. Давайте продолжим делать наши продукты харизматичными и технологичными с помощью дизайн-системы Granat.

 

Благодарим за помощь в подготовке и производстве конференции Никиту Шехова, директора по продуктовому дизайну, Мишу Адначева, руководителя направления HR-бренда дизайна, Анастасию Фальковскую, руководителя направления UX-редактуры и студию COMDI.