Редизайн сайта «Тонкости туризма» для МТС Travel

Обновить дизайн ключевых страниц сайта, улучшить пользовательский опыт и — главное — повысить конверсию переходов на МТС Travel для бронирования отелей.

Продукт — информационный ресурс по туристическим услугам.

Метрики до редизайна показывали, что есть куда расти:

• Показатель отказа — 12,2% (нужно снижать)

• Глубина просмотра — 1,69 (нужно увеличивать)

• Время на странице — 2:26 (нужно увеличивать)

Аудитория — преимущественно женщины (63,6%), возраст 25–45 лет, мобильные пользователи. Сайт используется редко, но частота возвратов растёт с каждым днём после первого визита.

Исследование: как мы изучали пользователей

Мы не стали гадать, а пошли проверенным путём — собрали данные из разных источников: анализ метрик, CJMs, A/B-тестирование, JTBD, Вебвизор, UX-аудит, метод персон. Ключевым инструментом стало Rite-тестирование — удалённое юзабилити-тестирование по итеративному методу прототипа с элементами глубинного интервью.

Кого тестировали: 12 респондентов, которые читают travel-журналы и путешествуют по России и за рубеж. Три возрастные группы (25–29, 30–39, 40–52 лет), мужчины и женщины, знакомые и незнакомые с сервисом.

Масштаб работы: 12 глубинных интервью, 3 итерации правок и проверок, по 1,5–2 часа на каждого респондента.

Что нашли: проблемы по разделам

Статьи

Пользователи жаловались на перегрузку текстом (2/12), обилие рекламы в начале (3/12) и нехватку фото (3/12). Четверо из двенадцати не доверяли площадке как источнику для перехода на сервисы бронирования. Ещё одна проблема — иерархия блоков: объёмная реклама посреди статьи создавала впечатление, что материал закончился.

Карты

Четыре из двенадцати респондентов не понимали, насколько далеко отель находится от моря, и столько же — не видели на карте центр города. Трое путались с кнопкой «списком», а ещё трое не могли расшифровать иконки достопримечательностей.

Навигация

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

Отели

Трое ждали информации о расположении отеля (расстояние до моря, центра, аэропорта). Двое не замечали фильтр, двое хотели фильтр по виду из окна, ещё двое воспринимали подборки как статьи.

Гипотезы: что подтвердилось, а что нет

Мы сформулировали гипотезы по каждому разделу и проверили их на данных.

Статьи: подтвердилось, что не хватает краткого описания в начале, предложения с отелями воспринимаются как шум, непонятен кешбэк и сложно изучать контент. А вот гипотеза про нехватку описания преимуществ отеля — не подтвердилась.

Карты: подтвердилось, что не считывается расположение карты и непонятны обозначения достопримечательностей. Гипотеза про сложность поиска фильтров — нет.

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

Листинг и фильтрация: подтвердилось игнорирование подборок, непонятное расположение фильтров и сортировки, путаница в звёздности и рейтинге. Гипотеза про сложность сравнения карточек отелей — не подтвердилась.

Решения

Дизайн-система

Взяли под контроль дизайн-видение сайта и создали новый UI kit: визуальную айдентику, компоненты интерфейса, иллюстрации и маскота.

Маскот

Разработали дружелюбного персонажа, который создаёт эмоциональную связь между брендом и посетителями сайта. Маскот появился в статьях, карточках отелей и блоках перехода на МТС Travel.

Редизайн

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

Обновили стилистику — создали новый UI kit, упростили передачу в вёрстку, повысили узнаваемость сервиса.

Наладили процессы — внедрили дизайн-ревью, исследование и тестирование дизайн-решений как регулярную практику.

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