Официальный представитель «Минского автомобильного завода» (МАЗ) в России обратился в 
MediaNation за обновлением веб-сайта. Агентству требовалось провести редизайн, разработать современный сайт, но при этом не уйти за рамки строгого брендбука и в выгодном свете показать более более 100 наименований грузовой техники. Подробности Sostav рассказали представители MediaNation.
Исходная ситуация
«МАЗ-Рус» — российская дочерняя компания белорусского МАЗа, известного в СНГ и далеко за его пределами. Её стратегическая цель — предложить потребителю конкурентоспособную грузовую и пассажирскую технику и автокомпоненты, соответствующие обязательным и законодательным требованиям. В ассортимент компании входят более 100 наименований большегрузной автомобильной, грузовой и автобусной техники.
До обращения в MediaNation сайт клиента выглядел так:
«Вся важная информация на месте, вот только дизайн не соответствует духу времени. Любительские фото техники и устаревший дизайн не вызывают у пользователя восторга от техники, которая в реальной жизни захватывает дух. Такая „усталость“ сайта автоматически переносится на весь бренд. Поэтому клиент принял решение модернизировать сайт», — объясняет команда MediaNation.
Новый сайт должен был соответствовать глобальной цели компании и стать витриной для всей техники производителя, и в то же время обладать удобным интерфейсом и быстрой скоростью загрузки.
Корпоративный брендбук
Перед началом создания прототипов сайта команда разработки изучила 70 страниц требований к работе с фирменным стилем бренда. Как отмечают представители агентства, большим предприятиям особенно важно, чтобы все элементы дизайна на любых платформах были выполнены по единым стандартам.
Требования особой важности — к шрифтам и цветам. Команде предстояло сделать сайт в полном соответствии с корпоративными дизайн-решениями, но со свободой творчества в области расположения блоков и анимаций.
От фотосессии до главной страницы
Одну из главных ролей на сайте играет качественный контент, подчёркивают специалисты. Поэтому агентство попросило клиента оперативно провести профессиональную фотосессию. Когда изображения были готовы, команда приступила к их распределению по сайту.
На стадии прототипирования агентство MediaNation отработало все пожелания клиента в отношении дизайна, отрисовало макеты страниц и продумало расположение информационных блоков таким образом, чтобы пользователь смог изучить МАЗы не переходя в каталог. Только при просмотре главной страницы пользователю удается охватить 37% всего ассортимента техники, отмечает команда.
В качестве платформы для сайта специалисты выбрали CMS «1С-Битрикс». Также программисты использовали фреймворк Vue.js. С его помощью удалось добиться молниеносности интерфейса.
На первый экран главной страницы агентство поместило вариативный слайдер. Так, клиент может самостоятельно менять фоны, МАЗы и подписи в зависимости от цели. Чтобы сделать удобный вариативный слайдер, специалисты:
- подготовили отдельные изображения с дорожным покрытием, пейзажами и блоками с преимуществами;
- добавили многослойную анимацию, оптимизированную по скорости, чтобы при переключении слайда создавался эффект уезжающей машины.
Изображения для раздела с УТП команда оформила в графическом контуре автомобилей, чтобы важная информация о компании не затерялась среди других информационных блоков.
Ближе к концу главной страницы расположились карта представительств и информация о сервисе. Карта сделана с применением фильтра: пользователь может поставить галочки на удобные варианты и получить ближайшие к нему точки дилеров и СТО.
В конец сайта агентство MediaNation поместило «подвал», по объёму занимающий целый экран. Помимо карты сайта здесь есть все важные контакты и ссылки.
Переход в каталог
Если товар сложный, интерфейс сайта должен быть интеллектуально простым для пользователя, отмечает MediaNation. Поэтому в шапку сайта специалисты поместили много кнопок, но расположили их в строгой логике, в привычном для пользователя порядке. Как объясняет агентство, такой хедер не вызовет у пользователя чувства тревоги от нагромождения элементов.
Для перехода в каталог пользователю необходимо навести курсор на кнопку «Техника», где откроется список из четырёх больших разделов, которые соответствуют четырём категориям техники.
При переходе на конкретную категорию или тип авто пользователь попадает на отдельную посадочную страницу, полностью посвящённую выбранной машине. Это было сделано и для удобства пользователя, и для дальнейшего применения в контекстной рекламы — на такие страницы удобно направлять рекламный трафик, обращают внимание специалисты.
Агентство MediaNation добавило возможность отображения каталога как в форме блоков, так и в формате таблицы. Вариант демонстрации в форме блоков даёт возможность просмотра крупного изображения автомобиля, а в формате списка можно охватить большее количество техники на одном экране.
Актуальная линейка МАЗа включает более сотни автомобилей, каждый из которых было необходимо показать так, чтобы пользователь мог рассмотреть его детально. «В то же время нам важно было избежать избыточности каталога, когда ассортимент товаров на странице растягивался на десятки экранов. Кроме того, что чрезмерный объём каталога мог отпугнуть пользователя, он также замедлял работу сайта, — рассказали специалисты MediaNation. — Наша команда нашла решение, чтобы показать большое количество техники и сэкономить место. Мы использовали скрытые блоки, где переход от одного блока к другому сопровождается анимацией».
Страницу «О компании» агентство оформило в формате журнала. На ней несколько разделов:
- цель компании;
- миссия компании;
- о МАЗ в России;
- факты о компании;
- история МАЗ.
Историю компании агентство MediaNation представило в виде интерактивной хронологической ленты, при скроллинге которой выдаётся историческая справка выбранного года.
«Такой специфический товар, как техника, требует обширного документального сопровождения, поэтому на этапе создания раздела с документами важно было создать дизайн, комфортный для быстрого поиска необходимых файлов. Мы выбрали блочное расположение и дополнительно создали меню файлов по категориям», — поделилась команда агентства.
Последние две важные страницы — «Новости» и «Дилерская сеть». Здесь так же, в «журнальном» формате, агентство собрало всю важную информацию.
Совместно с заказчиком команда MediaNation собрала популярные вопросы пользователей и подготовила страницу с ответами на вопросы.
Адаптивность сайта
MediaNation сделало сайт адаптированным под все виды устройств: от смартфона и планшета до компьютеров с разной диагональю экрана. Сайт автоматически подстраивается под размер экрана девайса, с которого осуществляется вход.
Алексей Гальченко, технический директор MediaNation:
Модернизация сайта повлияла на изменение всего облика предприятия. Мы не только обновили дизайн и вёрстку сайта, но способствовали изменению контентной составляющей — качественные широкоформатные фотографии техники сразу пробуждают у посетителя сайта неподдельный интерес к мощным, ярким большегрузам.
Вадим Цой, заместитель начальника информационно-аналитического отдела «МАЗ-Рус»:
В работе со специалистами MediaNation нам был важен их профессионализм, но ещё более важным было то, что коллеги разделили нашу любовь к технике и разработали уникальный дизайн для нового сайта. Трепет, с которым команда работала над сайтом, был сравним с тем, как конструкторы МАЗа продумывают каждую деталь автомобиля. Скорость работы, внимание к нашим пожеланиям и инициатива отдела разработки сделали создание нового сайта следующим этапом в развитии нашей компании. Специалистам удалось передать характер техники через элементы дизайна и контент, что очень важно для брендовой составляющей МАЗа.