Сайт с бронированием

Север Карт

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

Север Карт — сайт с бронированием, обложка кейса

О проекте

«Север Карт» — крытый картинг-центр за Полярным кругом. Раньше записаться на заезд можно было только по телефону: администратор вёл брони в таблице, а гость не видел, какое время свободно.

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

Наша роль

  • UX и структура сайта
  • Дизайн интерфейса и дизайн-система
  • Фронтенд и бэкенд
  • Онлайн-бронирование и оплата
  • Админ-панель
Главная страница сайта «Север Карт» на десктопе: первый экран с картами и кнопкой записи
Первый экран: цена, запись и подарочный сертификат доступны сразу, без прокрутки

Задачи

  1. 01. Дать гостю забронировать заезд самостоятельно: показать свободное время, посчитать цену и принять оплату на сайте.
  2. 02. Передать характер места — неон, скорость, Север — и при этом ответить на вопросы новичка: что надеть, с какого возраста, как проходит заезд.
  3. 03. Сделать мобильную версию основной: большинство гостей приходит с телефона.
  4. 04. Заменить таблицы администратора удобной панелью: брони на день, календарь, сертификаты, цены и журнал действий.
Север Карт: экран проекта
Ключевые блоки главной: выбор карта, схема трассы, таблица лидеров из хронометража и мероприятия

Страница ведёт от знакомства к брони: каждый блок отвечает на один вопрос гостя

Север Карт: экран проекта
Главная целиком: карты и цены, форматы заездов, инструкция для новичков, трасса, лидеры, отзывы и карта проезда

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

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

Окна бронирования на телефоне выезжают снизу и занимают экран целиком — итог и главная кнопка закреплены внизу.

Мобильные экраны сайта «Север Карт»: первый экран, выбор карта, трасса, таблица лидеров и мероприятия
Север Карт: экран проекта
Мобильная лента целиком

Бронирование

Бронь занимает четыре шага. Сначала гость видит главное из правил — рост, вес и время приезда. Затем выбирает день в календаре занятости, собирает состав заезда и свободный час, оставляет контакты и оплачивает предоплату или всю сумму.

Время удерживается за гостем, пока он платит. После оплаты приходит письмо-подтверждение, а бронь появляется в панели администратора.

Север Карт: экран проекта
Четыре шага брони на десктопе: правила, календарь, состав и время, контакты и оплата
Север Карт: экран проекта
Те же шаги на телефоне
Север Карт: экран проекта
Подарочный сертификат с живым превью и заявка на корпоратив или праздник

Админ-панель

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

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

Админ-панель «Север Карт»: список броней на день с показателями и статусами
Брони на день. На снимках панели — демонстрационные данные
Север Карт: экран проекта
Календарь броней, расписание трассы, карточка брони и сертификаты
Север Карт: экран проекта
Цены, карточка сертификата и календарь на телефоне

Цвет

  • #0B0F12 асфальт — фон сайта
  • #121A20 карточки, окна, поля
  • #5FC0F1 лёд — цифры и акценты
  • #CBBCFD лаванда — главные кнопки
  • #F7F7F7 основной текст

Следующие проекты

Warfare Heroes — ролевая игра
  • Промо-страница
  • Дизайн
  • Разработка
  • Tilda
  • Web Guru Awards

Warfare Heroes

Ролевая игра

DOM MODELS — международный стартап в области модельного бизнеса
  • Корпоративный сайт
  • Дизайн
  • Разработка
  • Web Guru Awards

DOM MODELS

Международный стартап в области модельного бизнеса