Case Study
CatamaranGo
Редизайн и frontend-доработка сервиса CatamaranGo для поиска и аренды катамаранов по всему миру. В рамках проекта были обновлены интерфейсные компоненты, перевёрстаны ключевые страницы, улучшен пользовательский путь и реализованы страницы оплаты с выбором дополнительных услуг.
Отрасль
Аренда катамаранов и яхтенный туризм
Срок
4 недели
Формат
Редизайн, frontend-доработка и улучшение booking-flow
Стек
Next.js, React, Tailwind CSS, TypeScript, API Integration
О проекте
CatamaranGo — сервис для аренды катамаранов в разных странах. Пользователи могут искать катамараны по направлениям, выбирать подходящие варианты, знакомиться с условиями аренды, подбирать капитана и оформлять бронирование. На сайте представлены тысячи катамаранов по всему миру, популярные направления вроде Греции, Хорватии, Италии, Испании, Турции и других стран.
Задача
Основная задача заключалась в верстке редизайна, разработке новых компонентов, переводе проекта на Tailwind CSS, улучшении семантики страниц и доработке пользовательского сценария бронирования, включая страницы оплаты и выбор дополнительных услуг.
Решение
В рамках проекта были перевёрстаны ключевые страницы сервиса на Next.js и Tailwind CSS. Интерфейс был приведён к более современному и удобному виду: обновлены компоненты, улучшены сетки, карточки, формы, блоки поиска и страницы, связанные с бронированием. Отдельное внимание было уделено страницам оплаты: пользователь может выбирать дополнительные услуги перед оформлением заказа. Также была улучшена семантическая структура верстки, что помогает корректной индексации страниц и упрощает интеграцию с внешними сервисами и API.
Что было реализовано
- Верстка редизайна сервиса аренды катамаранов
- Разработка новых frontend-компонентов
- Перевод проекта на Tailwind CSS
- Обновление UI ключевых страниц
- Переверстка страниц для более удобного пользовательского сценария
- Страницы оплаты с выбором дополнительных услуг
- Доработка booking-flow
- Интеграция frontend-части с API сервиса
- Улучшение семантической структуры страниц
- Адаптивная верстка для разных устройств
Booking-flow и страницы оплаты
В проекте были доработаны пользовательские сценарии, связанные с бронированием и оплатой. Особое внимание уделялось страницам, где клиент выбирает дополнительные услуги перед оплатой аренды катамарана.
- Страницы оплаты аренды катамарана
- Выбор дополнительных услуг перед оформлением заказа
- Улучшенный пользовательский сценарий бронирования
- Интеграция с API сервиса
- Более удобные формы и интерфейсные состояния
- Адаптация страниц под обновлённый дизайн
Стек
Результат
Редизайн
Интерфейс сервиса стал современнее и удобнее для клиента
Ключевые страницы были перевёрстаны по обновлённому дизайну, а компоненты приведены к более аккуратной и понятной визуальной системе.
Booking-flow
Пользовательский путь бронирования стал понятнее
Были доработаны страницы, связанные с оформлением аренды, выбором дополнительных услуг и переходом к оплате.
Tailwind CSS
Проект был переведён на Tailwind CSS
Использование Tailwind CSS упростило работу со стилями, ускорило верстку новых компонентов и сделало интерфейс более консистентным.
Семантика
Верстка стала более корректной для индексации и интеграций
Структура страниц была улучшена с учетом семантики, что помогает поисковой индексации и делает frontend более удобным для дальнейшей поддержки.