Обновление сайта для Клаустрофобии

Главное о кейсе

Театр начинается с вешалки, а квест - с нового сайта Клаустрофобии (создателя самых масштабных квестов в России и Европе). Поэтому мы решили погружать пользователей в атмосферу квестов с момента входа на сайт: игровые механики, анимации, необычные ховеры, интерактивные элементы, всё это вкупе с проработанными UX и UI позволили показать пользователям реальные масштабы и возможности Клаустрофобии, а клиенту - улучшить бизнес-показатели.

Так, за 3 месяца с момента запуска сайта в сравнении со старой версией сайта за 3 предыдущих месяца:
- глубина просмотра на мобильных устройствах увеличилась на 30,2%, на десктопе - на 64,1%;
- процент отказа снизился в мобильных устройствах на 18,5%, на десктопе - на 26,3%;
- доля посетителей, совершивших заказ возросла практически в 3 раза (на основе Яндекс.Метрика).

Eng

The theater begins with a hanger, and a quest begins with the new "Claustrophobia" website (the creator of the most extensive escape rooms in Russia and Europe). Therefore, we decided to immerse users in the quest atmosphere right from the moment they enter the site: gaming mechanics, animations, unusual hovers, interactive elements – all of this, together with well-developed UX and UI, allowed us to show to clients the real scale and opportunities of "Claustrophobia"and improving business performance.

The first 3 months after the new site launch, compared to the old site version over the previous 3 months showed:
- the page depth view increased by 30.2% on mobile devices and by 64.1% on desktop;
- the bounce rate decreased by 18.5% on mobile devices and by 26.3% on desktop;
- the percentage of visitors placing orders nearly tripled (based on Yandex.Metrica).

Как проект изменил жизнь пользователей

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

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

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

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

Eng
Gaming mechanics and animations gradually immersing users in a completely new reality full of mysteries and adventures and giving them the opportunity to:
- easily and quickly choose and book the most suitable quest with «smart selection» feature;
- finally learn how come ideas and how quests are created by peeking behind the scenes of "Claustrophobia" through the keyhole;
- discover interesting facts about the company life, how it developed and grew, by going back in time and even glimpsing into the future of quests;
- embark on a search for the 404 Page together with a real ghost.

Of course, we didn't forget about newcomers, as it's their first experience with the product. In storytelling format, we carefully tell them that quests are not the place where you get hit while trying to open a door, nor it’s difficult and scary (although... if you really want, we have something for you). For those who are just planning to get acquainted with quests, we prepared special game collections for easy immersion into this new world.

And for more experienced players, we kept the option to choose a suitable game in the old catalog scenario, but with updated UX/UI. We placed it in a separate section, simplifying search and filter mechanics.

What was also important in our opinion, is to introduce users to the company, telling them how quests are created, starting from writing the original script to constructing a location, the scale of which can reach streets with three-story houses.

Бизнес-задача и ее решение

Основные бизнес-задачи проекта:
1. Упростить ключевой сценарий - поиск и бронирование квестов - чтобы повысить конверсии в покупку.
2. Закрепить репутацию компании-эксперта в части создания квестов.
3. Выделиться среди конкурентов с типовыми сайтами, которые по сути являются просто агрегаторами, но их сайты более современны, поэтому привлекают больше клиентов.
4. Сделать портал адаптивным и удобным в использовании на разных устройствах, т.к мобильный трафик (планшеты+смартфоны) составляет более 75%.

В результате проведенных исследований (UX/UI-аудит, анализ конкурентов и опросы ЦА) мы выявили следующие проблемы:
1. При большом количестве квестов сложно подобрать нужный.
2. Не проработаны сценарии поиска квестов «поблизости» и с привязкой к станциям метро в режиме карты.
3. Расписание перегружено и не всегда очевидно, как и где оплачивать квест.
4. Основная часть трафика с мобильных устройств, при этом есть проблемы с адаптацией.
5. В блоге много статей, но нет никакой навигации или поиска, темы, связанные с квестами и не связанные, расположены вперемешку и в них сложно ориентироваться.
6. UI перегружен иконками и лишними элементами, иерархия заголовков нарушена, использование шрифтов не регламентировано (особенно на внутренних страницах).

