Проделанная работа
Основные задачи, которые стояли пред нами для реализации посадочной страницы:
- Сбор контента для посадочной страницы карточки товара
- Анализ рынка, выявление преимуществ продукта
- Проработка прототипа карточки товара
- Создание дизайн-макет карточки товара
- Верстка согласованного дизайна макета
- Интеграция верстки на WordPress на конкретную посадочную страницу товара
Для наглядности всех преимуществ и работы товары, одной из основных задач была качественная и уместная анимация на сайте.
В качестве стартового экрана нас встречает анимированный стартовый экран, где с правой стороны расположилось подробное качественное видео с работой устройства. А с левой стороны расположился заголовок, который обещает рассказать далее об основных преимуществах (инновациях) товара.
Далее на сайте внедрили непосредственно саму карточку товара. Карточка товара на сайте понятная и удобная для пользователей, полноценно рассказывающая о продукте.
Блог с преимуществами товара выделяется яркими иконками, отличающимися от других цветов на сайт и подчеркивает дополнительную ценность и безопасность продаваемого товара.
Ещё один блок преимущества от использования продукта сочетает в себе центральное круглое изображение с процессом использования товара и вокруг него адаптивные круглые иконки, содержащие в себе черты лица. Эти конки несут в себе информацию о плюсах и результатах от использования продукта и являются «отзывчивыми» — меняют внешний вид при наведении курсора.
В стилистике иконок ниже приведены основные характеристики продукта.
После этого визуально отобразили работу товара и результат благодаря девушке с прибором, а также описали преимущества и результаты действия массажера с более профессиональной точки зрения.
Блок с технологиями и принципом работы массажера является самым ярко выраженным на сайте. Изображения расположились фоне олицетворяющим кожу и притягивают внимание своей анимацией. Анимированными являются стрелки, отражающие импульс устройства и полукруги, показывающие излучение.
На сайте представлены цвета различные цвета лазера массажера, применение каждого цвета дает свой результат. Круги, в которых расположились изображения товара, также являются анимированными при наведении на них — это необходимо для удержания внимания пользователя.
Следующий блок повторяет основные круговые элементы, которые используются на сайте. Блок содержит в себе информацию об удобности использования массажера.
Далее добавили детальный блок, в котором наглядно показали основные элементы продукта, из каких деталей он состоит.
После этого разместили на сайте этапы проведения процедуры. С левой стороны меняющиеся фотографии с девушкой, с каждым этапом использования массажера. Справа, текстовая область с подробными этапами проведения процедуры. При нажатии на одну из пяти черную черту, текст, принадлежащий ей, выделяется жирным.
Добавили на сайте блок с рекомендуемыми товарами. Рекомендательная система анализируют интересы пользователей и выявляет потребности посетителей и в нужный момент делает интересные именно им предложения на сайте.
Далее расположили партнёров компании, пользователь может увидеть, на каких ещё сайтах есть возможность заказать товар.
В результате
Во время работы над посадочной странице мы полностью погрузились в сферу бьюти. Провели анализ рынка, выявили преимущества продукта, обдумывали стратегию как со стороны интересов заказчика, так и посетителя, чтобы проработать удобство использования страницы, доступность информации, простоту заполнения форм. На выходе получилась качественная посадочная страница, которая притягивает внимание приятным и интересным дизайном и динамическими элементами, полностью рассказывающая о товаре и его преимуществах.
