Как я создавала сайт для авторской методики тренировок. Кейс: лендинг для онлайн-клуба

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

Ко мне обратился тренер по пилатесу и постуральной гимнастике. Он создаёт и продвигает свои онлайн продукты. И один из них — онлайн-клуб тренировок для здоровья «Выпрямись!».

Идея клуба в том, что там есть как полноценные курсы и интенсивы (по 20-30 минут), так и короткие микро- и минитренировки (по 1,5-5 минут). Эти тренировки — авторская разработка заказчика, чтобы люди внедряли активность в повседневную жизнь и начинали тренироваться с малого.

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

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

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

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

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

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

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

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

1. Подробно раскрыть принцип клуба, что есть как полноценные тренировки, так и короткие;
2. Сделать сайт интуитивно понятным, так как ЦА в основном возрастная;
3. вызвать ощущение заботы.

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

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

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

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

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

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

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

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