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

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

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

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

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

Ход работ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сложности

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

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

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

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

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

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

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

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

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

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

Автор — Евгений Казаков