Космическая визитка для массажиста или как сделать «дорогой» сайт
Привет! Это веб-дизайнер Алина. Я делаю не просто сайты, а инструменты бизнеса. И сегодня я расскажу, как делала сайт-визитку для массажиста с высоким чеком, чтобы она смотрелась «дорого» и привлекала платёжеспособную аудиторию.
Заказчик и задача
Ко мне обратился Рома, один из топовых массажистов Санкт-Петербурга. И у него был запрос: сделать мощный сайт-визитку, чтобы выделяться среди конкурентов и расти в чеках. Так как он регулярно проходит обучения, совершенствует свои техники массажа и уже сам обучает других, то он хочет выходить на новый уровень дохода и сервиса и привлекать другой сегмент аудитории. Для этого ему нужен проработанный сайт, визуал которого будет отражать его и его подход, а смыслы и тексты бить в боли целевой аудитории.
Сбор данных
Для начала я собираю всю имеющуюся информацию. Я буду делать сайт-визитку, поэтому мне нужно много общаться с заказчиком, чтобы прочувствовать его и его философию.
Анализ конкурентов
Далее я начинаю анализировать конкурентов, смотреть какое у них позиционирование и УТП, какие преимущества, какая структура сайтов, как написаны тексты, хочется ли на их сайте купить.
Основной трафик на сайт будет поступать с инстаграм, то есть наша ЦА будет искать мастера также через инстаграм. Поэтому с него я начинаю анализ конкурентов. При анализе я заметила, что ни у кого из частных специалистов нету своего сайта, а у массажных студий он есть в редких случаях.
Поэтому для данного проекта я выбрала следующих конкурентов с сайтами:
- ляг спиной (lyag. ru)
- точка массажа (massagepoint. ru)
- мнешь трешь (mneshtresh. ru)
- вдоль поперек (vdolpoperek. com)
- feedback (feedback-massage. ru)
Все сайты я анализирую по нескольким критериям и весь анализ свожу в таблицу.
Из всех студий мне понравилась только “Точка массажа”. Хороший современный сайт, хорошая структура, заботливые тексты, приятный визуал, успокаивающие цвета. Студия вызывает доверие и хочется туда записаться.
Итог: у "Точки массажа" можно взять идею заботливого tone of voice, у студии "Ляг спиной" можно взять идею оформления подарочного сертификата онлайн, у "Мнёшь трёшь" структуру.
Анализ целевой аудитории
Далее я провожу анализ ЦА. В данной нише его легче провести, так как клиенты приходят оффлайн. Поэтому Рома сам сказал кто к нему ходит. Также он часто репостит отметки в сторис, по которым я смогла перейти и просмотреть аккаунты посетителей.
Так я определила портрет ЦА: девушки, реже мужчины, танцоры или активные люди, возраст 20-35 лет, заботятся о себе и своём здоровье, состоянии. Любят красоту и эстетику.
Далее, чтобы понять, что важно для ЦА, я стала анализировать, что пишут люди в отзывах у конкурентов:
- уточнять жесткость массажа
- прислушиваться к пожеланиям
- перестали мучать боли в спине
- улучшилось самочувствие
- исправилась осанка
- считывает настроение и состояние клиента
- обсуждаем ваш запрос
- приятен в общении
- хорошая локация
- чувствовать тело
- проработать проблемные зоны
- отдыхаешь душой и телом
Когда мы видим, на что обращают внимание люди, мы знаем, что стоит упомянуть в тексте на сайте, о каких результатах после сеанса говорить, и что писать в преимуществах. Кроме того, мы можем говорить их словами, то есть на языке нашей ЦА, что непременно увеличит доверие и побудит записаться на сеанс.
Структура
Далее я составляю структуру сайта. Продуманная структура ведёт пользователя по сайту и постепенно прогревает его к целевому действию.
Чтобы создать структуру я использую классическую структуру сайта, анализ конкурентов и особенности конкретной ниши:
- УТП
- Описание услуги (что это, в чём особенности)
- О мастере (в чём миссия, какая философия, почему занимается этим)
- Квалификация (обучения и сертификаты)
- Преимущества (в чём отличие от конкурентов, почему нужно купить у тебя)
- Услуги
- Подарочный сертификат
- Отзывы
- Контакты
Тексты
Так как я работаю с ценовым сегментом выше среднего, то надо продавать не услугу, а эмоцию. То есть рассказать пользователю, какие именно эмоции он получит после сеанса.
Для этого я буду использовать эмоциональные заголовки, которые будут интриговать и побуждать читать весь текст в блоке.
Эмоциональные заголовки я буду комбинировать с информативными в блоках, где нужна конкретика (обо мне и квалификация). Это позволит человеку ориентироваться на странице.
Для написания основного текста я возьму за основу тезисы, которые люди пишут в отзывах и их tone of voice, чтобы общаться просто и на языке ЦА. Также я хочу, чтобы при чтении текста появлялось чувство, что здесь позаботятся о вашем теле.
Сначала я начинаю генерировать заголовки. Вот некоторые варианты:
Далее я выбираю самые удачные, подбираю их к конкретному блоку согласно структуре и пишу остальной текст.
Дизайн
Пожеланием Ромы было не делать сайт в классическом для массажных салонов стиле. То есть мы решили уйти от эстетичных фото, нежности и спокойствия. Поэтому я решила построить сайт на типографике и её вариация: смещения, сочетание гарнитур.
Так как основная эмоция, которую получают клиенты на массаже у Ромы — это вау-эффект, ощущение полёта и отрыв от реальности, то на сайте я хотела передать такие же эмоции. Поэтому для дизайна я выбрала космическую тематику: тёмный фон, эффект галактики на фоне, синие звёзды у текста и блюр круги.
Основной текст расположен по строгой сетке, чтобы глазу было удобно по нему скользить и воспринимать текст:
Также я разбивала большой текст на несколько частей, чтобы всё было прочитано, и на экране не сразу появлялся массив текста, а небольшие фразы:
Например, здесь. Человек сначала читает заголовок "...новой школы массажа". У него возникает вопрос: "Что за новая школа массажа? А что есть старая?". Далее он видит текст справа, где рассказывается, что действительно есть новая и старая массажные школы и их различия. После он видит фото и уже текст о Роме. Таким образом он получает текст дозировано, экраны не перегружены и мозгу легче получать информацию.
Ещё пример:
Услуги расположены в три строки, хотя есть место, чтобы расположить их в две. Почему так?
Расположив карточки таким образом, пользователь видит одновременно на экране только 4 карточки. Он не теряется от количества и у него есть "воздух", чтобы облегчить восприятие контента. Он может спокойно всё изучить.
Также здесь есть ещё несколько интересных деталей.
Первая заключается в том, что услуги расположены по группам, по смыслу. В первой строке единичные услуги. Во второй — комплексные программы. А в третьей — обучение.
Вторая деталь заключается в том, что первая и последняя услуги выделены другим цветом. Почему так?
Потому что это самые распространённые и самые прибыльные услуги, поэтому:
- Я делаю на них акцент, выделяя цветом
- Цветовые акценты в начале и в конце создают ощущение завершённости композиции
- Тут применены такие UX-паттерны как Эффект Ресторфф и Эффект серийной позиции. Первый гласит, что мы лучше всего запоминаем ту информацию, которая отличается. Второй — лучше всего запоминаются объекты в начале и в конце списка
Итог
В итоге получился сайт, который:
- Отражает все запросы ЦА
- Имеет проработанные тексты, которые продают эмоцию, чтобы привлекать "богатую" аудиторию
- Полностью отражает философию, концепцию и подход массажиста
- Выделяет среди конкурентов
Отзыв
Заказчик полностью доволен работой
Весь сайт можно посмотреть по ссылке
Сайт полностью разработан мной, напишите мне, если хотите так же)
А, сделан на дешевой тильде а не вордпрессе... Тогда понятно
Вордпресс — прошлый век
Комментарий удалён автором поста
Пытался посмотреть но долго грузился, закрыл сайт
Черный цвет не для массажиста