О клиенте
Компания МАНГ - крупный производитель бетона и вибропрессованных изделий в Самарской области. В ассортименте компании присутствует товарный бетон, тротуарная плитка, стеновые блоки, бортовой камень и другие материалы для строительства. Компания работает как с розничными клиентами, так и с федеральными застройщиками.
Задача
Руководство компании приняло решение расширить свой ассортимент различными изделиями, в следствии чего возникла задача его представления потенциальным покупателям.
Новый проект должен был решить следующие задачи:
Для решения поставленных задач нами было предложена разработка современного интернет-каталога на CMS Bitrix
UX/UI
Работа по разработке проекта началась с изучения и анализа сферы деятельности клиента и создания детализированного прототипа всех страниц будущего проекта.
Для разработки визуальной концепции использовали официальные графические материалы предоставленные заказчиком, такие как логотип, брендбук и фирменная цветовая стилистика. Всего было подготовлено более 100 макетов с учетом адаптивности.
Главная
Одним из основных направлений производства является именно тротуарная плитка, поэтому основной акцент на главной странице сделан именно на этот тип товара. Пользователю предоставлена возможность в рамках одного блока увидеть коллекции, цвета и другие характеристики товара.
Сам блок призван быстро перевести пользователя на страницу каталога, так как основные конверсионные элементы проекта находятся именно там.
Также на странице расположены другие блоки позволяющие пользователю перейти в необходимый раздел, такие как: другие разделы каталога, завершенные проекты, новости и статьи, и другое.
Сама структура страницы сделана таким образом, чтобы при попадании на сайт каждый пользователь мог найти интересный для него раздел и продолжил просмотр. Такие аспекты важно учитывать с точки зрения поискового продвижения, так как поведенческие факторы оказывают сильное влияние на ранжирование сайта в поисковых системах.
Каталог
Страницы каталога были разработаны в 2 вариантах: для тротуарной плитки и прочих разделов каталога. Страницы каталога плитки представлены в виде карточек товара с фотографией, мини-описанием, индикацией наличия и возможными комбинациями ключевых характеристик товара, таких как цвета, размеры и толщина.
Данные комбинации были реализованы с помощью функции CMS Bitrix «Торговые предложения» - благодаря этому решению каждая комбинация имеет свою цену, наличие, вес и прочие индивидуальные особенности.
Также прямо из каталога покупатель может оставить заявку на товар, добавить данный товар в избранное или задать уточняющий вопрос через всплывающее окно с формой обратной связи.
Постарались учесть все возможные пути клиента с точки зрения взаимодействия с карточкой товара, чтобы с наибольшей вероятностью было совершено конверсионное действие.
Сама же страница каталога имеет все необходимые элементы для быстро поиска необходимого товара.
Пользователям доступна сортировка товаров, их фильтрация по заполненным свойствам и характеристикам, а также изменение внешнего вида карточек товара на горизонтальный или вертикальный.
Карточка товара
Каждый товар на сайте обладает своей уникальной страницей, на которой представлена информация о товаре в максимально широком виде.
Пользователю доступны увеличенное изображение товара с галереей для просмотра нескольких фото, рейтинг товара и аналогичные странице каталога данные, такие как: цена, наличие, комбинации торговых предложений, калькулятор и конверсионные кнопки.
Галерея поддерживает увеличение фотографий для возможности детально рассмотреть товар перед покупкой. Рейтинг товара рассчитывается автоматически исходя из оставленных отзывов.
Ниже находятся блоки с детальным описанием товара, полный перечень характеристик, информация о доставке и оплате и блок отзывов. Все блоки по умолчанию находятся в свернутом состоянии с возможностью раскрытия.
Также, для возможности оценить реальное применение товара, у пользователя есть возможность ознакомится с проектами в которых он использовался, а так как один и тот же товар может быть выполнен в разных цветовых сериях, под просматриваемый товар мы вывели аналогичные варианты из других серий.
Избранное
В силу того, что в данной сфере деятельности достаточно сложные продажи и почти всегда требуется общение с менеджером, руководство компании решило не делать корзину и отправку комплексной заявки, как это принято в рамках работы интернет-каталогов.
Вместо этого был добавлен раздел с избранными товарами, чтобы пользователь всегда мог вернуться к отложенным товарам без необходимости повторного поиска по каталогу. Сама страница выглядит также как и каталог с возможностью сортировки и фильтрации избранных товаров.
Поиск
Сделали возможность поиска необходимой информации не только по каталогу, а также и по дополнительным разделам.
Например, если человек введет часть наименования товара, ему также будет предложено ознакомиться с текстовым контентом с присутствием ключевого слова в тексте или другом элементе. Всего в поиске участвуют 4 инфоблока: каталог товаров, новости, блог и портфолио.
Услуги
Помимо производства и продажи бетона и вибропрессованных изделий компания оказывает смежные услуги, такие как: доставка, укладка, визуализация и другие. Для того, чтобы пользователи могли ознакомиться с оказываемыми компанией услугами мы сделали отдельный раздел с удобной навигацией.
Точно такой же по логике работы раздел мы реализовали и для партнерского раздела, где компания публикует информацию для своих дилеров и партнеров.
Портфолио
Не забыли сделать раздел с проектами компании, в рамках которого пользователь может ознакомиться какие объекты были завершены и какие материалы при этом использовались.
Контентные разделы
Для оповещения пользователей о новостях, новинках и улучшения поисковых позиций были реализованы страницы новостей и блога. Страницы разработаны с возможностью сортировки и фильтрации по тематике.
Поддерживается использование хештегов в записях, а для удобства пользователей контент-менеджер может указать примерное время чтения. Детальная страница позволяет опубликовать любые желаемые материалы для демонстрации.
Для удобства работы с разделами произвели необходимые настройки внутри административной части позволяющие публиковать текстовый контент без HTML верстки: вся разметка автоматически создается без помощи программистов, а итоговый результат выглядит хорошо независимо от объема текста и наличия дополнительных элементов, таких как картинки, списки, таблица и др.
Вопросы и ответы
На данной странице представлен перечень наиболее частых вопросов с возможностью раскрытия. Для удобства редактирования заказчиком, возможность наполнения данной страницы была также вынесена в административную часть.
Адаптивность
В процессе дизайна для всех страниц сайта были отрисованы и согласованы с заказчиком не только десктопные, но и мобильные версии всех имеющихся страниц. Проект поддерживает как мобильный формат просмотра, так и планшетный.
Результат
Итогом данной разработки является современный интернет-каталог с акцентом на графическое представление товара и его использования в реальных проектах. Благодаря разработке на платформе CMS Bitrix заказчик получил возможность самостоятельно заполнять и редактировать содержимое каталога, без привлечения дополнительных затрат и специалистов.
Использование типовых решений в разработке, и отказ от полноценного процесса оформления заказа с корзиной позволил также сократить затраты на проект. В результате работы: