Разработка сайта для продажи ПВД-пленки
О проекте
Задача
Что мы сделали
Выбор архитектуры сайта
Продаваемый товар – ПВД-пленка, у которой есть несколько разновидностей: термоусадочная, техническая, парниковая, цветная, перфорированная. А также мешки и пакеты из ПВД-пленки. Классический Интернет-магазин с корзиной и процедурой оформления заказа в этом случае будет излишен, к тому же онлайн-оплата на сайте не требуется. Поэтому мы остановились на формате двухстраничного сайта, на главной странице которого приводится общая информация о видах пленки и компании производителе. А на странице с конкретным видом пленки приводится детальная информация об этой продукции.
Основное конверсионное действие – отправка формы для заказа пленки.
Основной инструмент вовлечения – калькулятор пленки, который позволяет рассчитать размеры ролика с пленкой и оставить заявку на заказ пленки по индивидуальным размерам.
Составление портрета целевой аудитории
Мы составили портрет целевой аудитории, изучили сайты конкурентов и составили сценарий взаимодействия с нашим сайтом.
- Определили основные блоки и конверсионные элементы:
- верхний баннер
- калькулятор
- форма заказа обратного звонка
- форма остались вопросы
Разработка прототипа
На основании информационной архитектуры разработали прототип сайта и согласовали его с Заказчиком. В прототипе основные сценарии (например, калькулятор, навигацию по странице) сделали кликабельными.
Разработка дизайна
У Заказчика уже есть Интернет-магазин по продаже продукции для упаковки, поэтому мы решили использовать дизайн-концепцию существующего Интернет-магазина. При этом немного модифицировать ее, добавив акцентный цвет и немного скруглив края. Таким образом конверсионные блоки стали заметнее, а атмосфера стала чуть менее строгая.
Описание основных блоков главной страницы:
- Блок с позиционированием
- Блок «Каталог продукции»
- Блок вовлечения
- На третьем экране пользователь выбирает что именно нужно рассчитать – длину или вес рулона, и указывает требуемые параметры рулона:
- ширина
- толщина пленки
- вес одного рулона (или длину, если рассчитывает вес)
- кол-во рулонов
- Информация о компании
- Блок «Все для упаковки
- Блок с преимуществами
- Блок «Вопрос-ответ»
- Информация о партнерах клиента и отзывах
- Блок «Контакты»
- Форма обратной связи
Описание основных блоков страницы с детальной информацией о пленке
- В верхней части приведен блок с информацией о пленке
- В этом блоке размещена следующая информация:
- фото продукции
- описание продукции
- 3 основных характеристики
- минимальная стоимость за кг
- кнопка «Получить расчет»
При нажатии на кнопку «Получить расчет» осуществляется скролл к блоку «Узнайте стоимость». Функционал этого блока аналогичен функционалу блока вовлечения на главной странице (см. п. 4.3), за исключением первого шага с выбором вида пленки. На странице с детальной информацией этот шаг пропущен.
- Блок «Применение»
Текстово-графический блок, в котором представлена информация о применении данного вида пленки.
- Сквозные блоки
Далее на сайте приведены блоки с информацией о компании, преимуществах сотрудничества, информацией о партнерах и контактными данными, которые были описаны выше.
Этап верстки и программирования
По разработанному макет-дизайну осуществили адаптивную верстку. Привязали разработанную верстку к проверенной, надежной платформе 1С-Битрикс. Для удобства администрирования реализовали возможность изменения контента – названия видов пленки, фото, описания, сбор заявок с форм в административную часть сайта и на почту администратору сайта.
Итоги проекта
В результате получили небольшой адаптивный сайт, который рассказывает о компании-производителе ПВД-пленки и предлагает заказать данную продукцию на этом сайте.