«Мир Квестов»: редизайн крупнейшего агрегатора квестов в России

«Мир Квестов» — крупнейший агрегатор квестов в России, который помогает людям искать и бронировать развлечения в их городе без комиссии. Это SEO-ориентированная платформа с огромным количеством шаблонных страниц — контент на них меняется в зависимости от региона посетителя.

Хорошая SEO-оптимизация уже больше 10 лет обеспечивает бизнесу высокие позиции в поисковиках и трафик — ежемесячно сайт посещают более миллиона пользователей.

Но были и проблемы: заказчика беспокоило, что платформа выглядит, как артефакт из прошлого. Интерфейс — перегруженный, блок с бронированием — плохо конвертит, визуал — не соответствует масштабу бизнеса.

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

Кроме того, у «Мира Квестов» есть собственный отдел программистов, которому на момент старта сотрудничества не хватало загрузки. Нам требовалось запараллелить дизайн и разработку, сразу передавая готовые макеты в работу.

Ключевая особенность нашей работы — продуктовый взгляд на проектирование. Мы не ходили на встречи с клиентом с пустыми руками в ожидании конкретного ТЗ от заказчика, а приносили свои идеи и гипотезы. Такой подход позволил не просто обновить визуал, а оптимизировать структуру контента и предложить более эффективные решения в UX.

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

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

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

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

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

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

В качестве концепции мы сделали редизайн главной страницы. Так как лиц, принимающих решения, несколько — прошли через 3 итерации правок, чтобы попасть в ожидания всех. Несколько этапов согласований убедили и нас, и команду клиента, что «Миру Квестов» не хватает полноценной айдентики, которая объединила бы визуал бренда во всех точках касания с потребителями. Про айдентику «Мира Квестов» у нас есть отдельный кейс — смотрите в нашем профиле.

Ключевой метафорой концепции стал портал в другой мир — идея сама по себе выросла из тематики квестов. 

Как работали:

1. Собрали в систему то, что уже работало: тёмную тему, сетки, световые акценты, минимализм.

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

3. Из элементов логотипа собрали иконки для разных жанров: страшных квестов, семейных, для взрослых и так далее.

4. Градиенты на сайте изобразили в виде магического света, льющегося из портала.

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

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

Цвет: тёмный фон с добавлением акцентов для разных жанров.

Типографика: широкий гротеск для вовлечения и нейтральный шрифт для интерфейсов.

Изображения: эмоциональные, но сдержанные — в меру страшные, в меру игровые.

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

Нашей задачей было через визуал передать переход между реальностью и сказкой. Пригласить пользователей «пройти через портал» и превратить обычный день в историю.

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

Детально проработали все состояния: модальные окна, системные сообщения, поведения элементов, редкие и необычные сценарии.

Каталог и фильтрация

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

Что изменили:

— в десктопе вынесли фильтры в боковую панель как в маркетплейсах — это уже привычный паттерн, который не смутит юзеров и повысит удобство поиска;

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

Обеспечили быстрый доступ к фильтрам с любого устройства.

В каталоге добавили два режима просмотра доступных квестов: список и карта — для поиска игр рядом.

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

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

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

Страница квеста — самая насыщенная по контенту и важная для поисковой индексации. Главной задачей было структурировать большой объём информации и сохранить удобство для пользователя.

Что сделали:

1. Добавили фиксированную навигацию на странице при скролле — помогает ориентироваться в контенте на несколько экранов.

2. Закрепили кнопку бронирования — она всегда видна пользователю и ведёт к целевому действию.

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

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

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

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

7. В нижней части страницы добавили SEO-блоки: перелинковку, раздел «часто ищут», тексты.

В карточках отразили всю информацию, необходимую для принятия решения о бронировании:

— рейтинг по оценкам пользователей;

— сложность;

— жанр;

— возрастные ограничения;

— количество игроков;

— страшность;

— время;

— цену;

— адрес и ближайшую станцию метро.

Выделили call-to-action — кнопку «Забронировать».

Старая форма бронирования плохо конвертила в сделку. Мы спроектировали универсальный блок, который учитывает все сценарии покупки: основной, с дополнительными опциями и промокодом.

Что изменили:

— обновили сетку со временем — активные и неактивные слоты стали очевиднее;

— добавили цветовую индикацию цен — у каждой позиции теперь свой цвет;

— отдельно выделили скидки;

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

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

— сделали расширенную таблицу для сравнения со всеми характеристиками. Пользователь может сравнивать квесты на сайте, как товары в интернет-магазине;

— добавили функцию «только различия» — она отображает отличающиеся параметры;

— внедрили сортировку по категориям, чтобы можно было сравнить квесты внутри одного раздела, а не сопоставлять «детские» с «хоррорами».

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

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

Мы подружили две системы в дизайне, сделали оценку простой и понятной.

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

Личный кабинет стал полноценным хабом с персональной статистикой пользователя — отображаем его уровень, количество накопленных квестобаллов, активность.

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

Визуал страниц разнообразили с помощью ИИ-иллюстраций для категорий и обложек квестов. Сделали 300+ генераций разного уровня сложностей — от 3D-иллюстраций до крупных детальных изображений, которые также анимировали с помощью ИИ.

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

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

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

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

Подробные отчёты и ритуалы для клиента обеспечили прозрачность и предсказуемость.

Разработка сайта — в процессе, доработки по требованиям заказчика продолжаются. Мы поддерживаем коммуникацию и ведём дизайн-поддержку.

Всего получилось: 377 экранов, 850 компонентов дизайн-системы, 300+ ИИ-иллюстраций за 6 месяцев работы.

После запуска новой версии сайта мы с клиентом ожидаем:

1. Рост конверсии в бронирование.

2. Рост LTV (пожизненной ценности клиента) и Retention rate (удержания). Пользователи получат не только свежий и актуальный визуал, но и комфортное взаимодействие с агрегатором. Айдентика позволит сформировать чёткий образ бренда в глазах потребителей. Всё это будет влиять на повышение лояльности аудитории и её возвращаемость.

Итоги для нас

Мы полностью обновили сайт — доработали его по структуре и контенту, улучшили навигацию, прокачали UX, сгенерировали более 300 иллюстраций.

Добавили сравнение в двух режимах и улучшили процесс бронирования.

Редизайн подружил нас с клиентом. Во время долгой и плотной работы заказчик проникся нашим умением развивать идеи и предлагать дизайн-решения высокого качества. На демо-сессия мы открыто обсуждали проблемы и находили лучший выход, прислушиваясь друг к другу.