МТС Бренд портал. Цифровая экосистема

Собрали всё, что нужно — от смыслов до гайдов — для быстрого погружения в бренд МТС.
  • Дизайн

    Концепция
    Масштабирование

  • Разработка

    Next.js
    TypeScript
    Webpack
    REST API
    SCSS

  • Результат

    brand.mts.ru

Задача

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

Решение

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

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

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

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

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

Ксения Сергачёва Руководитель центра по работе с брендом МТС

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

Над проектом работали
Богдан Чернышов Digital Art Director
Аида Пачева Digital Art Director
Хренов Никита Digital Designer
Антон Чукин Head of Digital Tech
Ольга Ибрагимова Digital Producer
Валерия Момотова PR-Manager
МТС. Ребрендинг
Ещё проект