Как обновить сайт круизного агрегатора с пользой для бизнеса. Кейс Red Collar и «Инфофлота»

На примере недавнего масштабного релиза эксперты отдела аналитики Red Collar рассказывают о решающих нюансах обновления сайта компании из туристической индустрии.

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

«Инфофлот» — туристическая компания с более чем 20-летней историей. Это не просто еще один «магазин круизов»: компания ведет постоянную работу по продвижению круизного туризма, в первую очередь путешествий по России. Три главных требования заказчика к редизайну:

• Сайт должен быть технически и визуально современным (по сравнению с предыдущей версией).
• Он должен соответствовать привычным тенденциям и паттернам в туристическом бизнесе.
• Важно, чтобы сайт привлекал новую, более молодую аудиторию, при этом оставался достоверным источником информации по водному туризму и не «отпугивал» постоянных клиентов.

Мнение текущих пользователей — важная деталь. Благодаря высокому уровню сервиса многие клиенты компании давно стали постоянными. Они ожидали, что компания продолжит радовать их качеством услуг, а обновленный сайт «Инфофлота» останется информативным и удобным — мы учитывали это в разработке.

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

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

Здесь есть ряд нюансов, которые актуальны исключительно для российского туристического рынка. Например, российский турист ожидает увидеть на сайте поисковую систему «отельного» типа с возможностью подбора по множеству параметров. А еще турпродукты должны быть доступны для очень разной по возможностям и интересам аудитории. Поэтому у каждого тура имеется несколько вариантов цены, продолжительности, класса обслуживания и других параметров. Параметров много, и все нужно показать в карточке.

Следовательно, с точки зрения поиска на сайте турагентства необходимо решить две задачи:

• Дать пользователю быстрый поиск по нескольким десяткам параметров с выдачей результатов в виде карточек, максимально наполненных информацией;
• Разместить полное описание в карточке продукта: расставить акценты и не упустить все детали, которые захочет узнать турист.

Придумать, как разместить в карточке множество фильтров, — задача UX/UI-дизайнера. А быстрый поиск и удобная фильтрация — вызов для команды разработки, скрытый от пользователя.

У «Инфофлота» на старой версии сайта поиск осуществлялся по шести основным и двум дополнительным фильтрам, плюс работала сортировка по дате отправления и цене. Фильтры не были взаимозависимыми, а в сезон поиск медленно работал из-за высокой нагрузки. Карточка тура содержала около двадцати параметров, включая различные типы цен и все варианты акций и спецпредложений.

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

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

В качестве поисковой системы выбрали Elasticsearch — это тиражируемая программная поисковая система, разработанная для быстрого и точного полнотекстового поиска. Почему Elasticsearch:

• Технология проверена на других наших проектах.
• ES позволяет работать с гибкой схемой данных (например, JSON), что упрощает добавление или изменение полей.
• Система позволяет увеличивать поисковые ресурсы без особых вложений в инфраструктуру.
• ES быстро отбирает данные из базы по индексам и выводит их в результаты.
• Это надежная отказоустойчивая система: в ней есть механизм обнаружения проблем, который позволяет быстро найти и локализовать их.

Подведем итог. Что мы сделали для ускорения работы поисковой страницы:

• В виджете поиска на главной оставили шесть фильтров.
  
• Остальные 11 фильтров сделали доступными на странице поиска.
• Фильтры сделали взаимозависимыми и динамически собираемыми.
• Сделали ограниченную выдачу — по десять карточек на странице.

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

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

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

Поэтому мы разместили здесь разделы «Акции и спецпредложения», «Инфофлот рекомендует» и «Отзывы туристов».

Ключевые моменты, которые мы выделяем в проектировании системы бронирования:

• У пользователя должна оставаться возможность пройти маршрут «быстрого бронирования»: оставить заявку без указания детальной информации и дождаться сообщения или звонка оператора. Выяснили это из кастдева с аудиторией текущих клиентов «Инфофлота». Мы рекомендуем оставлять на сайте форму быстрого бронирования и делать ее доступной всем пользователям, в том числе, авторизованным.

• Сделали механизм бронирования пошаговым. Это особенно важно, ведь все больше пользователей заходят на сайт с мобильных устройств — в том числе, представители возрастной аудитории от 50 лет. Выяснили это на этапе предпроектной аналитики. Пользователям важно увидеть похожие предложения и сравнить их в процессе подбора тура: поэтому на странице туристического продукта мы показываем подборку аналогичных предложений.

• Пользователям важно увидеть похожие предложения и сравнить их в процессе подбора тура: поэтому на странице туристического продукта мы показываем подборку аналогичных предложений.

• Система бронирования должна быть одинаково удобна при небольшом индивидуальном заказе и при бронировании на большую компанию.

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

• Пользователю важно увидеть все доступные ему и уже примененные скидки до момента, когда он нажмет на волшебную кнопку «Купить».

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

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

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

Выделили три аудитории пользователей, на которых нацелены предложения Клуба, и внедрили на сайт конвертирующий блок для каждой:

• Новые пользователи сайта, которые автоматически становятся участниками. Для них еще при регистрации и далее в ЛК выводим блок онбординга: показываем ценность программы лояльности, демонстрируем виртуальную карту и проводим по основным разделам.

• Пользователи старого сайта, которые еще не присоединились к программе лояльности. Для таких пользователей в ЛК показываем лидогерационный блок, который мотивирует пользователей присоединиться к программе лояльности и конвертирует их в постоянных покупателей.

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

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

Мы сделали стартовую страницу-дашборд личного кабинета и собрали на ней все необходимое:

• Карту участника программы лояльности с указанием количества бонусных баллов
• Информацию о заполненности данных в анкете
• Текущие заказы, требующие оплаты
• Специальные предложения для участников программы лояльности

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