Ui
UX
Структурировали контент, нарисовали палубы и карту перемещения лайнера
сибирикс
vessel
bow
1/3
Спроектировали систему бронирования для единственного в России круизного лайнера
Посмотрите этот кейс с экрана ноутбука, планшета или даже вашего персонального компьютера 😉
Мы сделали его специально для больших экранов, чтобы показать все блоксхемы системы бронирования и флоу в личном кабинете. И это — впечатляет! Но если вам не терпится, то мы вам запретить не сможем. Некоторые блоки нужно скроллить вправо и влево. Инджой!
UI — Контента много, надо оформить!
Задача дизайна
Рассказать об особенностях круизного отдыха с Astoria Grande так, чтобы поехать в морское путешествие хотелось уже с первой пары скроллов на главной странице.
Cделать сайт визуально лёгким: эмоциональным, но не ярким, поскольку главное здесь — контент. Контента у заказчика — очень много: это и фото, и видео, и атмосферные ролики. Всё это мы использовали, чтобы передать эмоции роскошного морского круиза.
Cделать сайт визуально лёгким: эмоциональным, но не ярким, поскольку главное здесь — контент. Контента у заказчика — очень много: это и фото, и видео, и атмосферные ролики. Всё это мы использовали, чтобы передать эмоции роскошного морского круиза.
ui
Вводные: Каким должен быть дизайн
1
ui
О лайнере Astoria Grande + фирменный стиль
1.1
Главная страница
360 px
360 px
Отель на воде
Пункт отправления: Сочи
6 ресторанов
SPA-центр
Тренажёрный зал
Салон красоты
Галерея магазинов
Длина лайнера
193 метра
193 метра
Экипаж
450 человек
450 человек
Пассажировместимость
1365 человек
Число кают
593
593
Futura PT
Аа Бб Вв
Экскурсии
Концерты
Детские активности
Ивенты
123456
Где лайнер сейчас
Это карта морей, по которым ходит лайнер, с обозначением текущего маршрута, портов и реального местоположения корабля. Чтобы показать точное положение корабля, сайт получает GPS-координаты лайнера с сервера бронирования, которые сопоставлены с точками на рисованной карте.
О лайнере
ui
Основные страницы 1440 px
1.2
Профиль
Бронирование
Страница О лайнере
На этой странице пользователя встречает вторая фича. Здесь можно детально изучить палубы Astoria Grande и что на них находится
ui
Анимация переключения Палуб
1.3
Отрисованные палубы
Палубы можно переключать между собой и кликом на область открыть попап, в котором рассказано о заведении/каюте судна
система бронирования
Для круизного лайнера
Для круизного лайнера
О проекте
Astoria Grande — единственный в России круизный лайнер для туров по Чёрному и Средиземному морю. На нем 11 палуб, почти 600 кают, магазины, рестораны, театр, бассейн и СПА-центр.
Проблема
Главная проблема старого сайта — система бронирования, а точнее — её отсутствие: заказы приходилось оформлять вручную через операторов.
Цели и задачи
1. Создать удобную систему онлайн-бронирования, чтобы пользователи могли выбрать и забронировать каюту самостоятельно.
2. Разработать личный кабинет пользователя для оформления и отслеживания заказов.
2. Разработать личный кабинет пользователя для оформления и отслеживания заказов.
UX
Вводные: О проекте, проблемы, цели и задачи
2
User
flow
UX
Система бронирования: user flow
2.1
круиз Не подходит
круиз подходит
Главная
Покупка Совершена
Круизы
Подборщик
круизов
Личный кабинет
Бронирования
Бронирование
Шаг 1. Количество
гостей
Шаг 2. Тип каюты
Шаг 3. Интерьер каюты
Шаг 4. Подтверждение
бронирования
Детальная страница бронирования
Шаг 1. Пассажиры
Шаг 2. Формирование договора
Шаг 3. Подтверждение договора
Шаг 4. Способ оплаты
страница
круиза
круиза
Настройка
фильров
фильров
После выбора круиза пользователь сразу переходит к первому шагу бронирования.
UX
Система бронирования: выбор круиза
2.2
Выбор пассажиров: если гостей много, система автоматически адаптирует интерфейс.
Выбор каюты: если нужный вариант недоступен, можно подписаться на уведомление о его освобождении.
Выбор интерьера каюты. Если вариант занят, можно добавить его в лист ожидания — так же, как при выборе типа каюты.
Фиксация каюты: пользователь резервирует место без оформления билетов. Можно вручную выбрать расположение каюты на палубе, ориентируясь на удобство.
11
3
4
5
11
10
9
8
7
6
UX
Система бронирования: оформление договора
2.3
Шаг 1. Добавление пассажиров
Можно ввести каждого пассажира вручную или добавить заранее внесённые данные из личного кабинета
Шаг 2. Данные покупателя круиза
Ввод паспортных данных покупателя, ознакомление с основными правилами договора
Шаг 3. Сводка по прошлым шагам
Пользователь должен проверить всю информацию, которую ввёл на прошлых шагах и подтвердить, что всё введено верно.
Шаг 4. Варианты оплаты
У пользователя есть множество вариантов оплаты: от оплаты полной стоимости тура по счёту, до рассрочки в определённом банке
