Boulder
Boulder — российский производитель спецтехники, создающий надежные и мощные машины для самых сложных условий. Компания разрабатывает и выпускает современную спецтехнику, включая экскаваторы, фронтальные погрузчики, вилочные погрузчики и экскаваторы-погрузчики
Задача
После успешного ребрендинга и выпуска обновленной линейки техники, компания Boulder поставила задачу обновить свой сайт. Основные цели проекта заключались в том, чтобы сделать структуру сайта более логичной и дизайн более современным, открытым и легким. Это должно было подчеркнуть инновационность компании и ее приверженность минималистичному подходу. Кроме того, существующий код требовал рефакторинга для упрощения процесса масштабирования сайта в будущем
Роль
Продуктовый дизайнер
Таймлайн
Февраль – Декабрь 2024
Обязанности
Проведение исследований
Интервью
Lo Fi и Hi Fi макеты
Защита решений перед стейкхолдерами
Прототипирование
Дизайн ревью
Анализ текущего решения
Сначала я провел аудит текущего решения, чтобы определить недочеты на которые стоит обратить максимум внимания при проектировании. После этого провел серию интервью и брифинг клиента, чтобы лучше понять главные проблемы текущего решения и ожидания от нового
Структура
В основу редизайна легло детальное исследование отрасли. Я проанализировал сайты ведущих производителей спецтехники: изучил, как Caterpillar и Komatsu презентуют продукцию, как Liebherr и John Deere структурируют каталог, как Hitachi и Volvo подают сервисные услуги. Этот анализ помог создать современную структуру сайта, где каждый раздел — от каталога до страницы о компании — соответствует лучшим отраслевым практикам
Дизайн концепция
В отрасли спецтехники преобладают сайты с яркими, броскими цветами. Мы пошли другим путем, выбрав монохромную палитру. Это решение подчеркнуло технологичность бренда, выделило компанию среди конкурентов и позволило сделать акцент на самой технике как главном визуальном элементе
Шрифт
При выборе шрифта для Boulder стояла задача отразить характер производителя тяжелой техники. Мы остановились на Manrope — современном геометрическом гротеске. Его четкие линии и жирные начертания подчеркнули технологичность бренда и визуальную мощь, при этом шрифт отлично читается
Проектирование
Разработка дизайна шла пятидневными спринтами: каждый раздел сайта проектировался с адаптацией под все устройства. В конце спринта проводили командную сессию — обсуждали макет, искали возможности для улучшений. Итеративный подход позволял нам постоянно шлифовать дизайн, добиваясь максимальной функциональности и эстетики. Мы не останавливались на первом варианте, а методично двигались к идеальному решению через последовательные улучшения и доработки.
Дизайн система
Параллельно с разработкой сайта мы создавали собственную дизайн-систему.Такой подход не только оптимизировал нашу текущую работу, но и создал гибкий инструмент для будущего развития проекта.
Первый экран — было
Первый экран прошлой версии сайта страдал от трёх ключевых проблем: тяжёлое фоновое видео тормозило загрузку, избыток информации рассеивал внимание пользователя, а пять разных призывов к действию создавали путаницу в навигации
Первый экран — стало
Вместо видео-баннера, мы реализовали сменяемый баннер, который можно легко адаптировать под несколько коммерческих предложений. На главном банере четко и кратко сформулирована основная деятельность компании, а ниже подсветили несколько ключевых преимуществ. Теперь посетители могут быстро понять основную направленность компании и ознакомиться с ее преимуществами
Калькулятор лизинга — было
Благодаря Яндекс Метрике мы узнали, что более 35% пользователей сайта интересуется лизингом и это логично, ведь технику обычно приобретают для бизнеса. Чтобы оформить заявку на лизинг нужно было выбрать конкретный вид техники, лизинговую компанию, внести свои данные и только после этого появлялась возможность отправить заявку — звучит сложно
Калькулятор лизинга — стало
Во время интервью с пользователями мы обнаружили, что многие клиенты выбирают технику исходя из возможностей лизинга, а не наоборот. Кроме того, они часто ищут наиболее выгодные предложения по лизингу без привязки к конкретной компании. В новом дизайне мы наглядно показываем условия, преимущества и банки-партнеров. Заявка отправляется сразу во все банки, а менеджер подбирает оптимальное решение, упрощая выбор и экономя время.
Калькулятор лизинга
Лизинг — это важный аспект для пользователей в сегменте BTB, поэтому калькулятор лизинга есть и на главной странице и на странице техники. В калькуляторе лизинга можно рассчитать примерные условия, а также узнать про льготы, доступные бизнесу
Каталог техники
Boulder предлагает несколько видов техники. Для каждого вида создана отдельная страница каталога, где можно полистать фото и посмотреть основные характеристики
Страница модели
У каждой модели есть галерея с фотографиями и уникальное описание. Во время просмотра галереи технику можно заказать либо добавить в Избранное
Презентация
Каждая модель обладает уникальными особенностями и характеристиками, которые подробно представлены в описании. Для представителей отделов закупок мы предусмотрели возможность скачать готовую PDF-презентацию – это поможет убедительно представить технику руководству
Покупка
Навесное оборудование — один из важный элементов дополнительных продаж для компании, поэтому при добавлении техники в заказ предлагаем выбрать подходящее. Даже если пользователь ничего не выберет, он будет знать о возможности докупить нужные аксессуары
Блог
Чтобы улучшить вовлеченность и возвращаемость пользователей, а также улучшить позиции SEO сделали блог компании, который регулярно пополняется статьями на тематику
Редактор статей
Написанием статей занимается отдел маркетинга — для них был создан интерфейс для формирования статьи с помощью готовых блоков и возможностью добавления галереи фотографий
Пустые состояния и ошибка 404
Были проработаны разные корнер кейсы и реализованы пустые состояния для страниц, а также страница ошибки 404
Результат
По итогам первых 4 месяцев работы новый сайт показал рост по важным показателям, таким как: глубина просмотра, время проведенное на сайте и процент отказа. Это значит, что новый дизайн был воспринят положительно и мы движемся в правильном направлении