Решения по результатам проектирования:
1. Вместо шаблона интернет-магазина – игровые механики и персонализация (визард пошагового подбора квеста по наиболее подходящим параметрам с микроанимациями, изменениями фона и выдачей наиболее подходящих результатов).
2. На главной странице отошли от каталога квестов и перестроили её таким образом, чтобы пользователь сразу мог выбрать ранжированный квест, посмотреть интересующую подборку, прочитать статью по теме или обзор.
3. На странице каталога квестов оптимизировали поиск и детально проработали систему фильтрации, чтобы каждый пользователь смог легко и быстро подобрать для себя наиболее подходящий квест.
4. Обновили страницу квеста: теперь она погружает пользователя в историю квеста, показывает наиболее интересные и захватывающие фотографии, риббоны с особенностями, а также сторис с фотографиями команд, прошедшими его.
5. Расширили функционал поиска квестов по карте, добавили функцию «рядом со мной» и привязку к метро.
6.Ооптимизировали расписание, в котором появилась понятная легенда и тултипы, благодаря которым стало очевидно как бронировать и оплачивать каждый квест.
7. Проработали адаптивный дизайн, доступный для разных типов устройств.

Eng

The main business objectives of the project were as follows:
1. Simplify the key scenario - searching and booking quest - to increase conversion to purchase.
2. Solidify the company's reputation as an expert in creating escape rooms.
3. Stand out among competitors which are simply aggregate quests, and not create it but have more modern websites and therefore attracting more clients.
4. Make the product adaptive and user-friendly on various devices, considering that mobile traffic constitutes over 75%.

As a result of conducted research (UX/UI audits, competitor analysis and target audience surveys), the following issues were identified:
1. Difficulty in selecting the right quest when there is a large number of options.
2. Underdeveloped scenarios for searching "nearby" and linking it with metro station on a map.
3. Overloaded schedule with unclear payment instructions.
4. Adaptation issues for mobile devices.
5. The blog contains many articles, lacking navigation or search features, with topics unrelated and intertwined with quests.
6. UI overloaded with icons and unnecessary elements, disrupted header hierarchy, and unregulated font usage (especially on internal pages).

Solutions based on design results:
1. Implemented gaming mechanics and personalization instead of a standard online store template approach (step by step selection wizard with micro-animations and the most relevant result)
2. Restructured the catalog at the homepage for ease of selecting ranked quests, viewing collections, and reading articles.
3. Optimized search and filtering systems on the quests catalog page.
4. The updated quest page now provides the quest's history, photos, ribbons, and stories with teams’ pictures.
5. Expanded the quest map search functionality, added a "near me" feature, and integrated metro station links.
6. Optimized the schedule with a clear legend and tooltips for clarity in quest booking and payment.
7. Developed adaptive design for various devices.

Крафт (мастерство), реализация, технические детали

Добились эффекта "pixel-perfect" вёрстки и минимизировали риски отступлений от дизайн-концепции, подготовив для клиента специальный гайд по поддержанию единства стилей сайта. Идея возникла, когда клиент приступил к контентному наполнению сайта и мы заметили небольшие расхождения в визуале от дизайн-концепции.

Eng

We achieved a "pixel-perfect" effect in layout and minimized the risks of deviations from the design concept by providing the client with a special guide on maintaining the site style consistency. The idea arose when the client began adding content to the site, and we noticed slight deviations from the design concept.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Чтобы создать новый сайт Клаустрофобии оказалось, что нужно пройти свой собственный квест: разгадать загадки по типизации квестов, успеть “завладеть” заветным ключом (ну точнее - шрифтом, наиболее подходящим для концепта сайта) и успеть приобрести его за несколько дней до снятия с продажи, заглянуть в каждый скрытый от глаз обывателя уголок бронирования, пройти испытание на "pixel-perfect" вёрстку и много другое...

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

Eng

During the project creation, we encountered various storylines: detective, thriller, drama, tragedy, narrative, failures, triumphs, conflicts, insights, and inside information. It was a real journey of creation, full of interesting moments.
To create the new site for "Claustrophobia," we had to embark on our own quest: deciphering the mysteries of quest typology, quickly "capturing" desired key (and we mean font, perfectly suited to the site's concept) and obtaining all necessary licenses a few days before it was removed from sale, exploring every nook of the booking process, passing the "pixel-perfect" layout test, and much more...

While working on the project, we not only tested layout bugs but also immersed ourselves in new quests from "Claustrophobia," drawing inspiration and experiencing its atmosphere and the unique aspects of the client’s business. Therefore, in addition to solving business tasks and improving user-friendliness, we aimed to convey these feelings to future site users, future players.

Скриншоты