Создание сайта услуг обслуживания автопарков

«Клинкар» — B2B-компания, которая занимается обслуживанием автопарков: от ежедневной мойки и сезонного шиномонтажа до межрегиональных перегонов и решения экстренных ситуаций. У компании был сайт, но он не отражал ни масштаба бизнеса, ни ключевого преимущества — комплексности. Компания воспринималась узко, в основном как перевозчик, что сильно ограничивало потенциал для привлечения новых корпоративных клиентов.

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

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

На основе выводов маркетингового исследования, мы построили архитектуру будущего сайта, которая отражала бизнес-логику «Клинкара».

• На первом уровне — страницы-хабы, которые говорили на языке выгод клиента: «Комплексное обслуживание автопарков» (главный офер), а также раздел «Клиентам и партнёрам».
• На втором уровне — страницы каждой из 7 ключевых услуг (перегон, эвакуация, шиномонтаж, автомойка и т. д.). Решение о выборе подрядчика в B2B-сегменте принимается обдуманно и обоснованно. Поэтому каждой услуге нужно было своё пространство для подробного рассказа о процессе, гарантиях, снятия возражений.

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

Чтобы сайт вёл за собой клиента, мы проработали логику страниц, содержание и последовательность блоков.

• Для Главной страницы мы сформулировали сильный офер-заголовок, который сразу бил в цель: «Комплексное обслуживание автомобилей в B2B сегменте. Управляйте автопарком онлайн — остальное берём на себя! Минимизируйте простои, оптимизируйте расходы и получите максимальный сервис с Клинкар: перегон, мойка, шиномонтаж и многое другое с нашей логистикой и поддержкой 24/7». Дальнейшие блоки были выстроены как цепь аргументов: наглядная визуализация всех услуг, переход к преимуществам в цифрах (более 4000 перегнанных авто, эвакуация за 4 часа), демонстрация собственного приложения для контроля над автопарком, призыв к действию.

• Заложили презентацию всех услуг на Главной. Мы понимали, что скрывать какую-либо услугу нельзя — в B2B для принятия решения важна полная картина. Однако просто перечислить 7−8 направлений текстом неэффективно. Мы спроектировали интерактивный блок с карточками услуг, который при скролле собирался в единую, легко обозримую панель. Это позволило пользователю быстро ознакомиться с каждой услугой по отдельности, а в итоге — увидеть всю мощь комплексного предложения «Клинкар» на одном экране, что усилило позиционирование компании как интегратора.

Вся аналитическая работа — маркетинговое исследование, структура сайта, UX-логика — была оформлена в виде комплексного предложения и стала чётким техническим заданием и дорожной картой для следующих этапов работы: создания дизайна и программирования сайта. Мы не просто предложили как сделать сайт, а представили стратегически выверенный план по привлечению прибыльных корпоративных клиентов.

В основу дизайн-концепции лёг фирменный стиль компании. Мы выбрали для проекта простую сетку, минималистичную, не перегруженную деталями. Она позволила грамотно расположить контент на сайте и не отвлекать пользователя от цели.

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

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

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

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

Когда дизайн был готов, мы приступили к программированию сайта. В основе разработки лежали Pug, SCSS и JavaScript, а сборка проекта велась через Webpack. Такой стек позволил сделать код модульным и чистым, а проект — гибким и готовым к масштабированию.

Все блоки свёрстаны модульно, что упрощает дальнейшую интеграцию в CMS и поддержку проекта.

Мы использовали отзывчивую вёрстку (Responsive Layout) — это комбинированный вариант адаптивной и резиновой вёрстки:

• резиновая сетка обеспечивает плавное изменение ширины блоков под любое разрешение экрана;
• адаптивные брейкпоинты гарантируют удобное отображение на десктопах, планшетах и мобильных устройствах.

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

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

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

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

Создание градиентного тумана для мягких переходов между блоками стало отдельным квестом: пришлось прилично повозиться с анимацией SVG-элемента и подключить JavaScript. В итоге переходы получились лёгкими и эффектными — как сцена с аккуратным спецэффектом.

Градиентный шар, движущийся по нестандартной траектории, стал ярким акцентом сайта.

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

Ещё одной непростой задачей стала интерактивная SVG-карта России:  при наведении подсвечиваются  регионы и выводится название соответствующей области.

Следующим этапом стала натяжка на WordPress. Для удобства управления контентом мы использовали Carbon Fields:

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

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