Разработка сайта для игрового клуба: кейс «Маяк»

Клиент и задача

«Маяк» это клуб настольных игр в Санкт-Петербурге: больше 300 игр, три зала на 100 квадратных метров, игротеки с ведущим, квизы, турниры, детские праздники, корпоративы и аренда площадки. Услуг много, а аудиторий несколько, и каждой нужно свое. Поэтому сайт должен был решить сразу несколько задач:

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

Идея и дизайн

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

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

Главная страница

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

• Что у нас: игротеки с ведущим, квизы и «Локсток», турниры, детям и школам, праздники и корпоративы, бар с тематическим меню.
• Тарифы: все цены одним блоком: игротека, стол без ведущего по залам, стоп-чек, аренда главного зала и всего клуба. Рядом ближайшее событие и условия билетов.
• Предложения: шесть карточек, которые ведут на отдельные страницы под разные задачи.
• Фото: галерея из 127 фотографий, которая сама прокручивается, останавливается при наведении и открывает снимки крупно.
• Отзывы, FAQ и контакты: реальные оценки на Яндекс Картах и 2ГИС, ответы на 11 частых вопросов и карта с маршрутом.

Страницы под разные аудитории

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

• Организаторам мероприятий: площадка со светом, звуком, баром и программой.
• Компаниям и командам: корпоративы и тимбилдинг.
• Школам: профориентационные встречи и программа для класса.
• Родителям: детские праздники и игры.
• Языковым клубам: занятия в клубе, английские книги и игры.

Такие страницы помогают и в поиске: у каждой свой заголовок и описание под запрос вроде «аренда площадки для мероприятий в Санкт-Петербурге».

Меню по QR-коду

Для бара мы сделали страницу меню в тематике «Дюны»: названия напитков и чаев отсылают к вселенной, например «Яд Дома Харконненов» или «Кровь Сардаукара». Меню разбито на вкладки «Чай», «Лимонады», «Кофе» и «Еда», у каждой позиции указаны объемы и цены. Гость наводит камеру на QR-код на столе и сразу видит актуальное меню без скачивания приложения.

Менять цены и позиции можно в одном месте, поэтому меню всегда совпадает с тем, что в баре.

Презентация площадки

Организаторы часто просят материал, который можно переслать коллегам или клиенту. Мы собрали презентацию на 16 слайдов в формате страницы и в формате PDF: три зала, бар, свет и звук, коллекция игр, игротеки, ведущие и условия аренды. PDF мы подготовили так, чтобы он весил около 4 МБ, а не десятки мегабайт.

Обратная связь и отзывы

Для гостей клуба сделали простую страницу: после вечера человек отвечает, все ли понравилось. Если да, ему предлагают оставить отзыв там, где удобнее: на Яндекс Картах, во ВКонтакте или в 2ГИС. Если нет, он может сразу написать руководителю в Telegram, и вопрос решают внутри.

SEO и технические решения

• Уникальные title и description для каждой страницы, canonical и карта сайта.
• Микроразметка schema.org: WebSite, адрес, координаты, график работы, предложения и FAQPage на 11 вопросов.
• Блок частых вопросов на главной: где находится клуб, сколько стоит, нужна ли запись, можно ли с детьми.
• Подключена Яндекс.Метрика с целями на заявки и действия.
• Легкие страницы без тяжелых библиотек, фотографии в формате WebP.
• Страницы с согласием и политикой обработки данных, а также реквизиты.

Результат

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

Мы обновим этот кейс. Когда накопятся данные по трафику и заявкам с сайта, добавим их сюда.

Что вынесли из проекта

• Одному сайту нужны разные входы. Организатор, школа и родитель ищут разные вещи, поэтому для каждого лучше отдельная страница.
• Цены на видном месте. Открытые тарифы снимают половину вопросов и звонков.
• Сайт больше, чем главная. Меню, презентация и страница отзывов закрывают задачи, о которых гость или организатор вспоминает уже после знакомства.
• Дизайн должен продолжать логотип. Тогда клуб узнают и на сайте, и на вывеске, и на меню.

Частые вопросы