Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

Легенды не стареют, но их сайты иногда нуждаются в обновлении. В начале 2022 года официальный российский представитель Минского автомобильного завода (“МАЗ”) в России обратился в агентство MediaNation за разработкой нового онлайн-представительства.

Корпоративный брендбук и ассортимент из более 100 мощных автомобилей задали серьезный тон работе специалистов MediaNation с момента разработки прототипов сайта.

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

О клиенте и исходная ситуация

“МАЗ-РУС” – российская дочерняя компания Минского автомобильного завода - легендарного “МАЗ”, известного по всему СНГ и далеко за его пределами, ведущего предприятия Республики Беларусь.

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

В ассортимент компании входят более 100 наименований большегрузной автомобильной, грузовой и автобусной техники.

До обращения в MediaNation сайт клиента выглядел так:

Главная страница прежнего сайта (1)
Главная страница прежнего сайта (1)
Главная страница прежнего сайта (2)
Главная страница прежнего сайта (2)
Каталог техники на прежнем сайте
Каталог техники на прежнем сайте

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

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

Корпоративный брендбук

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

Фрагменты брендбука

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

Требования особой важности – к шрифтам и цветам. Нам предстояло сделать сайт в полном соответствии с корпоративными дизайн-решениями, но со свободой творчества в области расположения блоков и анимаций.

Алексей Гальченко, руководитель отдела разработки MediaNation

От фотосессии до главной страницы

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

Прототипы нового сайта в Figma
Прототипы нового сайта в Figma

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

Только при просмотре главной страницы пользователю удается охватить 37% всего ассортимента техники.

Слайдер на главной странице

В качестве платформы для сайта мы выбрали привычный CMS 1С-Битрикс. Также программисты использовали фреймворк Vue.js. С его помощью удалось добиться молниеносности интерфейса.

На первый экран главной страницы мы поместили вариативный слайдер. Наш клиент может самостоятельно менять фоны, МАЗы и подписи в зависимости от цели.

Чтобы сделать удобный вариативный слайдер, мы

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

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

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

Ближе к концу главной страницы – карта представительств и информация про сервис. Карта сделана с применением фильтра. Пользователь может поставить галочки на удобные варианты и получить ближайшие к нему точки дилеров и СТО.

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

В конец сайта поместили «подвал», по объему занимающий целый экран. Помимо карты сайта тут есть все важные контакты и ссылки.

Переход в каталог

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

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

Для перехода в каталог пользователю необходимо навести курсор на кнопку «Техника», где откроется список из 4 больших разделов, которые соответствуют 4 категориям техники.

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

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

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

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

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

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

Страницу “О компании” мы оформили в формате журнала. На ней несколько разделов:

  • Цель компании,
  • Миссия компании,
  • О МАЗ в России,
  • Факты о компании,
  • История МАЗ.
Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

Историю компании мы представили в виде интерактивной хронологической ленты, при скроллинге которой выдается историческая справка выбранного года.

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

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

Последние две важные страницы – «Новости» и «Дилерская сеть». Здесь так же, в «журнальном» формате, собрана вся важная информация.

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

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

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

Адаптивность сайта

Мы сделали сайт адаптированным под все виды устройств – от смартфона и планшета до компьютеров с разной диагональю экрана. Сайт автоматически подстраивается под размер экрана девайса, с которого осуществляется вход.

Припарковали легендарные большегрузы на новом сайте “МАЗ-РУС” — кейс по разработке сайта от MediaNation

Что получил клиент

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

В работе со специалистами MediaNation нам был важен их профессионализм, но еще более важным было то, что коллеги разделили нашу любовь к технике и разработали уникальный дизайн для нашего нового сайта. Трепет, с которым специалисты работали над сайтом, был сравним с тем, как конструкторы “МАЗ” продумывают каждую деталь автомобиля. Скорость работы, внимание к нашим пожеланиям и инициатива отдела разработки сделали создание нового сайта следующим этапом в развитии нашей компании. Специалистам удалось передать характер техники через элементы дизайна и контент, что очень важно для брендовой составляющей “МАЗ".

Вадим Цой, зам. начальника информационно-аналитического отдела

ООО "МАЗ-РУС"

1313
12 комментариев

Информативно и красиво получилось. Обновления - всегда приятно. Удачи!

3
Ответить

Парни что это за дерьмо

3
Ответить

Автобус. А что не так?

1
Ответить

Работала в автобизнесе, непонаслышке знаю, как сложно там что-то согласовать, особенно такое важное. Очень стильный сайт получился! Наверняка, вся команда выдохнула, поэтому от всей души поздравляю, хороший подарок на новый год))

2
Ответить

Я одного не понял, а цели бизнеса достигли? Какой он хотел образ достичь? И получилось ли? А фотки - шик

1
Ответить

по-видимому,да. там же отзыв заказчик написал

Ответить

все круто, конечно, но текстурки и тени это ужас

1
Ответить