Разработка сайта-каталога для ведущего производителя малярного инструмента

1. Вводная задача от заказчика, проблематика, цели

Главным запросом клиента было создать эффективный сайт-каталог для B2B-продаж, который бы наглядно показывал все преимущества продукции бренда «АКОР» и позволял пользователям легко ориентироваться в товарном разнообразии.

Задачи:

• Разработать функциональный каталог, который будет максимально гибко управляться через админ-панель.
• Разработать современный дизайн с акцентом на контент в стиле баухаус, который перекликается с цветами основных линеек кистей — флагманского продукта компании.
• Внедрить инструмент «Навигатор», который поможет покупателям подробнее знакомиться с продуктами и услугами компании за счет разного контента.
• Настроить интеграцию с сервисом добавления и создания квизов (интерактивных опросников, викторин, тестов для привлечения внимания пользователей).
• Разработать страницу «Где купить» с интерактивной картой офлайн-точек дистрибуции товаров и ссылками на онлайн-магазины.
• Создать карточку товара, которая отражала бы товарную линейку с подробным описанием и визуализацией всех нюансов продукции.
• Сделать сайт интуитивно понятным и удобным для опытных и профессионалов, включая представителей старшего поколения.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

1. Дизайн

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

• При разработке визуала мы руководствовались двумя ключевыми требованиями:
• понятный и удобный интерфейс;
• крупный и яркий контент, представляющий «лицо» сайта, — товары.

Флагманская линейка продуктов клиента — кисти с ручками разных цветов: синий, красный, желтый, зеленый, черный, оранжевый. Эти цвета не только указвают на назначение кисти, но и перекликаются со стилем баухаус — направление в архитектуре и дизайне интерьеров, известное своим минимализмом, простой геометрией и использованием основных цветов: черного, белого, и акцентных — синего, красного и желтого. Мы постарались мягко добавить в дизайн сайта отсылку к этому стилю.

2. Каталог

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

3. Навигатор

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

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

4. Интеграция с сервисом квизов

Настроили интеграцию с сервисом квизов — с ним можно удобно и быстро создавать квизы с вопросами для подбора товаров по требованиям и добавлять созданные квизы на сайт в несколько кликов.

5. Страница «Где купить»

Разработали навигационную страницу с данными о том, где можно приобрести продукцию компании.

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

Поскольку товары бренда представлены пока не во всех населенных пунктах, добавили подраздел, в котором собраны ссылки на онлайн-площадки, где можно их купить.

6. Карточка товара

Мы разработали карточку товара для представления товарной линейки, в которую будут входить несколько SKU (разновидностей) одной линейки.

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

Внедрили удобное разделение на табы, каждый их которых отражает определенные данные:

• «Отзывы» — здесь собраны все реальные отзывы покупателей с разных площадок, где продается товар. В каждом отзыве указана ссылка на источник, чтобы можно было перейти на саму площадку;
• «Еще понадобится» — подборка товаров, которые могут пригодиться для совместного использования;
• «Навигатор» — подборка элементов навигатора, которые собраны и подходят именно к этой товарной линейке;
• «Рекомендации» — сгруппированные по видам рекомендации по применению продукта. Цветной шкалой обозначается степень пригодности: от непригодного до высокопригодного. За счет такой наглядной таблицы со шкалой можно легко и быстро понять, насколько продукт подходит под нужды и запросы пользователя;
• «Особенности» — отображены главные плюсы товара и важные особенности товарной линейки;
• «Характеристики» — сводная таблица, в которой есть полная информация о каждом SKU в линейке. Таблица удобна для сравнения характеристик внутри одной линейки.
• «Заявка из карточки» — клиент может сделать оптовую заявку непосредственно в компании Акор прямо из карточки товара, заполнив форму.

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

3. Результаты сотрудничества

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

Каждый посетитель сайта сможет легко подобрать продукт под свой запрос. Максимально полная информация о товарах позволяет свести к минимуму необходимость пользователя обращаться в компанию за обратной связью.

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

Виктория Бешеля

менеджер проектов, Digital Clouds

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