Лендинг краснодарской лофт-студии

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

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

О задаче

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

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

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

Интерактивный макет в Фигме → https://www.figma.com/proto/rIui7dfcz89C0pEYuKUe8Q/

Полный макет в Фигме с десктопной и мобильной версией → https://www.figma.com/file/rIui7dfcz89C0pEYuKUe8Q/

Первым делом решили поговорить с собственником и администратором, который постоянно контактирует с клиентами и может поделиться с нами инсайтами. На интервью выяснили:

1. Кто целевая аудитория и какие у нее потребности.

2. Какие услуги оказывает компания, чтобы закрыть потребности клиентов.

3. Какие услуги чаще всего пользуются спросом, а какие — не очень. И почему.

4. Какие есть прямые и непрямые конкуренты.

5. Каким способом клиент планирует в дальнейшем получать рекламный трафик на сайт

По итогу получили полную картину бизнес-модели и смогли приступить к аудиту.

Мы сопоставили потребности целевой аудитории с тем, что люди видят на старом сайте. Выявили шесть проблем:

1. Не сразу понятно, на какой сайт попадает гость и что от него хочет клиент. На первом экране мало конкретики.

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

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

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

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

6. Общий дизайн сайта сильно устарел и сам по себе может отпугивать людей. Это плохо скажется на притоке рекламного трафика.

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

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

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

Показали красивые залы. Так как мы выяснили, что у клиента есть много отличных фотографий, которые он делал для Инстаграма (запрещен в России), мы решили их использовать на лендинге. Но была проблема: залы большие, техники и декора довольно много — а значит, чтобы все-все показать, нам надо было придумать, как подать фотографии и не перегрузить гостей.

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

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

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

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

Одно из главных конкурентных преимуществ клиента — цена. Стоимость часа аренды начинается от 1500 ₽, а у конкурентов как минимум в полтора-два раза дороже. Чтобы использовать это преимущество, мы вынесли его в начало страницы и вставили в бросающийся в глаза подзаголовок

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

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

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

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

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

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

Чтобы упростить гостям понимание цен, мы перегруппировали их, переписали текст и сверстали так, чтобы смотрелось красиво →

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

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

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

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

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

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

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

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

В новом лендинге решили все ключевые проблемы, которые выявили во время аудита:

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

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

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

4. Упорядочили раздел с ценами — сделали понятные группировки.

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

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

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