Заполнить бриф Скачать презентацию

ИЗГТ

Завод гусеничной техники
Иркутск

Иркутский завод гусеничной техники — крупнейший производитель гусеничных и колесных вездеходов в Восточной Сибири и на Дальнем Востоке.

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

Оказанные услуги:
дизайн, разработка сайта
Технологии:
HTML, CSS, JS, JQ PHP, Wordpress, Illustrator, Figma
Команда:
менеджер проектов, веб-дизайнер, frontend-разработчик. backend-разработчик, тестировщик, контент-менеджер.

Задача

Разработать лендинг для запуска рекламных кампаний вездехода «Росомаха».

 

 

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

 

Особенности проекта:

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

 

 

Этапы работы

1. Написание ТЗ
Зафиксировали требования к функциональности сайта и пожелания клиента.

 

2. Прототип
Составили схему сайта: из каких блоков он будет состоять, какая информация будет размещена.

 

3. Дизайн
Отрисовали визуал сайта под десктоп и мобильную версию, определили, где и какие фото и видео будут использоваться, и продумали анимацию.

 

4. Верстка
Сверстали сайт по макетам и создали анимацию.

 

5. Установка панели администрирования
Выбрали WordPress, потому что эта CMS максимально простая и удобная для управления контентом, и основной сайт клиента тоже работает на WP.

 

6. Тестирование верстки и функциональности сайта

 

Вёрстка:
убедились, что проект корректно отображается во всех браузерах и на всех типах устройств: от десктопа до мобильного телефона.

 

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

 

7. Заполнение
Отредактировали тексты заказчика под блоки, которые определили на этапе создания прототипа, адаптировали фото и видео с вездеходом под веб, и загрузили их на лендинг.

 

 

Структура прототипа

Получили от клиента информацию о вездеходе: документацию, тексты с описаниями, видео, фотографии и 3D-модели. Провели интервью с представителем отдела продаж и узнали: кто покупает вездеходы, из каких регионов, кто занимается подбором техники. Изучили и прописали портреты ЦА и продумали гипотезы, что важно каждой группе из их ЦА

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

Визуальное оформление

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

Особенности «Росомахи» отобразили с помощью 3D. Чтобы сайт быстрее загружался, мы использовали модели в формате видео, а не 3JS — формат встраивания самой модели на сайт. Для этого дизайнеры подготовили разные нарезанные видеоролики, а отдел разработки настроил их правильное отображение и незаметную смену видеороликов.

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

На экранах с основными назначениями «Росомахи» и преимуществами «ИЗГТ» использовали фоновые видео с реального тест-драйва и производства вездеходов.

 

Прелоадер

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

 

Результаты

Разработали лендинг для рекламной кампании «Росомахи». Сайт даёт полное представление о вездеходе «Росомаха» с помощью понятной структуры, подробного наполнения и наглядного визуального оформления.

Спасибо, ваша заявка отправлена
Что-то пошло не так, попробуйте еще раз