Дизайн и разработка бренд-портала МТС

Из мобильного оператора МТС давно вырос в экосистему цифровых сервисов. Философия экосистемы МТС — менять привычное и трансформировать повседневность.

В 2023 году компания МТС провела ребрендинг и решила создать бренд-портал, чтобы познакомить сотрудников и соискателей с новым визуальным стилем. Было важно, чтобы пользователь видел не только красивый дизайн, но и понимал, как работают составляющие фирменного стиля, поэтому с элементами в каждом блоке можно взаимодействовать. За дизайном и разработкой бренд-портала команда МТС обратилась к нам.

При создании бренд-портала мы опирались на новый стиль экосистемы МТС. Сайт разделили на смысловые блоки, которые посвящены отдельным константам бренда: его характеру и продуктам, логотипу и шрифту, CG-графике и контролсам, фотостилю, продуктам экосистемы и общему каталогу стилей. 

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

На сайте мы выделили сквозные элементы интерфейса и подробно описали, и показали, как они используются: 

— Логотип;

— Шрифт;

— CG-графика;

— Фотостиль;

— Контролсы. 

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

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

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

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

Для разработки сайта наша команда использовала фреймворк Next.js, язык программирования TypeScript, сборщик модулей Webpack, REST API и синтаксис SCSS.

В новом бренд-портале нам удалось соединить практическую пользу с вдохновляющими визуальными элементами. В результате получилась обобщающая точка входа в бренд МТС.