1. Описание компании
Заказчик – компания, которая занимается производством товаров для упаковки продукции, в том числе пленок высокого давления (ПВД-пленка).
2. Задача, с которой обратился заказчик
У Заказчика уже имеется Интернет-магазин по продаже товаров для упаковки. Нужно создать сайт, направленный на продажу конкретного сегмента продукции – ПВД-пленки. При этом необходимо сделать акцент на том, что компания Заказчика является производителем этой пленки.
3. Этапы работы над проектом
3.1. Выбор архитектуры сайта
Продаваемый товар – ПВД-пленка, у которой есть несколько разновидностей: термоусадочная, техническая, парниковая, цветная, перфорированная. А также мешки и пакеты из ПВД-пленки. Классический Интернет-магазин с корзиной и процедурой оформления заказа в этом случае будет излишен, к тому же онлайн-оплата на сайте не требуется. Поэтому мы остановились на формате двухстраничного сайта, на главной странице которого приводится общая информация о видах пленки и компании производителе. А на странице с конкретным видом пленки приводится детальная информация об этой продукции.
Основное конверсионное действие – отправка формы для заказа пленки.
Основной инструмент вовлечения – калькулятор пленки, который позволяет рассчитать размеры ролика с пленкой и оставить заявку на заказ пленки по индивидуальным размерам.
3.2. Составление портрета целевой аудитории
Мы составили портрет целевой аудитории
Изучили сайты конкурентов и составили сценарий взаимодействия с нашим сайтом. Определили основные блоки и конверсионные элементы:
- верхний баннер
- калькулятор
- форма заказа обратного звонка
- форма остались вопросы
3.3. Разработка прототипа
На основании информационной архитектуры разработали прототип сайта и согласовали его с Заказчиком. В прототипе основные сценарии (например, калькулятор, навигацию по странице) сделали кликабельными
3.4. Разработка дизайна
У Заказчика уже есть Интернет-магазин по продаже продукции для упаковки, поэтому мы решили использовать дизайн-концепцию существующего Интернет-магазина. При этом немного модифицировать ее, добавив акцентный цвет и немного скруглив края. Таким образом конверсионные блоки стали заметнее, а атмосфера стала чуть менее строгая
4. Описание основных блоков главной страницы:
4.1. Блок с позиционированием
4.2. Блок «Каталог продукции»
4.3. Блок вовлечения
На первом экране происходит выбор типа пленки. На втором экране выбор параметров пленки – вид продукции и ее сорт.
На третьем экране пользователь выбирает что именно нужно рассчитать – длину или вес рулона, и указывает требуемые параметры рулона:
- ширина
- толщина пленки
- вес одного рулона (или длину, если рассчитывает вес)
- кол-во рулонов
Далее пользователь выбирает дополнительные параметры, такие как цвет пленки, или различные добавки и заполняет форму обратной связи, чтобы сделать заказ
4.4. Информация о компании
Статический блок, который предоставляет пользователю информацию о компании, с акцентом на том, что компания является производителем ПВД – пленки
4.5. Блок «Все для упаковки»
Информация в этом блоке рассказывает пользователю, что компания занимается не только производством и продажей ПВД-пленки, но и продажей других товаров для упаковки. Ссылки в этом блоке ведут на существующий Интернет-магазин, где можно приобрести эти товары
4.6. Блок с преимуществами
Статический блок с информацией чем компания Заказчика отличается от конкурентов, и почему за ПВД-пленкой стоит обратиться именно к Заказчику
4.7. Блок «Вопрос-ответ»
4.8. Информация о партнерах клиента и отзывах
4.9. Блок «Контакты»
4.10. Форма обратной связи
5. Описание основных блоков страницы с детальной информацией о пленке
5.1. В верхней части приведен блок с информацией о пленке
В этом блоке размещена следующая информация:
- фото продукции
- описание продукции
- 3 основных характеристики
- минимальная стоимость за кг
- кнопка «Получить расчет»
При нажатии на кнопку «Получить расчет» осуществляется скролл к блоку «Узнайте стоимость». Функционал этого блока аналогичен функционалу блока вовлечения на главной странице (см. п. 4.3), за исключением первого шага с выбором вида пленки. На странице с детальной информацией этот шаг пропущен
5.2. Блок «Применение»
5.3. Сквозные блоки
Далее на сайте приведены блоки, которые были описаны в пп 4.4. – 4.10
6. Этап верстки и программирования
По разработанному макет-дизайну осуществили адаптивную верстку. Привязали разработанную верстку к проверенной, надежной платформе 1С-Битрикс. Для удобства администрирования реализовали возможность изменения контента – названия видов пленки, фото, описания, сбор заявок с форм в административную часть сайта и на почту администратору сайта
7. Выводы
В результате получили небольшой адаптивный сайт, который рассказывает о компании-производителе ПВД-пленки и предлагает заказать данную продукцию на этом сайте.