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

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

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

О проекте

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

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

Задача

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

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

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

Аналитика

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

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

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

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

Поэтому я сделала несколько блоков с разделением ЦА по потребностям:

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

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

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

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

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

Концепция

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

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

Дизайн

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

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

Заказчик

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

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

Цветовая гамма сайта
Цветовая гамма сайта
Шрифты, использованные на сайте
Шрифты, использованные на сайте

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

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

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

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

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

Награды

«Сайт дня» на международной премии Design Nominees
«Сайт дня» на международной премии Design Nominees
Подборка лучших сайтов, сделанных на Тильде «Made on Tilda»
Подборка лучших сайтов, сделанных на Тильде «Made on Tilda»

Отзыв

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

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

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

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

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

33
3 комментария

Супер идея с короткими тренировками! Я тоже не всегда могу уделить много времени занятиям, поэтому это для меня. Жду доступа к личному кабинету!

5
Ответить

У меня тоже такая проблема! Поэтому я как только закончила сайт, купила доступ в клуб)) Теперь всем рекомендую)

Ответить

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

2
Ответить