Рассказываем в новом кейсе, как cоздали сайт МТС бренд портал для работы с цифровой экосистемой. Подробности в статье.
Задача
В 2023 году компания МТС провела ребрендинг и решила создать бренд портал, чтобы познакомить своих сотрудников и соискателей с новым визуальным стилем. Было важно, чтобы сайт не просто объединял гайдлайны в одном месте, а рассказывал, какие ценности компании отражает новая айдентика и вдохновлял дизайнеров сотрудничать с брендом. За дизайном и разработкой бренд портала команда МТС обратилась к нам.
Решение
При создании бренд портала мы опирались на новый стиль экосистемы МТС. Сайт разделили на смысловые блоки, которые посвящены отдельным константам бренда. Было важно, чтобы пользователь видел не только красивый дизайн, а сразу понимал, как работают составляющие фирменного стиля МТС, поэтому с визуальными элементами в каждом блоке можно взаимодействовать.
Внутри экосистемы МТС есть разные цифровые продукты. Дизайн каждого продукта имеет свой характер и визуальные особенности, но при этом связан с общем стилем МТС.
Фотостиль МТС состоит из обязательных холодных и тёплых цветовых пятен: синий цвет отвечает за диджитал, а красный — за энергию и жизнерадостный характер бренда. На сайте бренд портала пользователь может взаимодействовать с фотостилем — посмотреть, как выглядит фотография до обработки с применением отдельно холодного (синего) и отдельно теплого (красного) оттенка, а также двух оттенков вместе.
Важная часть дизайн-системы МТС — контролсы. Это элементы интерфейса, которые могут работать как кнопка, слайдер, контейнер для текста. Они напоминают элементы интерфейса смартфона и подчёркивают, что МТС создаёт цифровые приложения. Их мы тоже сделали кликабельными, чтобы пользователи могли понять, как они работают.
В новом бренд портале нам удалось соединить практическую пользу с вдохновляющими визуальными элементами. В результате получилась обобщающая точка входа в весь дизайн МТС.
Для разработки сайта наша команда использовала фреймворк Next.js, язык программирования TypeScript, сборщик модулей Webpack, REST API и синтаксис SCSS.
За время разработки нового бренда у нас собралось много отдельных документов и рабочих файлов, которыми пользуются все, кто так или иначе соприкасается с дизайном и коммуникацией. Мы создали этот портал для быстрого погружения любого нового сотрудника или партнёра в бренд МТС и его основные черты. А также собрали в одном месте все компоненты айдентики.
Для лучшего вовлечения мы добавили интерактивные блоки, которые выполняют роль демо — в игровой форме знакомят пользователя с общим принципом того или иного дизайн-решения, объясняют, почему они такие и какая за этим стоит идея.
