Вау- и бизнес‑эффект в одном продукте. Кейс The Platform от МТС и Red Collar

Этот материал — детальный разбор создания сайта The Platform, масштабного продукта МТС, объединившего под одним брендом сервисные и технологические платформы, системы безопасности и бизнес‑решения. Взгляд заказчика и техническая кухня от frontend‑разработчика.

Подход — выход за рамки

Начиная работать над сайтом продукта инхаус, команда МТС столкнулась с большим объемом разрозненной информации. К тому моменту было представлено 23 платформы, которые могут взаимодействовать друг с другом. Объединяясь, они создают новый продукт — The Platform. В каждой из платформ — от двух до десятков взаимосвязанных и компонентных продуктов, в каждом продукте — свои стейкхолдеры.

Напоминает матрешку, внутри которой — помимо прочего — много сложностей. Например, при презентации продукта технические специалисты упускали продажные преимущества, а продажники сильно упрощали важные серьезные технические решения.

Гипотеза: чтобы выбрать единый подход к презентации, необходима медиация и свежий взгляд со стороны

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

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

Подрядчиком стала Red Collar, на тот момент зарекомендовавшая себя в других проектах для МТС. Команда взяла на себя процессы аналитики, дизайна и разработки, на стороне МТС Digital были арт‑дирекшн, настройка инфраструктуры и развертывание ПО.

Несмотря на опыт совместной работы, подрядчику нужно было пройти дополнительный экзамен на ключевой визуал: для МТС, как для заказчика, крайне важно было знать, что исполнитель понимает контекст бренда The Platform, ведь сжатые сроки не давали много времени на адаптацию.

Погружение в контекст: аналитика и история

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

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

Как быть, когда много ответственных

У каждого продукта есть PO и CPO. Умножаем на количество продуктов в двадцати трех платформах — и в общем получаем больше сотни стейкхолдеров. Казалось бы, зачем выбирать аутсорс, когда есть такая большая команда? Ответ кроется в самом контексте: разные мнения большого количества равноуровневых ответственных сложно подвести к общему знаменателю.

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

Если стейкхолдер опаздывал с новой задачей и правкой, ее клали в бэклог. Нет времени возвращаться назад, когда проект уже ушел на пять шагов вперед.

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

Так, на финале из сотни ответственных в проекте остались десять.

Не отказываемся от хорошего, но помним о бизнес‑задачах

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

Эмоциональное воздействие и запоминаемость достигаются и за счет продуманных анимаций. Динамика пронизывает весь интерфейс, начиная с главного экрана и центрального элемента — 3D-«маховика». Эта структура служит не просто украшением, а точной метафорой самой сути продукта: модульности, надежности и бесшовной интеграции компонентов в единое целое.

Очевидно, «утяжелить» сайт — осознанное решение. Но почему бы не попробовать усидеть на двух стульях, почему не сделать сайт одновременно и выставочным и бизнес‑ориентированным?

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

Самая важная часть разработки — собрать блоки так, чтобы они были доступны с любого устройства

Как это устроено изнутри?

Первый этап — чертеж. CG‑дизайнеры собирают сцену так, как она должна выглядеть на сайте. Motion‑ролик используется как референс для согласования с заказчиком, а финальный вариант уже заново собирается frontend‑специалистом, чтобы сделать анимацию интерактивной и управляемой. А главное — достаточно легкой, чтобы с ней справлялись устройства пользователей.

Второй этап — реализация и оптимизация. Берем из Blender модели, текстуры — и выгружаем их под себя: готовим их в JPEG, а если совсем круто — в AVIF или WebP. Готовая сцена не загружается сразу в 3D. Вообще, достаточно много вещей фронту лучше делать самостоятельно — это позволяет управлять сценой и дает возможность добавить больше интерактивности для пользователя. Например, на главном экране The Platform элементы сцены при каждой новой загрузке позиционируются по‑разному.

Даже настройка материалов на frontend‑разработчике: подборка похожих текстур, расстановка светильников, выстраивание эффектов так, чтобы было похоже на motion‑исходник.

Стадия третья — финальная оптимизация. Написали анимации, все собрали, работает. Запускаем и видим: старенькие устройства все‑таки жгут руку и выдают всего лишь 10 кадров в секунду.

Находим еще блоки на сайте, где можно применить ухищрения. Что‑то можно поменять на 2D — «вау» на первом экране все равно останется, а на опыт пользователя это масштабно не повлияет.

Еще один, постоянный, этап — коммуникация. Ключевая задача для разработчика здесь — объяснять все остальной команде человеческим языком. Так, чтобы партнеры по проекту понимали: все смотрят в одну сторону.

Результат: гипотеза сработала

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

Усидеть на двух стульях, выбрав и эффектность и фокус на бизнес‑задачах, реально — если под вами диван. В нашем случае диван — это команда.

Какие бы ни использовались проектные подходы, весь результат зависит от людей, с которыми ты работаешь

Редактор: Дарья Желтова