Как мы разработали сайт для МАЗа с высоким уровнем юзабилити и передали через экран характер компании

Главное о кейсе

Официальный представитель «Минского автомобильного завода» (МАЗ) в России обратился в MediaNation за обновлением веб-сайта. Требовалось провести редизайн, разработать современный сайт, но при этом не уйти за рамки строгого брендбука и в выгодном свете показать более более 100 наименований грузовой техники.

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

The official representative of the Minsk Automobile Plant (MAZ) in Russia contacted MediaNation to update the website. It was necessary to carry out a redesign, develop a modern website, but at the same time not go beyond the strict brandbook and show more than 100 types of trucks in a favorable light.

We managed to create a website for a complex product with an “intellectually simple” interface. We modernized the website, which influenced the change in the entire appearance of the company. We not only updated the design and layout of the site, but also contributed to changing the content component — high-quality large-format photographs of cargo equipment immediately awakened a genuine interest in powerful, bright heavy trucks in the site visitor.

Как проект изменил жизнь пользователей

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

It has become easier for users to navigate the site and find the information they need. High-quality photographs of MAZs arouse interest in trucks. After updating the site, the client reported a reduction in the bounce rate on the website and an increase in the number of requests to the Russian representative office of MAZ.

Бизнес-задача и ее решение

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

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

ПРОБЛЕМА
До обращения в MediaNation сайт клиента выглядел так: Рисунок 1-3
Вся важная информация была на месте, вот только дизайн не соответствует духу времени. Любительские фото техники и устаревший дизайн не вызывают у пользователя восторга от техники, которая в реальной жизни захватывает дух. Такая “усталость” сайта автоматически переносится на весь бренд. Поэтому клиент принял решение модернизировать сайт.

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

РЕШЕНИЕ

Этап 1: изучение брендбука и прототипирование

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

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

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

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

Этап 2: разработка сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

- Цель компании,
- Миссия компании,
- О МАЗ в России,
- Факты о компании,
- История МАЗ.

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

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

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

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

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

STARTING SITUATION
“MAZ-RUS” is a Russian subsidiary of the Minsk Automobile Plant - the legendary “MAZ”, known throughout the CIS and far beyond its borders, the leading enterprise of the Republic of Belarus.

The company's strategic goal is to offer consumers competitive cargo and passenger vehicles and automotive components that meet mandatory and legislative requirements. The company's product range includes more than 100 items of heavy-duty automobile, truck and bus equipment.

PROBLEM
Before contacting MediaNation, the client's site looked like this: Figure 1-3
All the important information was in place, but the design was outdated. Amateur photos of equipment and obsolete design did not make the user delighted with technology, which in real life will take your breath away. This “fatigue” of the site is automatically transferred to the entire brand. Therefore, the client decided to modernize the site.

The new website had to meet the company’s global goal and become a showcase for all the manufacturer’s equipment, and at the same time have a user-friendly interface and fast loading speed.

SOLUTION

Stage 1: brand book study and prototyping

Before starting to create site prototypes, the development team studied 70 pages of requirements for working with the brand’s corporate identity (Figure 4).

For large enterprises, it is especially important that all design elements across all platforms are executed to the same standards. Requirements of particular importance are for fonts and colors. We had to make a website in full compliance with corporate design solutions, but with freedom of creativity in the area of block placement and animation.

One of the main roles on a website is played by high-quality content, so we set the client the task of quickly conducting a professional photoshoot. We needed high-quality photographs of equipment - a lot of photographs. When the images were ready, we began distributing them throughout the site.

At the prototyping stage, we worked out all the client’s design wishes, drew page layouts and thought through the arrangement of information blocks in such a way that the user could study MAZs without going to the catalog. Only when viewing the main page, the user manages to cover 37% of the entire range of equipment (Figure 5).

Stage 2: website development

We chose the familiar 1C-Bitrix CMS as the platform for the site. The programmers also used the Vue.js framework. With its help, we managed to achieve a lightning-fast interface.

1) Home page
We placed a variable slider on the first screen of the main page. Our client can independently change backgrounds, MAZs and signatures depending on the purpose.

To make a convenient variable slider, we
- prepared separate images with road surface, landscapes and blocks with advantage,
- added multi-layered animation, optimized for speed, so that when switching a slide, the effect of a driving car is created.

We designed the images for the USP section in the graphic outline of the cars so that important information about the company does not get lost among other information blocks (Figure 6).

Towards the end of the main page there is a map of representative offices and information about the service. The map was made using a filter. The user can tick convenient options and get the dealers and service stations closest to him.

A footer was placed at the end of the site, occupying the entire screen. In addition to the site map, there are all important contacts and links.

2) Go to the web directory
If the product is complex, the site interface should be intellectually simple for the user. Therefore, we placed many buttons in the site header, but arranged them in strict logic, in the order familiar to the user. Such a header will not cause the user to feel anxious due to a clutter of elements.

To go to the catalog, the user needs to hover over the “Equipment” button, where a list of 4 large sections that correspond to 4 categories of equipment will open (Figure 7)

When switching to a specific category or type of car, the user is taken to a separate landing page entirely dedicated to the selected car. This was done both for the convenience of the user and for further use in contextual advertising - it is convenient to direct advertising traffic to such pages.

We added the ability to display the catalog both in block and table format. The demonstration option in the form of blocks allows you to view a large image of the car, and in the list format you can cover a larger number of equipment on one screen (Figure 8)

3) Placed more than 100 cars
The current MAZ line includes more than a hundred cars, each of which needed to be shown so that the user could examine it in detail. But at the same time, it was important for us to avoid catalog redundancy, when the range of products on the page stretched across dozens of screens. In addition to the fact that the excessive size of the catalog could discourage the user, it also slowed down the site (Figure 9).
We found a solution to show a large amount of equipment and save space - we used hidden blocks, where the transition from one block to another is accompanied by animation (Figure 10).

4) Image pages of the site
We designed the “About the Company” page in a magazine format. There are several sections on it (Figure 11):

- The goal of the company,
- Company's mission,
- About MAZ in Russia,
- Facts about the company,
- History of MAZ.

We presented the history of the company in the form of an interactive chronological tape, when scrolling, a historical certificate of the selected year was issued (Figure 12).

Such a specific product as equipment requires extensive documentary support, so at the stage of creating a section with documents it was important to create a design that would be convenient for quickly finding the necessary files. We chose a block layout and additionally created a menu of files by category (Figure 13).

The last two important pages are “News” and “Dealer Network”. Here, too, in a “magazine” format, all the important information is collected (Figure 14).

Together with the customer, we collected popular user questions and prepared a page with answers to the questions (Figure 15).

5) Website adaptivity
We made the site adapted for all types of devices - from smartphones and tablets to computers with different screen sizes. The site automatically adjusts to the screen size of the device from which you are logging in (Figure 16).

Крафт (мастерство), реализация, технические детали

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

We chose the familiar 1C-Bitrix CMS as the platform for the site. The programmers also used the Vue.js framework. With its help, we managed to achieve lightning-fast interface.

Прочая информация о кейсе

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

Legends never get old, but their websites sometimes need updating. The official Russian representative of the Minsk Automobile Plant (“MAZ”) in Russia turned to the MediaNation agency to develop a new online representation. The corporate brand book and an assortment of more than 100 powerful cars set a serious tone for the work of specialists from the moment the website prototypes were developed.

Скриншоты

Комментарий заказчика

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