«Мира Квестов»: редизайн агрегатора с сохранением SEO-структуры

Дискавери

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

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

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

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

 

Планирование и процессы

Разбили проект на этапы и выстроили процесс так, чтобы дизайн и разработка шли параллельно: готовые страницы сразу передавали в разработку.

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

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

Такой формат работы позволил поддерживать стабильный темп на протяжении проекта и уложиться в ожидаемые сроки. 

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

Поиск стилистики

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

Дизайн-концепция

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

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

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

— Собрали в единую систему уже работающие подходы: тёмную тему, сетки, световые акценты и минимализм.

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

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

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

Визуальная метафора

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

Шрифты и цвета

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

Цвет: тёмная основа и акцентные цвета, которые помогают различать жанры.

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

Изображения: передают эмоцию и атмосферу жанра, при этом остаются достаточно сдержанными.

Настроение проекта

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

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

Дизайн страниц

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

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

Ключевые изменения

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

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

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

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

Сделали фильтры доступными, независимо от устройства.

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

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

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

Особенно хорошо сценарий работает на мобильных устройствах.

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

Что сделали:

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

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

3) Собрали контактную информацию в отдельный блок: ближайшее метро, адрес, схему прохода, карту, телефон, сайт и реквизиты компании. Блок закрепляется при скролле. Такой объём информации помогает повысить доверие к квесту и организатору перед внесением предоплаты.

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

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

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

7) Внизу страницы сохранили место для SEO-контента: текстовые блоки добавили, раздел «Часто ищут». Также добавили перелинковку.

Карточка квеста. В карточках собрали ключевые параметры и информацию, которые помогают оценить квест ещё до перехода к бронированию:

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

Чтобы целевое действие было заметным, сделали кнопку «Забронировать» акцентной.

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

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

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

— добавили цветовое кодирование цен, чтобы различать позиции;

— сделали скидки заметнее;

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

Страница сравнения

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

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

— расширили таблицу и вывели в неё все характеристики квестов;

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

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

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

Отзывы и рейтинги. Раньше на сайте одновременно работали две системы оценивания:

— пятибалльная общая оценка, которая использовалась в отдельных городах; 

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

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

Также добавили фотографии игроков к отзывам. Реальные лица делают отзывы более убедительными и помогают сформировать доверие к квесту.

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

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

Иллюстрации

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

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

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

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

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

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

Результаты

Обновлённый «Мир Квестов» уже помогает пользователям находить и бронировать квесты. Мы завершили дизайн-проект в оговоренные сроки. После чего команда клиента реализовала сайт на основе наших решений. Сейчас сервисом уже пользуются посетители по всей России.

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

Итоги проекта:

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

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

3) Сохранили SEO-основу сайта. Переработали интерфейс с учётом существующей структуры и иерархии страниц. Это было принципиальным условием проекта, поскольку более 10 лет SEO обеспечивало сайту высокие позиции в поиске и большой поток пользователей. Нам удалось выполнить эту задачу и при этом обновить сами страницы и улучшить пользовательские сценарии.

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

Масштаб проекта: 377 экранов, 850 компонентов, 300+ иллюстраций, 6 месяцев.

Нужен редизайн сложного цифрового продукта? Давайте обсудим ваш проект.