Как обновить сайт круизного агрегатора с пользой для бизнеса. Кейс Red Collar и «Инфофлота»
На примере недавнего масштабного релиза эксперты отдела аналитики Red Collar рассказывают о решающих нюансах обновления сайта компании из туристической индустрии.
Сайты в сфере туризма имеют свои особенности, которые сильно влияют на функциональность. Даже если в процессе редизайна речь идет только про «косметические» изменения, за ними всегда кроется масштабная работа аналитиков и разработчиков. На примере кейса редизайна сайта «Инфофлота» разберем главные аспекты сайта: главную страницу, поиск, бронирование, личный кабинет и программу лояльности.
«Инфофлот» — туристическая компания с более чем 20-летней историей. Это не просто еще один «магазин круизов»: компания ведет постоянную работу по продвижению круизного туризма, в первую очередь путешествий по России. Три главных требования заказчика к редизайну:
- Сайт должен быть технически и визуально современным (по сравнению с предыдущей версией).
- Он должен соответствовать привычным тенденциям и паттернам в туристическом бизнесе.
- Важно, чтобы сайт привлекал новую, более молодую аудиторию, при этом оставался достоверным источником информации по водному туризму и не «отпугивал» постоянных клиентов.
Мнение текущих пользователей — важная деталь. Благодаря высокому уровню сервиса многие клиенты компании давно стали постоянными. Они ожидали, что компания продолжит радовать их качеством услуг, а обновленный сайт «Инфофлота» останется информативным и удобным — мы учитывали это в разработке.
Вместе с командой «Инфофлота» решили непростую задачу: модернизировали привычный для постоянных клиентов сайт, сохранив знакомые элементы и привычные паттерны. В итоге мы обновили весь путь пользователя: поиск, главную страницу, бронирование, личный кабинет.
Поиск
Поисковая система глазами пользователя — это набор фильтров информации для выбора тура и выдача, которую обычно представляют в формате карточек. Одно из базовых технических требований здесь — скорость работы: поиск должен происходить быстро и предсказуемо для пользователя.
Здесь есть ряд нюансов, которые актуальны исключительно для российского туристического рынка. Например, российский турист ожидает увидеть на сайте поисковую систему «отельного» типа с возможностью подбора по множеству параметров. А еще турпродукты должны быть доступны для очень разной по возможностям и интересам аудитории. Поэтому у каждого тура имеется несколько вариантов цены, продолжительности, класса обслуживания и других параметров. Параметров много, и все нужно показать в карточке.
Следовательно, с точки зрения поиска на сайте турагентства необходимо решить две задачи:
- Дать пользователю быстрый поиск по нескольким десяткам параметров с выдачей результатов в виде карточек, максимально наполненных информацией;
- Разместить полное описание в карточке продукта: расставить акценты и не упустить все детали, которые захочет узнать турист.
Придумать, как разместить в карточке множество фильтров, — задача UX/UI-дизайнера. А быстрый поиск и удобная фильтрация — вызов для команды разработки, скрытый от пользователя.
У «Инфофлота» на старой версии сайта поиск осуществлялся по шести основным и двум дополнительным фильтрам, плюс работала сортировка по дате отправления и цене. Фильтры не были взаимозависимыми, а в сезон поиск медленно работал из-за высокой нагрузки. Карточка тура содержала около двадцати параметров, включая различные типы цен и все варианты акций и спецпредложений.
Исследования целевой аудитории (имеющейся и потенциальной) показали, что все параметры в карточке тура нужно сохранить, так как они важны пользователям. Поэтому мы решили по-новому сгруппировать данные и добавить возможность просматривать отдельные группы параметров по клику, не уходя со страницы поиска и из карточки.
Также пожелания заказчика, которые были подтверждены исследованиями, показали, что для удобства пользователей необходимо добавить к поисковой системе дополнительные фильтры, включая цену, услуги и акционные предложения. Фильтры нужно было сделать взаимозависимыми.
Мы изучили сайты конкурентов, в том числе иностранных. В результате выделили шесть основных и 11 дополнительных фильтров, которые позволяют искать продукт по запросу пользователей
В качестве поисковой системы выбрали Elasticsearch — это тиражируемая программная поисковая система, разработанная для быстрого и точного полнотекстового поиска. Почему Elasticsearch:
- Технология проверена на других наших проектах.
- ES позволяет работать с гибкой схемой данных (например, JSON), что упрощает добавление или изменение полей.
- Система позволяет увеличивать поисковые ресурсы без особых вложений в инфраструктуру.
- ES быстро отбирает данные из базы по индексам и выводит их в результаты.
- Это надежная отказоустойчивая система: в ней есть механизм обнаружения проблем, который позволяет быстро найти и локализовать их.
Подведем итог. Что мы сделали для ускорения работы поисковой страницы:
- В виджете поиска на главной оставили шесть фильтров.
- Остальные 11 фильтров сделали доступными на странице поиска.
- Фильтры сделали взаимозависимыми и динамически собираемыми.
- Сделали ограниченную выдачу — по десять карточек на странице.
Главная страница
Главную страницу сайта необходимо было сделать современной, с узнаваемым для туристической отрасли визуальным рядом. Было важно не только акцентировать внимание на поиске круизов, но показать экспертность компании, не потерять информационную составляющую прежнего сайта.
Выбрали лаконичную стилистику, близкую к визуальному стилю информационных агентств. Исследования целевой аудитории показали, что
- На главной пользователи хотят видеть информацию об акционных предложениях.
- Новичкам необходимо получить помощь в подборе круиза и рекомендации.
- Отзывы туристов — еще одна определяющая составляющая для выбора.
Поэтому мы разместили здесь разделы «Акции и спецпредложения», «Инфофлот рекомендует» и «Отзывы туристов».
Бронирование
Ключевые моменты, которые мы выделяем в проектировании системы бронирования:
- У пользователя должна оставаться возможность пройти маршрут «быстрого бронирования»: оставить заявку без указания детальной информации и дождаться сообщения или звонка оператора. Выяснили это из кастдева с аудиторией текущих клиентов «Инфофлота». Мы рекомендуем оставлять на сайте форму быстрого бронирования и делать ее доступной всем пользователям, в том числе, авторизованным.
- Сделали механизм бронирования пошаговым. Это особенно важно, ведь все больше пользователей заходят на сайт с мобильных устройств — в том числе, представители возрастной аудитории от 50 лет. Выяснили это на этапе предпроектной аналитики. Пользователям важно увидеть похожие предложения и сравнить их в процессе подбора тура: поэтому на странице туристического продукта мы показываем подборку аналогичных предложений.
Пользователям важно увидеть похожие предложения и сравнить их в процессе подбора тура: поэтому на странице туристического продукта мы показываем подборку аналогичных предложений.
- Система бронирования должна быть одинаково удобна при небольшом индивидуальном заказе и при бронировании на большую компанию.
- Совсем не обязательно поддерживать два разных интерфейса для частных лиц и агентов, при правильном проектировании интерфейса и шагов алгоритма модели можно совместить.
Пользователю важно увидеть все доступные ему и уже примененные скидки до момента, когда он нажмет на волшебную кнопку «Купить».
Личный кабинет и программа лояльности
До редизайна у заказчика существовал личный кабинет и был запущен Клуб любителей круизов. Это уникальная для рынка программа лояльности: постоянные покупатели могут выбирать круизы с большими скидками или даже целиком оплачивать их бонусами. Однако, опрос аудитории показал, что клиенты не знают её существовании или мало знакомы с её возможностями.
В старой версии Клуб работал через отдельный сайт, при регистрации и в личном кабинете пользователи не замечали предложение.
На новом сайте мы сделали программу лояльности важной частью личного кабинета, акцентировали внимание на ней и разработали узнаваемый логотип Клуба любителей круизов. Теперь все клиенты при регистрации автоматически становятся его участниками и получают краткую информацию о преимуществах программы.
Выделили три аудитории пользователей, на которых нацелены предложения Клуба, и внедрили на сайт конвертирующий блок для каждой:
- Новые пользователи сайта, которые автоматически становятся участниками. Для них еще при регистрации и далее в ЛК выводим блок онбординга: показываем ценность программы лояльности, демонстрируем виртуальную карту и проводим по основным разделам.
- Пользователи старого сайта, которые еще не присоединились к программе лояльности. Для таких пользователей в ЛК показываем лидогерационный блок, который мотивирует пользователей присоединиться к программе лояльности и конвертирует их в постоянных покупателей.
- Пользователи, давно являющиеся членами клуба. Для них показываем блок специальных предложений для участников программы лояльности.
В старом ЛК была представлена вся необходимая информация, но пользователи переходили по вкладкам и терялись в их количестве, так и не узнав нужное.
Мы сделали стартовую страницу-дашборд личного кабинета и собрали на ней все необходимое:
- Карту участника программы лояльности с указанием количества бонусных баллов
- Информацию о заполненности данных в анкете
- Текущие заказы, требующие оплаты
- Специальные предложения для участников программы лояльности
На странице заказов по умолчанию мы стали показывать только активные заказы и добавили удобную и логичную фильтрацию по их статусам. Изменили интерфейс и поработали над логикой изменения заказов и добавления дополнительных услуг. Разработали формы заявлений, которые ранее пользователи заполняли вручную и отправляли по почте в офис.