Разрабатываем сайт о методике похудения

20.11.2017 Евгений Казаков

История создания сайта, посвященного «вечной» женской проблеме — безоперационным методам борьбы с лишним весом. Как мы разрабатывали Landing Page с несколькими информационными страницами и тестом для повышения доверия к методике B-flexy.

Отправная точка

ООО «Бифлекси-Запад» разрабатывает и производит аппараты для коррекции фигуры и борьбы с целлюлитом. Компания несколько лет сотрудничает с WebCanape по разработке сайтов, продвижению, интернет-рекламе. 

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

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


Они пользуются услугами:

Разработка сайта  Интернет-реклама  Продвижение 

Сайт:
b-flexy-metodika.ru

Тип сайта:
информационный

Цели:
разработка информационного сайта о процедуре для повышения доверия к услуге и увеличению ее спроса в салонах

Бифлекси - разработка сайта


Ход работ

B-flexy для женщин 23–50 лет, которые стремятся привести себя в форму. Сайт должен был убедительно информировать конечных потребителей об эффективности аппарата B-flexy и побуждать их обратиться в салоны красоты, которые используют такие аппараты. При этом сайт должен быть удобным для просмотра с любых типов устройств, чтобы охватить и мобильную аудиторию.

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

  • галерея фото до и после процедуры коррекции,
  • онлайн-тестирование и онлайн-консультации,
  • отзывы и видео.

Разработка дизайна

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

Официальный сайт производителя аппаратов

B-flexy - официальный сайт

Сайт продукта в розовой цветовой гамме

B-flexy Pink - сайт компании

«Бифлекси–Запад»

Бифлекси Запад - сайт компании

Старый сайт о методике B-flexy

Сайт методики B-flexy

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

Поскольку стояла задача повысить узнаваемость аппарата среди широких масс, решили использовать:

  • простые понятные тексты,
  • наглядные материалы (фото до и после, онлайн-тестирование, видео),
  • экспертный контент (рекомендации СМИ, онлайн-консультации, отзывы),
  • адаптивный дизайн (корректное отображение на мобильных устройствах и смартфонах).

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

Слева направо: несколько пробных вариантов и окончательная версия главной страницы

Первый вариант дизайна сайта B-flexy

Второй вариант дизайна сайта B-flexy

Третий вариант дизайна сайта B-flexy

Дизайн внутренних страниц

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

Страница с общей информацией о процедуре

Общая информация об услуге

Общая информация об услуге

Страница с галереей результатов

Здесь потребовалось добавить фильтрацию результатов и сделать увеличенный просмотр с текстовыми комментариями. На втором скриншоте — добавлена кнопка «Смотреть далее» для вывода большего количества работ.

страница с тестированием

страница с видео и тестированием

Страница тестирования

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

Прохождение тестирования на сайте

Тест на странице включает четыре последовательных вопроса с анимированными переходами.  

Программирование теста на сайте

Результат прохождения теста выводится в виде итогового блока с перечислением проблемных зон и рекомендаций по использованию или не использованию процедуры B-flexy.

Результатирующая страница теста на сайте

Дизайн адаптивной версии сайта

Адаптивный дизайн сайта, рассчитанный на небольшие мониторы, планшеты и мобильные телефоны, создавался на базе основной десктопной версии и функционально ни в чем ей не уступает.

Ниже — фрагменты нескольких страниц в отображении на планшете и телефоне.

Главная страница, версия для телефонов

Адаптивный дизайн

Адаптивный дизайн сайта

Главная страница, версия для планшетов

Дизайн для планшетов

Дизайн под планшеты

Сложности

Разделы сайта имеют нетривиальный функционал:

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

Каждый блок требовал прорисовки дизайна и дополнительного согласования макетов с отделом верстки и программирования.

Разбор ошибок

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

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

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


Публикация сайта

Новый сайт был размещен на основном домене b-flexy-metodika.ru. После размещения по просьбе клиента в раздел тестирования была добавлена интерактивная карта, где точками обозначены салоны и представительства компании почти во всех крупных городах России и ближнего зарубежья.

Итоги проекта

Бюджет 118 000 рублей
Количество разработчиков 5 человек
Потрачено времени 132,6 часа
Срок разработки 207 дней

Хотите заказать разработку сайта, продвижение или контекстную рекламу? Свяжитесь с нами по телефону: 8-800-200-94-60, доб. 321 или оставьте запрос на электронную почту az@web-canape.com.

8 800 200 94 60

Звонок бесплатный

Смоленск +7 (4812) 20-94-60

Москва +7 (499) 506-97-20

Сертифицированный партнер