Кейс: создание сайта гостиницы с нуля на шаблоне WordPress

Клиент
К нам обратился клиент из Кургана. Он занимается гостиничным бизнесом. На тот момент новый отель только открывался и никакого сайта не было. Предстояло полностью проработать его структуру, контент и оформление. Отель MOST – первый бутик-отель в Кургане. Он располагается в двух зданиях. Одно из них появилось на карте Кургана в 1914 году. Сейчас в этом здании находится ресторан Meat&Wine и исторический корпус отеля MOST. Современный корпус был построен недавно для бутик-отела Мост.
В отеле 18 дизайнерских номеров, также есть коворкинг с библиотекой и лаунж: здесь можно назначать встречи, устраивать конференции, семинары или тренинги.

Цели и задачи агентства:

• создать понятный по навигации сайт с высокой конверсией;
• привязать системы аналитики;
• интегрировать TravelLine для бронирования номеров;
• настроить доменную почту;
• обучить клиента работе с сайтом.
  

Обсуждение проекта с командой
В рамках этого этапа проектный менеджер подготавливает всю информацию по работе с клиентом и координирует работу команды. В его обязанности входит:
1) создает проектную таблицу, в которой описываются детали проекта;
2) собирает планерку с командой, где рассказывает о проекте + составляется график работ по проекту;
3) формирует список вопросов по проекту, которые потом задаст клиенту;
4) согласовывает план-график работ;
5) создает общий чат с клиентом, где знакомит команду с заказчиком;
6) согласовывает время для созвона с клиентом и командой.

Анализ конкурентов
Первый этап разработки сайта для гостиницы — анализ конкурентов и целевой аудитории. Мы составляем перечень крупных игроков рынка, смотрим удачные решения, фиксируем гипотезы и на практике. Это нужно, чтобы понять нишу, оценить конкуренцию и предложения. После, формируем УТП для составления портрета целевой аудитории. Все это оформляем в таблицы и обсуждаем с клиентом. Согласованный результат используем в работе.

Для анализа мы подобрали конкурентов из того же города. При выборе основывались на месте положения гостиниц и ценах за услуги. Было выбрано три основных игрока, которых мы проанализировали по нескольким параметрам. В роботу мы взяли не всё. О самых удачных решениях ниже:

Мобильная версия
Например, выяснилось, что у двух из трех конкурентов нет мобильной версии сайта. По итогам 2021 года, доля мобильного трафика выросла еще на 2% и сейчас в среднем по миру составляет 54%. Это значит, что больше половины посетителей, приходящих на сайт без адаптивной версии, попадает на страницы, которые невозможно читать. Все шаблоны на WordPress идут с мобильными версиями, а значит наш клиент не потеряет мобильный трафик. По прошествии времени в Яндекс Метрике видим, что за месяц у отеля 2 072 посетителя со смартфонов — это почти в четыре раза больше чем с персональных компьютеров:

Отчет по посетителям с разных устройств на сайте отеля «MOST»

2. Акции
Ещё один вывод был связан с акциями. У всех гостиниц-конкурентов были специальные пакетные предложения для молодоженов. Дополнительно в гостиницах предлагали скидку при бронировании сайта или скидку на бронирование номеров в выходные дни. Мы посоветовали заказчику разместить свои акции, так как видно было, что это пользуется спросом. В итоге на главной странице сайта был сделан блок со специальными предложениями, в котором описывались акции от отеля «MOST»:

Блок со специальными предложениями

3. Блок про услуги
Также проанализировали услуги на сайтах конкурентов. Почти все из них делали акцент только на то, что связано со спорт и конференц залами. Лишь один из них выделял целый раздел, где каждая услуга расписана отдельным пунктом. Мы посовещались с клиентом и разместили на главной 4 услуги, а остальные сделали списком, который можно посмотреть на отдельной странице, если нажать на кнопку «Смотреть все услуги». Это позволило вывести самое важное, а остальное подробно расписать в другом месте, не занимая лишнее пространство.

Блок с услугами на главной странице

Таблица с анализом конкурентов

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

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

Каждая аудитория была разобрана как сегмент по интересам, потребностям и ожиданиям:

Боли клиентов

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

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

Боли молодоженов:

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

Боли путешественников:

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

Боли организаторов мероприятий:

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

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

Шаблон

