Разработка сайта для продажи ПВД-пленки
ЗаказчикЗаказчик — компания, которая занимается производством товаров для упаковки продукции, в том числе пленок высокого давления (ПВД-пленка)ЗадачаСоздать сайт, направленный на продажу конкретного сегмента продукции — ПВД-пленки. При этом необходимо сделать акцент на том, что компания Заказчика является производителем этой пленки
1. Этапы работы над проектом
1.1. Выбор архитектуры сайта
Продаваемый товар — ПВД-пленка, у которой есть несколько разновидностей: термоусадочная, техническая, парниковая, цветная, перфорированная. А также мешки и пакеты из ПВД-пленки. Классический Интернет-магазин с корзиной и процедурой оформления заказа в этом случае будет излишен, к тому же онлайн-оплата на сайте не требуется. Поэтому мы остановились на формате двухстраничного сайта, на главной странице которого приводится общая информация о видах пленки и компании производителе. А на странице с конкретным видом пленки приводится детальная информация об этой продукции
Основное конверсионное действие — отправка формы для заказа пленки
Основной инструмент вовлечения — калькулятор пленки, который позволяет рассчитать размеры ролика с пленкой и оставить заявку на заказ пленки по индивидуальным размерам.
1.2. Составление портрета целевой аудитории
Мы составили портрет целевой аудитории
Изучили сайты конкурентов и составили сценарий взаимодействия с нашим сайтом. Определили основные блоки и конверсионные элементы:
— верхний баннер
— калькулятор
— форма заказа обратного звонка
— форма остались вопросы
1.3. Разработка прототипа
На основании информационной архитектуры разработали прототип сайта и согласовали его с Заказчиком. В прототипе основные сценарии (например, калькулятор, навигацию по странице) сделали кликабельными
1.4. Разработка дизайна
У Заказчика уже есть Интернет-магазин по продаже продукции для упаковки, поэтому мы решили использовать дизайн-концепцию существующего Интернет-магазина. При этом немного модифицировать ее, добавив акцентный цвет и немного скруглив края. Таким образом конверсионные блоки стали заметнее, а атмосфера стала чуть менее строгая
2. Описание основных блоков главной страницы:
2.1. Блок с позиционированием
Здесь приведена информация о позиционировании сайта, минимальная стоимость продукции и три самых важных факта, которые интересуют целевую аудиторию
2.2. Блок «Каталог продукции»
Здесь представлены фото видов ПВД-пленки, со ссылками на страницу, где приведено подробное описание каждого вида пленки
2.3. Блок вовлечения
Данный блок представляет собой инструмент, благодаря которому пользователь может сделать заказ пленки по своим индивидуальным параметрам.
На первом экране происходит выбор типа пленки. На втором экране выбор параметров пленки — вид продукции и ее сорт.
На третьем экране пользователь выбирает что именно нужно рассчитать — длину или вес рулона, и указывает требуемые параметры рулона:
— ширина
— толщина пленки
— вес одного рулона (или длину, если рассчитывает вес)
— кол-во рулонов
Далее пользователь выбирает дополнительные параметры, такие как цвет пленки, или различные добавки и заполняет форму обратной связи, чтобы сделать заказ
2.4. Информация о компании
Статический блок, который предоставляет пользователю информацию о компании, с акцентом на том, что компания является производителем ПВД — пленки
2.5. Блок «Все для упаковки»
Информация в этом блоке рассказывает пользователю, что компания занимается не только производством и продажей ПВД-пленки, но и продажей других товаров для упаковки. Ссылки в этом блоке ведут на существующий Интернет-магазин, где можно приобрести эти товары
2.6. Блок с преимуществами
Статический блок с информацией чем компания Заказчика отличается от конкурентов, и почему за ПВД-пленкой стоит обратиться именно к Заказчику.
2.7. Блок «Вопрос-ответ»
В данном блоке приведены ответы на основные вопросы, которые могут возникнуть у пользователей сайта
2.8. Информация о партнерах клиента и отзывах
В данном блоке приведена информация о партнерах Заказчика, и блок с отзывами клиентов
2.9. Блок «Контакты»
В блоке «Контакты» приведена информация о времени работы компании, адресе, а также приведены контактные данные для заказа продукции
2.10. Форма обратной связи
В конце страницы размещена форма обратной связи, где пользователь может задать все интересующие его вопросы.
3. Описание основных блоков страницы с детальной информацией о пленке
3.1. В верхней части приведен блок с информацией о пленке
В этом блоке размещена следующая информация:
— фото продукции
— описание продукции
— 3 основных характеристики
— минимальная стоимость за кг
— кнопка «Получить расчет»
При нажатии на кнопку «Получить расчет» осуществляется скролл к блоку «Узнайте стоимость». Функционал этого блока аналогичен функционалу блока вовлечения на главной странице (см. п. 2.3), за исключением первого шага с выбором вида пленки. На странице с детальной информацией этот шаг пропущен
3.2. Блок «Применение»
Текстово-графический блок, в котором представлена информация о применении данного вида пленки
3.3. Сквозные блоки
Далее на сайте приведены блоки, которые были описаны в пп 2.4. — 2.10
4. Этап верстки и программирования
По разработанному макет-дизайну осуществили адаптивную верстку. Привязали разработанную верстку к проверенной, надежной платформе 1С-Битрикс. Для удобства администрирования реализовали возможность изменения контента — названия видов пленки, фото, описания, сбор заявок с форм в административную часть сайта и на почту администратору сайта
5. Выводы
В результате получили небольшой адаптивный сайт, который рассказывает о компании-производителе ПВД-пленки, и предлагает заказать данную продукцию на этом сайте.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
