Рыбаловная база Бедкаш

Полный цикл разработки лендинга: исследование, дизайн, дизайн-система, верстка и тестирование.

Роль

UX/UI-дизайнер / Frontend-разработчик

Сфера

Sports & Outdoors, Hospitality, Web

Команда

Индивидуальная разработка с AI-ассистентом

Год

2026

Контекст

База «Бедкаш» сдает в аренду домики, лодки и снаряжение. Старый сайт представлял собой громоздкий многостраничник. Информация об услугах была разбросана по длинным текстовым разделам с запутанной навигацией.

Проблема

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

Задача

Спроектировать конверсионный лендинг. Перенести ключевую информацию со старого сайта в единый флоу, автоматизировать расчет стоимости тура и полностью устранить тупиковые сценарии навигации.

Ограничения

Жесткий дедлайн — 14 дней на полный цикл под ключ. Работа в соло: самостоятельный аудит контента, сборка дизайн-системы, проектирование интерфейса и написание адаптивного кода.

Стек технологий

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

Claude AI

Делегировал нейросети генерацию адаптивных стилей на основе логики компонентов. Это ускорило сборку интерфейса в 3 раза.

Tailwind CSS v4

Перенес дизайн-токены из десктопного макета в globals.css. Мобильную версию собирал и тестировал сразу в браузере, минуя отрисовку экранов.

Next.js

Оставил клиентский интерактив только в калькуляторе и галерее. Основную разметку и оптимизацию медиафайлов перенес на сервер.

React State

Спроектировал логику калькулятора на базовых хуках. Отказ от глобальных стейт-менеджеров (Redux/Zustand) сделал компоненты легковесными.

Исследование: поиск узкого горлышка

База стабильно получает горячий SEO-трафик, но старый многостраничник сливал клиентов из-за когнитивного перегруза.

Я проанализировал структуру ресурса (22 страницы) и сообщения клиентов. Прайсы прятались внутри статей — чтобы собрать стоимость поездки, клиенту требовалось до 8 кликов.

Инсайт из чатов

80% обращений администратор тратил на ручной расчет цены, потому что пользователи не могли найти прайс на сайте.

Прототипы и коридорное тестирование

Собрал low-fi вайрфреймы, чтобы проверить гипотезу линейной навигации. Переупаковал 22 страницы старого сайта в единый последовательный лендинг. На этапе прототипа спроектировал блок со статичными тарифами, чтобы проверить, насколько клиентам понятна базовая сетка цен. Собранный флоу прогнал через коридорное тестирование.

Результаты тестирования

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

UI-кит под AI-разработку

Собрал утилитарный UI-кит, заточенный под передачу ИИ-ассистенту. Опирался на жесткую структуру: выстроил трехуровневую цветовую палитру на основе базовых стилей Figma. Типографику и токены сразу синхронизировал с правилами CSS. Компоненты собирал и переносил в код поэтапно — это позволило контролировать качество верстки на каждом шаге и избежать багов при генерации.

Автоматизация верстки: интеграция макетов и Claude

Настроил прямую связь среды разработки и ИИ-ассистента через протокол MCP. Claude получил возможность напрямую анализировать макеты. Системная подготовка UI-кита полностью оправдала себя: нейросеть безошибочно считывала токены и мгновенно выдавала точный результат. Я быстро собрал верстку, включая сложный адаптив для мобильной версии, избежав долгих ручных корректировок CSS.

Инсайт процесса

Время, инвестированное в жесткую структуру слоев и чистые стили в Figma, многократно окупилось на этапе кода. Благодаря MCP адаптивная версия лендинга была сгенерирована ИИ практически с первого промпта.

Финальный UI: визуализация решений

Я перевел черновой каркас в чистый визуальный интерфейс, опираясь на собранный UI-кит. Отказался от декоративных элементов в пользу контента: акцент на фотографиях базы, реальных трофеях и типографике.

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

Мобильная версия

Я спроектировал мобильную версию полностью без макетов. Пересобрал интерфейс напрямую в коде, дополняя стили globals через промпты. Отказ от отрисовки мобильных макетов ускорил разработку адаптива в 2,5 раза.

Результат

За 14 дней спроектировал и сверстал лендинг. Релиз запланировали на начало октября, чтобы не обновлять продукт в пик сезона.

После запуска лендинг автоматизирует первичную консультацию. Это сократит поток однотипных вопросов о ценах в чатах. Администратор начнет получать готовые сметы и работать только с теплыми лидами.

План развития (Бэклог)

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

Синхронизированный календарь: Интеграция бэкенда для автоматического показа свободных дат.
Онлайн-бронирование: Подключение эквайринга для внесения предоплаты прямо на сайте (полное исключение ручного труда администратора).
Расширенная галерея: Интеграция динамической ленты свежих уловов из соцсетей базы.