Начать проект Начать
КейсыШаблон кейса · MV Agusta
Сайт дилера MV Agusta на современном чёрном MacBook и iPhone, жёлтый Superveloce на главной
MV AgustaАвтомобили · Дизайн сайта дилера
Первый экран главной: крупный план жёлтого мотоцикла на тёмно-красном фоне, приветственный заголовок и строка о наличии, предложениях и тест-драйвах
Заказной дизайн, реализованный студией как работающий шоурум

Услуги

  • UX/UI-дизайн
  • Дизайн-система
  • Фронтенд-разработка
  • Моушн-дизайн

Инструменты

  • Анализ сайтов брендов
  • Анализ конкурентов
  • Исследование локализации
  • Пользовательские сценарии

Стек технологий

  • HTML
  • CSS
  • Чистый JavaScript
  • Web Animations API

MV Agusta

Дизайн сайта для дилера MV Agusta, выполненный на заказ и позднее превращённый студией в работающий цифровой шоурум. Визуальный характер бренда сохраняется на всём пути: от знакомства с моделями до выбора мотоцикла в наличии и связи с дилером.

Две стороны дилерского центра

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

Бриф

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

Дизайн-решения

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

После передачи дизайна мы сами превратили его в работающий сайт. Общие шаблоны страниц сохраняют одинаковые навигацию, представление моделей и выбор наличия во всём шоуруме.

Наш вклад

Мы подготовили UX/UI-дизайн и переиспользуемые компоненты, затем в рамках студийного проекта разработали фронтенд шоурума и анимацию. Фирменный стиль и изображения мотоциклов принадлежат MV Agusta.

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

Показать доступные мотоциклы у самого входа.

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

Тест-драйвы и сервис идут следующими прямыми действиями. Это повседневные причины приехать к дилеру, поэтому у них ясное место в иерархии страницы.

Карточка модели Dragster RR SCS: вид мотоцикла сбоку, стрелки смены ракурса, образцы цветов, шесть характеристик и кнопка просмотра наличия
Из подробностей модели можно сразу перейти к её наличию

Сохранить следующий шаг рядом с моделью.

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

Просмотр наличия переносит выбранную модель в фильтр склада. Так выразительная страница модели связана с доступными мотоциклами дилера.

Наличие с фильтром Dragster RR SCS: один мотоцикл с ценой, характеристиками, частью VIN, годом, пробегом, владельцами, цветами и кнопкой запроса
Выбор Dragster с подробностями одного мотоцикла из наличия

Дать каждому мотоциклу собственные подробности.

Объявлению о наличии недостаточно названия модели. Мы разместили рядом с мотоциклом запрашиваемую цену, год, пробег, прежних владельцев и часть VIN, а также действие отправки запроса.

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

Первый экран Dragster RR SCS: крупный красно-чёрный мотоцикл на тёмном фоне, название модели и короткий текст
Знакомство с моделью задаёт масштаб и характер
Редакционный блок Dragster: крупный план жёлтого обтекателя, заголовок о контроле тяги для молниеносного старта и короткий текст
Крупный план даёт сосредоточенное объяснение одной технической особенности

Провести бренд через весь путь покупки.

Крупные изображения мотоциклов, сильная типографика и светло-тёмный контраст сохраняют узнаваемость MV Agusta. Мы использовали фотографии бренда в новой композиции и системе компонентов.

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

Переданный дизайн и работающий шоурум.

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

Другие проекты

RU