— На этапе дизайна стояла задача сделать сайт визуально легким: эмоциональным, но не ярким, поскольку главное здесь — контент. Контента у заказчика — очень много: это и фото, и видео, и постановочные ролики. Всё это мы использовали, чтобы передать эмоции роскошного морского круиза.

В итоге у нас получилась привлекательная главная страница, которая рассказывает о лайнере и круизах с помощью яркого контента, а не сухого текста.

— Заказчик предоставил нам отрисованные палубы, которые мы адаптировали для сайта и подготовили к вёрстке, а после — «набросили» на них сетку из отрисованных вручную полигонов. Полигоном может быть каюта, ресторан, пространство или место на палубе. При наведении мыши на конкретную локацию (полигон) на схеме палубы показывается подсказка с подробной информацией.

— Чтобы реализовать полигоны для слайдера палуб, мы создали специальный генератор — своего рода визуальный редактор в админ-панели, позволяющий рисовать геометрические фигуры и привязывать к этим фигурам определенное содержимое.

Например, на одной из палуб есть бассейн. Его можно выделить в административной панели и задать подпись, описание и даже дать ссылку на 3D-тур. Этим функционалом мы убили сразу двух зайцев — ещё он используется на странице бронирования для ручного выбора кают.

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

— При отрисовке системы онлайн-бронирования важно было отразить много информации, поэтому процесс разбили на шаги, чтобы внимание пользователя не рассеивалось.

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

С каютами мне было особенно интересно работать. При их бронировании важно учесть, что некоторые каюты могут быть уже заняты, а некоторые — не подходят по каким-то параметрам (например, слишком малы для семьи из 4-х человек). Плюс важно было дать пользователю возможность посмотреть при бронировании на интерьер каюты и тут же развернуть схему палубы, на которой та находится, чтобы сравнить с другими вариантами проживания.

— Каждый шаг формы бронирования — детально продуман. Надо ввести количество людей? Вводи, а потом иди дальше. Тип каюты? Вот тебе список, сравнивай и выбирай, а интерьер выберешь на следующем шаге. Расположение каюты? Пожалуйста: смотри на схему, кликай и выбирай палубу, каюту, сравнивай их.

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

— Обычно при интеграции с каким-то сервисом по API мы настраиваем импорт данных раз в какой-то период: например, раз в час или раз в сутки. Но в нашем случае даже вариант «раз в пару минут» не подходил: при подобном импорте могло получиться так, что пользователь бронировал бы каюту, которую уже могли забронировать дилеры или менеджер заказчика минуту назад.

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

— С контуром по API мы работали по Scrum: на старте проекта API, которое разрабатывала команда заказчика, насчитывало всего 9 методов. Их было недостаточно, чтобы реализовать все задумки. Мы давали заказчику обратную по доработке API, и в итоге реализовали 24 метода передачи и получения данных, которые чётко заточены под задачи сайта.

— Из интересного в личном кабинете — история заказов. API сервиса бронирования не умеет делить заказы на актуальные и архивные, поэтому отдает нам все подряд. Чтобы их различать в ЛК, пришлось продумать деление по нескольким признакам (даты, факт оплаты и т. д.). Кроме того, мы настроили отправку параллельных запросов к API, чтобы выводить в ЛК пользователя детальную информацию сразу по нескольким круизам.

— Мы подключили скрипт сервиса авторизации на сайт. Пользователь вводит свой номер телефона и попадает в сервис «Т-Банка». Авторизуется предусмотренным в нём способом, а после подтверждения сервис перенаправляет пользователя обратно на сайт. Если сайт понимает, что пользователь подтвердил свой номер телефона, то авторизует его.