Редизайн и разработка сайта-сервиса для круизного центра «Инфофлот»

Главное о кейсе

Аналитика, маркетинговые исследования, редизайн и разработка сайта-сервиса для одного из лидеров рынка круизных операторов — компании Инфофлот.

————
Website redesign and development for one of the largest cruise operators

Как проект изменил жизнь пользователей

1. Более точная фильтрация туров. Пользователям доступны 5 основных и 11 дополнительных фильтров для поиска наиболее подходящего предложения.

2. С пошаговым бронированием оформлять туры стало проще и быстрее, интуитивно понятнее.

3. Теперь весь сайт адаптирован под мобильную версию, а значит, пользователи могут искать и бронировать с привычных мобильных устройств.

4. Более быстрый поиск по карточкам туров.

5. Обновили дизайн-решение и алгоритм регистрации в программе лояльности — Клубе Любителей Круизов.

6. Все нововведения работают на знакомой платформе — постоянные клиенты особенно оценили это.

————
1. More precise tour filtering: users now have access to 5 main and 11 additional filters to find the most suitable cruise offers.

2. With step-to-step process booking a tour became much easier, faster and more intuitive.

3. Now the entire website is mobile-friendly. This means users can easily look for and book tours on their preferable devices.

4. Faster search across tour cards.

5. The Cruise Lovers Club loyalty program received an update.

6. All these innovations are implemented on the familiar platform, much to the delight of existing clients.

Бизнес-задача и ее решение

Исследовать рынок и разработать концепцию обновления сервиса, которое улучшит пользовательский опыт текущей целевой аудитории и привлечет новых клиентов 30+. Ускорить работу сервиса — обеспечить быструю загрузку страниц и поиск по базе круизов. Сохранить нынешний стек, чтобы бэкенд-команда заказчика смогла самостоятельно поддерживать новый сервис.

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

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

Кроме того, у нас были два ограничивающих условия:

1) Необходимо было делать новый дизайн и не отпугнуть аудиторию постоянных пользователей, которые за много лет прикипели к сайту в прошлой версии.

2) Срок разработки не предполагал создания нового продукта с нуля, нам предстояло интегрироваться в монолитный backend, написанный много лет назад, в том числе, переписывая и оптимизируя старую кодовую базу.

————
The objective was to research the market and develop a concept for updating the service, improving the user experience for the current target audience, and attracting new customers aged 30 and above. The goal was to speed up the service, ensuring fast page loading and efficient cruise database searching. It was crucial to keep the existing stack to allow the client's backend team to independently support the new service.

One one hand, the Client wanted to use patterns commonly used among their competitors. On the other, they wanted to keep the informational backbone of the service and keep, in a way, being a news outlet for the entire cruise industry.

The complexity laid in the nature of the business itself: the final ticket price depends on a vast number of parameters. We paid close attention to every detail to avoid making the service overly complex.
Additionally, we had a couple of restricting factors:

1) The website needed a new design that wouldn’t scare the regular uses away as they had been using the old website for years.

2) The time frame didn’t allow us to create an entirely new service from scratch. We were to integrate the new code into the solid backend that was written many years ago, rewriting and optimizing it along the way.

Крафт (мастерство), реализация, технические детали

В рамках маркетингового исследования мы использовали квадрант Гартнера для конкурентного анализа: оценивали конверсионность и информативность сайтов. Также проводили глубинные интервью с клиентами круизных операторов.

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

Обновили отображение в поиске и заявках программы лояльности. Теперь она стала обязательной и заметной всем посетителям сайта. Со счета бонусной карты пользователь может списать частично или полностью накопленные баллы. Карта интегрирована с базой данных, так что пользователи могут отслеживать начисление и списание бонусов исходя из своей покупательской активности.

Дизайн

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

Разработка

Бэкенд нового сервиса мы разделили на микросервисы. Для интеграции с ядром старого бэкенда написали новые API методы. Совместно с командой заказчика был проведен рефакторинг старой кодовой базы.

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

Язык старого бэкенда — PHP, одним из условий заказчика была разработка в рамках этого языка. Так, мы использовали Kubernetes, PHP, Laravel, Next.js, SSR, Elasticsearch, Editor.js.

————
As part of the marketing research, we used Gartner's quadrant for competitive analysis, evaluating the conversion rates and informativeness of websites. We also conducted in-depth interviews with cruise operator clients.

We confirmed through research that the audience had shifted to the mobile version, even though the site was not responsive. In reality, users were booking cruises on the go.

We revamped the loyalty program, making it mandatory and highly visible to all website visitors. Users can partially or fully redeem accumulated points from this card. The card is integrated with the database, allowing users to track points earned and redeemed based on their purchasing activity.

Design

We focused on creating a simple and concise design with an emphasis on UX and informative content.

Development

We divided the backend of the new project into microservices. To integrate them with the old backend core, we wrote new API methods. Together with the Client’s team we refactored the existing code base.

We isolated the search microservice, implemented database replication, and accelerated the search database significantly. We added offset-dependent filters, allowing users to search for cruises based on a wide range of parameters, which previously was not possible.

The old backend was written on PHP, and one of the requirements was to keep it that way. So we used Kubernetes, PHP, Laravel, Next.js, SSR, Elasticsearch, and Editor.js.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

————
Regarding UX, our main hypothesis was to create a step-by-step booking process. While the old site had a wealth of information and large tables, users now book cruises step by step, much like on Booking.com. This was successfully implemented, even considering the high complexity and numerous parameters involved.

Прочая информация о кейсе

Инфофлот — это крупнейший в России агрегатор речных и морских круизов, работающий с 2003 года, лидер по объему продаж.

————
Infoflot is the largest aggregator of river and sea cruises in Russia, operating since 2003, and is a leader in sales volume.

Скриншоты