Разработка лендинга для вездехода «Росомаха»
Иркутский завод гусеничной техники — крупнейший производитель гусеничных и колесных вездеходов в Восточной Сибири и на Дальнем Востоке.
Производят технику для B2B сферы: например, для компаний по добыче полезных ископаемых или компаний, которые прокладывают ЛЭП. Вездеходы используются для доставки грузов и людей по снежной целине, болотистой или лесистой местности.
Задача
Разработать лендинг для запуска рекламных кампаний вездехода «Росомаха».
Корпоративный сайт не подходил под роль посадочной страницы — много неструктурированного текста и мало визуала. Мы провели анализ сайта и увидели, что со страниц с вездеходами происходит много отказов: посетители смотрят фотографии, бегло проходят по тексту и уходят с сайта. Поэтому мы предложили сделать отдельный лендинг для рекламных кампаний.
Особенности проекта:
- Составить структуру для лендинга, где будет только то, что интересно для пользователей, которые пришли с рекламной кампании.
- Продумать визуальное оформление, чтобы даже «сухие» данные легче воспринимались.
Этапы работы
1. Написание ТЗ
Зафиксировали требования к функциональности сайта и пожелания клиента.
2. Прототип
Составили схему сайта: из каких блоков он будет состоять, какая информация будет размещена.
3. Дизайн
Отрисовали визуал сайта под десктоп и мобильную версию, определили, где и какие фото и видео будут использоваться, и продумали анимацию.
4. Верстка
Сверстали сайт по макетам и создали анимацию.
5. Установка панели администрирования
Выбрали WordPress, потому что эта CMS максимально простая и удобная для управления контентом, и основной сайт клиента тоже работает на WP.
6. Тестирование верстки и функциональности сайта
Вёрстка:
убедились, что проект корректно отображается во всех браузерах и на всех типах устройств: от десктопа до мобильного телефона.
Функциональность:
проверили общую работоспособность сайта, провели код-ревью, исправили внутренние баги, настроили скорость анимации и убедились, что форма заявки корректно отправляется.
7. Заполнение
Отредактировали тексты заказчика под блоки, которые определили на этапе создания прототипа, адаптировали фото и видео с вездеходом под веб, и загрузили их на лендинг.
Структура прототипа
Получили от клиента информацию о вездеходе: документацию, тексты с описаниями, видео, фотографии и 3D-модели. Провели интервью с представителем отдела продаж и узнали: кто покупает вездеходы, из каких регионов, кто занимается подбором техники. Изучили и прописали портреты ЦА и продумали гипотезы, что важно каждой группе из их ЦА
На основании разработанных гипотез определили, какую информацию нужно использовать, какие смысловые блоки и элементы должны присутствовать на лендинге и распределили их по степени важности.
Визуальное оформление
Чтобы информация воспринималась легче, мы разбили каждый экран на логические блоки и определили, сколько информации должно быть в них отображено. Продумали анимацию для экранов. Проанимировали даже «сухие» технические характеристики: при наведении курсора на «максимальную скорость», через слайдер появляется картинка спидометра.
Особенности «Росомахи» отобразили с помощью 3D. Чтобы сайт быстрее загружался, мы использовали модели в формате видео, а не 3JS — формат встраивания самой модели на сайт. Для этого дизайнеры подготовили разные нарезанные видеоролики, а отдел разработки настроил их правильное отображение и незаметную смену видеороликов.
Проходимость вездехода наглядно продемонстрировали с помощью отдельного блока с анимацией, где вездеход едет по бездорожью, глубокому снегу, обледенелой дороге и болоту.
На экранах с основными назначениями «Росомахи» и преимуществами «ИЗГТ» использовали фоновые видео с реального тест-драйва и производства вездеходов.
Прелоадер
Любые сайты со сложным визуальным оформлением, где используется много изображений, анимации и видео, загружаются дольше текстовых сайтов — это особенность таких проектов. Чтобы пользователи не заскучал пока сайт загружается, мы поставили интересный прелоадер: в процентах указывается степень загрузки сайта и параллельно перечисляются реальные этапы сборки вездеходов.
Результаты
Разработали лендинг для рекламной кампании «Росомахи». Сайт даёт полное представление о вездеходе «Росомаха» с помощью понятной структуры, подробного наполнения и наглядного визуального оформления.
