Основная задача, с которой пришёл заказчик — запустить новый бренд с новой модельной линейкой и создать для него гибкую, масштабируемую, безопасную и отказоустойчивую систему. В этот контур вошли исследования, дизайн, брендбук, проектирование архитектуры, разработка и внедрение — всё, что сопровождает запуск автомобильного бренда.
У бренда «Москвич» две модельные линейки — стартовая (Москвич 3, 6, 8) и новая «М» (M70 и M90). Сайт https://moskvich.ru/ сделан под стартовую линейку, а под линейку «М» бренду понадобился отдельный сайт https://moskvich-m.ru/.
Развивать новую линейку на текущем решении не получилось бы: блоки реализованы без единой логики, любое изменение требует доработок, а для быстрого запуска новых страниц и функционала не хватает гибкости. Чем активнее развивалась бы новая линейка, тем более узким становилось бы это «горлышко».
«Москвич» — автомобильный бренд с историей, который сформировал стратегию-видение «Москвич 2030». В её рамках Москвич перестаёт быть просто сборочной площадкой и становится полноценным автомобильным технокластером.
Презентация новой линейки прошла вместе с запуском тизерной версии сайта moskvich-m.ru. Платформа стала ключевой точкой коммуникации бренда с аудиторией в момент выхода линейки на рынок.
Разработали новый сайт линейки «М» с нуля на микросервисной архитектуре. Перед стартом разработки провели полный цикл проектирования: качественные и количественные исследования, сбор и анализ CJM с привлечением партнеров. На основе этих данных построили платформу, которая закрывает путь пользователя от первого знакомства с моделью до заявки, расчета кредита, трейд-ина, записи на тест-драйв и записи на ТО.
Выпуск разделили на три релиза: первый — тизерный, для анонса линейки и сбора первых заявок, второй — добавление технических характеристик и цен, третий — основной, с полноценными разделами и ключевыми интеграциями.
Опыт работы с автомобильным digital позволял нам приходить с готовыми решениями: подсвечивать риски, предлагать сценарии и закрывать пробелы в требованиях ещё на этапе обсуждения.
Когда проект большой, а требования могут меняться, классический waterfall не работает: к моменту финального релиза часть изначального скоупа уже устаревает. Поэтому мы пошли по итеративной модели — каждый функциональный блок проходил свой полный цикл от требований до релиза.
В каждой итерации блок проходил шесть стандартных этапов. На каждом из них мы делились своей экспертизой: формулировали требования вместе с заказчиком, предлагали технические и продуктовые решения, валидировали гипотезы:
Шли они не сквозным потоком по всему проекту, а параллельно по разным функциональным блокам. За счет этого общий срок выпуска сокращался, а первые рабочие части сайта появлялись у клиента раньше, чем если бы мы делали проект линейно.
Для клиента это дало три понятные вещи: первые работающие части продукта появились уже в первые месяцы, требования корректировались по ходу разработки, а команда не простаивала в ожидании, пока заказчик утвердит весь скоуп целиком.
Продуктовые страницы моделей M70 и M90 — главная точка знакомства пользователя с линейкой «М». На них собраны сложные анимации и визуальный язык бренда. Дизайн ведет клиента от первого знакомства с моделью к ключевым целевым действиям: заявке, конфигуратору, тест-драйву.
Ключевым решением стал переход на микросервисную архитектуру, что дало возможность гибко развивать части системы, повысило отказоустойчивость и упростило интеграции. Технологический стек: Frontend — Nuxt (TypeScript и Vue), Backend — Laravel (PHP). Такое сочетание выбрано под конкретные задачи продукта для обеспечения независимого развития сервисов.
Одной из технических задач стала подготовка системы к будущей интеграции с инфраструктурой заказчика, где хранятся данные по автомобилям. Саму интеграцию планируется делать на следующих этапах развития, но уже сейчас сайт адаптирован под существующую модель данных со строгой структурой и правилами. В основной релиз вошли три ключевые интеграции:
Проект шёл в условиях ребрендинга и запуска новой продуктовой линейки. Это обусловило жесткие требования к качеству, критичные сроки и максимальное внимание со стороны бизнеса. Чтобы сохранить управляемость в условиях высокой неопределённости, мы шли итерациями — каждый функциональный блок проходил полный цикл с прозрачными этапами и регулярными демо.
Собрали подробные продуктовые страницы моделей M70 и M90 — главную точку знакомства пользователя с линейкой «М». Реализовали сложные анимации и визуальный язык бренда, добавили 360°-осмотр экстерьера и интерьера, выбор цвета кузова, интерьера и блок «Комплектации» с характеристиками. В шапку страницы встроены быстрые переходы к конфигуратору, кредитному калькулятору, трейд-ину и тест-драйву, а в нижнюю часть — форма «Получить предложение» для связи с дилером.
.png)
Отдельная фича продуктовых страниц — динамический остров. Это фирменный элемент сайта. Именно через него реализован сквозной путь клиента — без переходов между разрозненными формами. В нём собраны ключевые инструменты: конфигуратор, кредитный калькулятор
.png)
Разработали конфигуратор с тонкими настройками. Пользователь сначала выбирает модель (M70 или M90), а затем подбирает автомобиль под свои параметры еще до обращения к дилеру. Конфигуратор связан с разделом «Специальные предложения»: при подборе конфигурации клиент может снизить итоговую стоимость, активировав подходящие предложения. Логика на бэкенде поддерживает как сочетающиеся, так и взаимоисключающие предложения — на текущ
.png)
Каталог автомобилей в наличии собран с фильтрами, сортировкой и возможностью добавлять авто в сравнение. В MVP-версии данные в каталог загружают сами дилеры — у каждого из 31 подключенного дилера есть доступ в админ-панель сайта, через импорт документов они самостоятельно публикуют актуальный список доступных автомобилей.
.png)
В дальнейшем планируется развитие административной панели и автоматизация загрузки, чтобы данные о наличии обновлялись без ручных действий со стороны дилеров.
.png)
Кредитный калькулятор подбирает пользователю предложения от банков. Сценарий разбит на четыре последовательных шага: информация об автомобиле, информация о кредите, выбор дилера и контакты.
.png)
Онлайн-оценка дает пользователю предварительную стоимость его текущего автомобиля, и эта сумма вычитается из стоимости нового «Москвича» при оформлении трейд-ина.
.png)
.png)
Запись на ТО построена не по классическому принципу «ТО-1/ТО-2», а на логике подбора регламентных работ по пробегу и сроку эксплуатации автомобиля. Программа «Комплекс-сервис» настроена под каждую модификацию — M70 1.5T, M70 2.0T и M90 2.0T. Пользователь получает перечень работ, подобранный под пробег и срок эксплуатации его машины.
.png)
.png)
Интерактивная карта дилерских центров «Москвич» с поиском подходящего дилера. У тест-драйва есть отдельная страница на сайте, а также записаться можно со страницы модели и из других ключевых разделов — пользователь сразу выбирает M70 или M90 и удобный дилерский центр.
.png)
.png)
.png)
Отдельный раздел со специальными предложениями по линейке «М» — с фильтрами и карточками по модели и категории. Рядом мы собрали сервисные страницы с информацией о страховании и кредитных программах.
.png)
Разработали разные типы лид-форм под отдельные сценарии. Формы вошли уже в декабрьский релиз — это позволило анализировать спрос по городам еще до основного запуска. В контентной части сайта мы собрали новости, пресс-релизы и страницу о бренде — через них «Москвич» коммуницирует с аудиторией.
.png)
В разделе собраны товары пост-продажного обслуживания — оригинальные аксессуары и шины для моделей линейки «М». Особенность реализации — динамические фильтры: при выборе подкатегории на странице остаются только те фильтры, которые применимы именно к ней, остальные скрываются. Это убирает лишний шум в интерфейсе и помогает пользователю быстрее найти подходящий товар.
Линейка «М» вышла на рынок с цифровой платформой, которая ведёт клиента сквозным путём — от первого знакомства с моделями M70 и M90 до сервисного обслуживания уже после покупки. Микросервисная архитектура и взаимозаменяемые блоки позволяют «Москвичу» быст