Когда мы говорим о шаблоне, то может возникнуть вопрос: «зачем делать прототип, если есть тема с заложенными блоками и дизайном»? Отвечаем. Благодаря тому, что мы используем фреймфорк Elementor pro, у нас появляется возможность детально редактировать тему: хронологию и состав блоков, тексты, шрифты, кнопки и другие элементы. Поэтому мы не ограничены в дизайне, как это может показаться на первый взгляд. То что есть в шаблоне, мы берем за основу, которую дорабатываем в процессе.

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

• есть фреймфорк Elementor pro, чтобы был максимум возможностей по редактированию шаблона;
• поддерживал актуальную версию вордпресса.

Из 6 тем, клиент выбрал одну, которую мы взяли в работу. Её можно посмотреть ниже на видео. Далее вы увидите разницу с тем что было и что получилось в итог. Так выглядел первоначальный шаблон:

Прототип и написание текстов

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

Как мы работаем с прототипом сайта
В процессе брифинга с клиентом составляется перечень страниц, которые мы должны отрисовать в прототипе. В этом проекте нами было составлено 13 страниц. Тексты редактировались в процессе, а изображения вставлялись на этапе верстки, так как фотографии были ещё не готовы.

Прототипы страниц

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

Вёрстка

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

В каком порядке делается верстка сайта отеля
В работе с шаблонами мы вначале верстаем главную страницу. Согласовываем ее, после чего приступаем к внутренним страницам. Главная страница — это лицо компании. Она включает в себя дизайн концепцию основного сайта: шрифт, цвета кнопок, сетку. Если клиенту что-то в ней не нравится, то мы правим только ее одну, а не весь сайт. Поэтапная верстка страниц делается для того, чтобы постранично согласовывать проделанную работу, и чтобы заказчик сразу видел прогресс. В итоге заказчик получает результат поэтапно и для него не возникает неожиданностей, как если бы мы верстали весь сайт сразу. Так мы экономим время и бюджет заказчика.

Главная страница сайта отеля MOST

Из чего состоит верстка
Мы выбираем элементы, которые будут повторяться: цвета, кнопки, заголовки. По сути составляем UI Kit.

Дальше на основе прототипов собираем сайт, отталкиваясь от брендбука компании. Если его нет, то выбираем шрифты и цвета и согласовываем их с заказчиком. Проектный менеджер после верстки проверяет сайт по чек-листу. Смотрит как выглядит мобильная версия, как проходит загрузка, наличие SEO-тегов и т.д. Только после того, как все проверено мы публикуем сайт.

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

Мобильная версия страниц

Интеграции
На проекте мы интегрировали:

• Яндекс метрику для наглядных отчетов по действиям посетителей на сайте и отслеживанию источников трафика.
• TravelLine для бронирования номеров.
• Настроили интеграцию между формами и почтой.
• Настроили доменную почту.

На скриншоте видно, что цели в Яндекс Метрике работают, сайт функционирует, воронка настроена.

• Перед тем как отдать в работу сайт, проектный менеджер записывает видео как работать с ним: как редактировать страницы, создавать новые, как пользоваться панелью администратора. Клиент, получив и посмотрев это видео, может самостоятельно управлять и наполнять сайт.
• Благодаря детальному брифу и опыту работы мы как правило точно определяем время, которое нам потребуется. В данном проекте мы заложили на работу 100,5 часов. По факту потратили 110.
• Мы не только устанавливаем веб-аналитику с целями, но и записываем видео о том, как читать отчеты Яндекс Метрики и как интерпретировать данные из них.
• После того, как клиент согласовывает сайт, сообщаем в Google search console и Яндекс Вебмастер о том, что появился такой сайт и мы создали его карту — Sitemap.xml. В ней содержится информация, какие страницы есть на нашем сайте. Это нужно, чтобы быстрее прошла индексация сайта.
• Даем гарантию на наши работы 30 дней, на случай если возникнут какие-то вопросы или неполадки.
• В конце мы высылаем письмо с ссылкой на проектную таблицу с видео-инструкцией о том, как ее читать. В ней содержится все, что было сделано в процессе работы и все доступы.

Если вы ищете компанию, которая поможет создать сайт отеля или гостиницы под ключ, обращайтесь в digital-агентство «ЭТО ЯСНО». Для каждого клиента разрабатывается индивидуальный подход, в зависимости от целей компании. В основе сотрудничества лежит абсолютная прозрачность, работаем строго по договору. Чтобы получить бесплатную консультацию, оставьте заявку на сайте.