Kuraj-voyage.ru

Информация о проекте

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

Цели создания сайта:

• Создать современный имиджевый ресурс, способный передать характер бренда — «морского волка с душой романтика».
• Разработать удобный каталог вояжей и флота с детальными карточками и умной фильтрацией.
• Внедрить многоступенчатую систему онлайн-бронирования с выбором катера, даты, дополнительных услуг (питание, фотограф, музыка) и динамическим расчётом стоимости.
• Реализовать интерактивные анимированные карты маршрутов, визуализирующие ключевые точки путешествия.
• Интегрировать сайт с Google Календарями для автоматической синхронизации занятости судов и исключения двойных броней.
• Настроить интеграцию с CRM Битрикс24 для автоматического захвата лидов и учёта статусов заказов.
• Подключить онлайн-эквайринг для безопасной оплаты и добавить возможность генерации подарочных сертификатов.

Решение

Работа над проектом началась с погружения в специфику бизнеса. Вместе с заказчиком мы детально разобрали его позиционирование: главная задача была не просто создать «красивый катерный сайт», а передать атмосферу приключения, юмора и душевности, которая отличает «Кураж-Вояж» от конкурентов. Для этого был составлен подробный бриф, собраны референсы (Apple, Black Tomato, Rivian и др.) и созданы первые прототипы в Figma.

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

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

Параллельно с дизайном велась разработка сложной системы бронирования. На WordPress была создана индивидуальная тема, включающая:

• Многошаговую форму бронирования с выбором катера (с фильтром по вместимости), даты и временных слотов, дополнительных услуг (гид, фотограф, питание, билеты, причал отправления).
• Динамический калькулятор, мгновенно пересчитывающий стоимость в зависимости от выбранных опций и выведенного в шапку промежуточного итога.
• Интеграцию с Google Calendar API: для каждого судна создан отдельный календарь, синхронизация происходит в реальном времени — занятые слоты автоматически становятся недоступными для бронирования.
• Генерацию подарочных сертификатов в PDF с уникальным номером и кодом безопасности, отправку на почту клиента и дублирование менеджеру.
• Подключение онлайн-эквайринга Сбербанка с возможностью частичной оплаты (бронь+остаток на месте) и применением промокодов.
• Интеграцию с Битрикс24: все заявки и бронирования падают в лиды с разделением статусов («бронирование», «оплачено»), что позволяет отделу продаж мгновенно реагировать.

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