Вау- и бизнес‑эффект в одном продукте. Кейс The Platform от МТС и Red Collar
Этот материал — детальный разбор создания сайта The Platform, масштабного продукта МТС, объединившего под одним брендом сервисные и технологические платформы, системы безопасности и бизнес‑решения. Взгляд заказчика и техническая кухня от frontend‑разработчика.
Подход — выход за рамки
Начиная работать над сайтом продукта инхаус, команда МТС столкнулась с большим объемом разрозненной информации. К тому моменту было представлено 23 платформы, которые могут взаимодействовать друг с другом. Объединяясь, они создают новый продукт — The Platform. В каждой из платформ — от двух до десятков взаимосвязанных и компонентных продуктов, в каждом продукте — свои стейкхолдеры.
Напоминает матрешку, внутри которой — помимо прочего — много сложностей. Например, при презентации продукта технические специалисты упускали продажные преимущества, а продажники сильно упрощали важные серьезные технические решения.
Гипотеза: чтобы выбрать единый подход к презентации, необходима медиация и свежий взгляд со стороны
Проведя анализ, команда МТС выделила три ключевых идеи: технологичность, многослойность и компонентность. И приняла решение: суть продукта можно передать через выход за рамки и вау‑дизайн.
И здесь необходимо обозначить контекст: МТС — крупная компания с экосистемой и своими гайдлайнами. А когда речь идет о чем‑то инновационном, гайдлайны могут стать ограничением — теми самыми рамками. Поэтому МТС решила передать исполнителям полную свободу в дизайн‑решениях.
Подрядчиком стала Red Collar, на тот момент зарекомендовавшая себя в других проектах для МТС. Команда взяла на себя процессы аналитики, дизайна и разработки, на стороне МТС Digital были арт‑дирекшн, настройка инфраструктуры и развертывание ПО.
Дизайнерам предстояло «упаковать» сложные технологические продукты The Plaftom в формат выставочного сайта‑визитки и рассказать о преимуществах, не используя интерфейсы. Нужно было найти визуальный язык, который поможет показать размах проекта, остаться в памяти и сформировать нужные ожидания у целевой аудитории. Важно было запуститься в сжатые сроки — до 1.5 месяцев.
Несмотря на опыт совместной работы, подрядчику нужно было пройти дополнительный экзамен на ключевой визуал: для МТС, как для заказчика, крайне важно было знать, что исполнитель понимает контекст бренда The Platform, ведь сжатые сроки не давали много времени на адаптацию.
Рассылка: как вести бизнес в России
Пять полезных писем пришлем сразу после подписки. В них — бизнес‑идеи, готовые промпты для нейросетей, советы, как выбрать налоговый режим и получать пассивный доход
Погружение в контекст: аналитика и история
Первый этап, на котором закладывается фундамент проекта, — аналитика и глубинные интервью с заказчиком. Зачастую хорошая идея — сделать больше, чем ожидается.
«Команда сделала не только глубинные интервью и аналитику: самое главное — они стали изучать историю, не поленились и посмотрели все внешние материалы, десятичасовые конференции, где упоминалась The Platform. Так мы получили первые наброски экрана и поняли, что мы можем идти вперед, и key visual абсолютно отрабатывает».
Даниил Мельников
PMO МТС DIGITALТакой подход напоминает детективное расследование, но временные затраты окупаются. Изучение контекста, истории компании и ее интересов помогают исполнителю оставаться на одной стороне с заказчиком. Это решение сэкономило время на поиск ключевого визуала и помогло сразу попасть в ожидания.
Как быть, когда много ответственных
У каждого продукта есть PO и CPO. Умножаем на количество продуктов в двадцати трех платформах — и в общем получаем больше сотни стейкхолдеров. Казалось бы, зачем выбирать аутсорс, когда есть такая большая команда? Ответ кроется в самом контексте: разные мнения большого количества равноуровневых ответственных сложно подвести к общему знаменателю.
«Работа инхаус позволяет команде дольше зависать в глубинных дискуссиях, откладывать принятие решений. Люди извне помогают увеличить эту дистанцию, добавить воздуха, помочь посмотреть на задачу со стороны — и сократить срок».
Даниил Мельников
PMO МТС DIGITALКак в проекте построили работу с сотней стейкхолдеров? Пошли по системе MVP, простому продуктовому подходу. Поэтапно запрашивали и обрабатывали информацию, быстро двигаясь вперед. Сначала все вовлеченные и не вовлеченные хотят поделиться мнением, высказать опасения: бывает, что архитекторы «лезут» в дизайн, а дизайнеры — в бизнес и разработку. Но когда проект поделен на итерации и блоки, все вовлечены в процесс в нужное время и в нужном месте.
Чтобы систематизировать работу с командами, подрядчик предложил специальный шаблон — фреймворк для описания ценностей продуктов. Он помог продактам МТС структурировать сильные стороны своих решений и представить их в выигрышном свете.
Если стейкхолдер опаздывал с новой задачей и правкой, ее клали в бэклог. Нет времени возвращаться назад, когда проект уже ушел на пять шагов вперед.
Поэтапная выдача результатов помогает сократить неопределенность, отсечь нерелевантное мнение, и остаться с теми, кто реально болеет за продукт
Так, на финале из сотни ответственных в проекте остались десять.
Не отказываемся от хорошего, но помним о бизнес‑задачах
Визуальная стилистика сайта балансирует между корпоративными стандартами и смелым экспериментом. С одной стороны, проект использует знакомые шрифты и компоненты из дизайн‑системы МТС. С другой — показывает инновационность через глубокую темную палитру, редко применяемую в других цифровых продуктах компании. Этот осознанный выбор не просто выделяет The Platform, а визуально кодирует технологическую сложность проекта.
Эмоциональное воздействие и запоминаемость достигаются и за счет продуманных анимаций. Динамика пронизывает весь интерфейс, начиная с главного экрана и центрального элемента — 3D-«маховика». Эта структура служит не просто украшением, а точной метафорой самой сути продукта: модульности, надежности и бесшовной интеграции компонентов в единое целое.
«Когда мы увидели блок с дизайном — сначала первый, потом второй — поняли, что не хотим отказываться от хорошего и опускать планку. Мы решили бросить себе вызов и усидеть на двух стульях: пусть каждый новый блок будет эффектней предыдущего».
Даниил Мельников
PMO МТС DIGITAL
Очевидно, «утяжелить» сайт — осознанное решение. Но почему бы не попробовать усидеть на двух стульях, почему не сделать сайт одновременно и выставочным и бизнес‑ориентированным?
И здесь важно довериться технарям, которые смогут реализовать и оптимизировать задумки. Потому что если запустить навороченный сайт на старом смартфоне без оптимизации — телефон обожжет руку.
Самая важная часть разработки — собрать блоки так, чтобы они были доступны с любого устройства
Как это устроено изнутри?
Первый этап — чертеж. CG‑дизайнеры собирают сцену так, как она должна выглядеть на сайте. Motion‑ролик используется как референс для согласования с заказчиком, а финальный вариант уже заново собирается frontend‑специалистом, чтобы сделать анимацию интерактивной и управляемой. А главное — достаточно легкой, чтобы с ней справлялись устройства пользователей.
«Фронт должен задать несколько вопросов моушену и тридэшнику: “Как ты эту сцену собирал?”, “Что там происходит с материалами?”. А потом надо пробовать пересобрать это самостоятельно».
Михаил Попов
Лид отдела креативной frontend‑разработки Red CollarВторой этап — реализация и оптимизация. Берем из Blender модели, текстуры — и выгружаем их под себя: готовим их в JPEG, а если совсем круто — в AVIF или WebP. Готовая сцена не загружается сразу в 3D. Вообще, достаточно много вещей фронту лучше делать самостоятельно — это позволяет управлять сценой и дает возможность добавить больше интерактивности для пользователя. Например, на главном экране The Platform элементы сцены при каждой новой загрузке позиционируются по‑разному.
Даже настройка материалов на frontend‑разработчике: подборка похожих текстур, расстановка светильников, выстраивание эффектов так, чтобы было похоже на motion‑исходник.
Стадия третья — финальная оптимизация. Написали анимации, все собрали, работает. Запускаем и видим: старенькие устройства все‑таки жгут руку и выдают всего лишь 10 кадров в секунду.
Самый базовый подход к решению этой проблемы пришел к нам из геймдева: срезать размер рендера. Какие минусы? На самых слабых устройствах видно пиксельные «лесенки». Рендер срезали, и все равно тормозит? Отключаем эффект рассеивания света — он очень красивый, но тяжелый. Это одна из стадий понижения качества на мобильных устройствах.
Находим еще блоки на сайте, где можно применить ухищрения. Что‑то можно поменять на 2D — «вау» на первом экране все равно останется, а на опыт пользователя это масштабно не повлияет.
Еще один, постоянный, этап — коммуникация. Ключевая задача для разработчика здесь — объяснять все остальной команде человеческим языком. Так, чтобы партнеры по проекту понимали: все смотрят в одну сторону.
Результат: гипотеза сработала
Сочетание эффектного дизайна и технической оптимизации решило главную задачу: сложный технологический продукт стал визуально притягательным и при этом доступным для любой аудитории, независимо от устройства. Благодаря редактуре материалы сайта заговорили на языке выгод клиента, а не только техническими терминами. Это позволило потенциальным пользователям легко ориентироваться в предложениях The Platform и выбирать подходящие решения.
Подтвердили гипотезу, что передача проекта на аутсорс помогает команде продукта получить новое видение, выйти за рамки гайдлайнов, структурировать информацию и — что было критически важно — уложиться в короткий срок. Представили MVP рынку всего за полтора месяца с последующей доработкой до полной версии и техническим сопровождением.
Усидеть на двух стульях, выбрав и эффектность и фокус на бизнес‑задачах, реально — если под вами диван. В нашем случае диван — это команда.
Какие бы ни использовались проектные подходы, весь результат зависит от людей, с которыми ты работаешь
«Очень круто, когда заказчик и исполнитель вместе идут к финальному результату, не подгоняя друг друга и не ища виноватых. Мы собрались для того, чтобы на выходе получилось что‑то крутое, завлекающее и главное — понятное».
Михаил Попов
Лид отдела креативной frontend‑разработки Red Collar«Ни одна компания, ни один продукт, ни одна команда не может сделать больше, чем люди, которые находятся в ней».
Даниил Мельников
PMO МТС DIGITALРедактор: Дарья Желтова
