Как создать конверсионный сайт. Кейс: редизайн сайта для онлайн-клуба аэробных тренировок

Всем привет! Это веб-дизайнер Алина. Я разрабатываю не просто сайты, а инструменты бизнеса. И сегодня хочу рассказать, как я создаю конверсионный сайт, который продаёт за вас.

Первый экран сайта
Первый экран сайта

О проекте

Шагай дома — это онлайн-клуб аэробных тренировок. Клуб действует на основе ежемесячной подписки. И по этому абонементу в записи доступны все тренировки разной длительности и интенсивности.

Основная идея клуба — привлечь как можно больше людей к активному образу жизни. Тренировки разработаны таким образом, что у них нет противопоказаний по здоровью и они по силам каждому. Поэтому в клубе состоят участники от 30 до 90 лет.

Задача

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

Старый сайт
Старый сайт

Что было сделано?

  1. Анализ сайтов конкурентов;
  2. Анализ целевой аудитории;
  3. Написание текстов;
  4. Разработка текстового прототипа;
  5. Создание уникальной дизайн-концепции;
  6. Вёрстка на Тильде и адаптация для мобильных устройств.

Аналитика

Чтобы сделать рабочий сайт, я провела большую аналитическую работу. Я проанализировала другие сайты с онлайн-тренировками, выписала, какие тезисы они используют, какая структура сайтов, какие есть блоки. С сайтов конкурентов мы взяли себе некоторые идеи.

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

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

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

Тексты и прототип

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

Аудитория клуба в основном возрастная, поэтому мы старались максимально подробно всё рассказать и показать.

На основе текстов я составила структуру и прототип сайта:

Прототип сайта
Прототип сайта

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

Дизайн

Основные пожелания заказчика:

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

Заказчик

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

Цветовая палитра сайта
Цветовая палитра сайта

Шрифт Unbounded идеально подошёл этому проекту, с ним сайт прямо заиграл. Он массивный, что показывает неформальный стиль, а его изгибы передают динамику проекта.

Шрифтовая пара проекта
Шрифтовая пара проекта

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

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

Чтобы добавить движения, я подобрала эмоциональные фото с тренировок и в некоторых местах мы решили заменить фото на видео. В частности, на первом экране и в блоке с тренерами.

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

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

Дизайн главной страницы сайта
Дизайн главной страницы сайта

Результат

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

Фото 1 — конверсия старого сайта. Фото 2 — конверсия нового сайта.
Фото 1 — конверсия старого сайта. Фото 2 — конверсия нового сайта.

Награды

Галерея лучших сайтов на Тильде «Made on Tilda»
Галерея лучших сайтов на Тильде «Made on Tilda»

Отзыв

Заказчик очень доволен результатом

Скриншоты диалога
Скриншоты диалога

Сайт можно посмотреть по ссылке: (сайт редактируется заказчиком, возможно изменение исходного дизайна)

Спасибо за просмотр!

Буду рада создать для вас уникальный проект. Напишите мне, если хотите заказать сайт.

11
1 комментарий

спасибо за инфу

Ответить