Найти в Дзене

Космическая визитка для массажиста или как сделать «‎дорогой» сайт

Оглавление

Привет! Меня зовут Алина. Я веб-дизайнер фрилансер. И сегодня я расскажу, как делала сайт-визитку для массажиста с высоким чеком, чтобы она смотрелась «дорого» и привлекала платёжеспособную аудиторию.

Главный экран сайта
Главный экран сайта

Заказчик и задача

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

Сбор данных

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

Информация о проекте
Информация о проекте

Анализ конкурентов

Далее я начинаю анализировать конкурентов, смотреть какое у них позиционирование и УТП, какие преимущества, какая структура сайтов, как написаны тексты, хочется ли на их сайте купить.

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

Поэтому для данного проекта я выбрала следующих конкурентов с сайтами:

Все сайты я анализирую по нескольким критериям и весь анализ свожу в таблицу:

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

Из всех студий мне понравилась только “Точка массажа”. Хороший современный сайт, хорошая структура, заботливые тексты, приятный визуал, успокаивающие цвета. Студия вызывает доверие и хочется туда записаться.

Итог: у "Точки массажа" можно взять идею заботливого tone of voice, у студии "Ляг спиной" можно взять идею оформления подарочного сертификата онлайн, у "Мнёшь трёшь" структуру.

Анализ целевой аудитории

Далее я провожу анализ ЦА. В данной нише его легче провести, так как клиенты приходят оффлайн. Поэтому Рома сам сказал кто к нему ходит. Также он часто репостит отметки в сторис, по которым я смогла перейти и просмотреть аккаунты посетителей.

Так я определила портрет ЦА: девушки, реже мужчины, танцоры или активные люди, возраст 20-35 лет, заботятся о себе и своём здоровье, состоянии. Любят красоту и эстетику.

Далее, чтобы понять, что важно для ЦА, я стала анализировать, что пишут люди в отзывах у конкурентов:

  • уточнять жесткость массажа
  • прислушиваться к пожеланиям
  • перестали мучать боли в спине
  • улучшилось самочувствие
  • исправилась осанка
  • считывает настроение и состояние клиента
  • обсуждаем ваш запрос
  • приятен в общении
  • хорошая локация
  • чувствовать тело
  • проработать проблемные зоны
  • отдыхаешь душой и телом

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

Структура

Далее я составляю структуру сайта. Продуманная структура ведёт пользователя по сайту и постепенно прогревает его к целевому действию.

Чтобы создать структуру я использую классическую структуру сайта, анализ конкурентов и особенности конкретной ниши:

  1. УТП
  2. Описание услуги (что это, в чём особенности)
  3. О мастере (в чём миссия, какая философия, почему занимается этим)
  4. Квалификация (обучения и сертификаты)
  5. Преимущества (в чём отличие от конкурентов, почему нужно купить у тебя)
  6. Услуги
  7. Подарочный сертификат
  8. Отзывы
  9. Контакты

Тексты

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

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

Эмоциональные заголовки я буду комбинировать с информативными в блоках, где нужна конкретика (обо мне и квалификация). Это позволит человеку ориентироваться на странице.

Для написания основного текста я возьму за основу тезисы, которые люди пишут в отзывах и их tone of voice, чтобы общаться просто и на языке ЦА. Также я хочу, чтобы при чтении текста появлялось чувство, что здесь позаботятся о вашем теле.

Сначала я начинаю генерировать заголовки. Вот некоторые варианты:

Варианты заголовков
Варианты заголовков

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

Дизайн

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

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

-5

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

-6

Также я разбивала большой текст на несколько частей, чтобы всё было прочитано, и на экране не сразу появлялся массив текста, а небольшие фразы:

-7

Например, здесь. Человек сначала читает заголовок "...новой школы массажа". У него возникает вопрос: "Что за новая школа массажа? А что есть старая?". Далее он видит текст справа, где рассказывается, что действительно есть новая и старая массажные школы и их различия. После он видит фото и уже текст о Роме. Таким образом он получает текст дозировано, экраны не перегружены и мозгу легче получать информацию.

Ещё пример:

-8

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

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

Также здесь есть ещё несколько интересных деталей.

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

Вторая деталь заключается в том, что первая и последняя услуги выделены другим цветом. Почему так?

Потому что это самые распространённые и самые прибыльные услуги, поэтому:

  1. Я делаю на них акцент, выделяя цветом
  2. Цветовые акценты в начале и в конце создают ощущение завершённости композиции
  3. Тут применены такие UX-паттерны как Эффект Ресторфф и Эффект серийной позиции. Первый гласит, что мы лучше всего запоминаем ту информацию, которая отличается. Второй — лучше всего запоминаются объекты в начале и в конце списка

Итог

В итоге получился сайт, который:

  1. Отражает все запросы ЦА
  2. Имеет проработанные тексты, которые продают эмоцию, чтобы привлекать "богатую" аудиторию
  3. Полностью отражает философию, концепцию и подход массажиста
  4. Выделяет среди конкурентов

Отзыв

Заказчик полностью доволен работой

-9

Весь сайт можно посмотреть по ссылке

Сайт полностью разработан мной, напишите мне, если хотите так же)