Разработка строительного интернет-магазина DSCenter

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

Центр поставки материалов для дома  «Дёке Саплай Центр» – это уникальный формат магазинов для профессионалов коттеджно-малоэтажного строительства и тех, кто решил воплотить свою мечту построить собственный дом. Вот что они пишут о себе:

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

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

Осенью 2017 года DSC обратились в нашу компанию. Была поставлена задача создать интернет-магазин, который должен:

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

Кроме того, сайт должен иметь функционал:

  • для импорта товаров из учетной системы номенклатуры товаров компании в интернет-магазин;
  • для выгрузки оформленных заявок/обращений в учетную систему номенклатуры товаров;
  • обмена статусами заказов между учетной системой компании и сайтом в автоматическом режиме.

Разработка строительного интернет-магазина

Работы по созданию сайта мы разделили на несколько этапов:

  • Прототипизация на основе опыта предыдущих проектов в схожей тематике
  • Создание дизайна для будущего сайта
  • Разработка клиентской стороны пользовательского интерфейса интернет-магазина.
  • Настройка и интеграция модуля обмена заказами и информации по каталогу между сайтом и учетной системой.
  • Тестирование сайта с помощью фокус-группы и улучшение в соответствии с полученными данными
  • Настройка личного кабинета пользователя и внедрение интеграции с единой платформой для автоматизации маркетинга Mindbox.
  • Выбор сервера и релиз сайта

Подготовка к разработке

До начала работы с компанией DSC, мы успешно завершили несколько проектов по схожей строительной тематике и уже имели некоторую статистику по тому, какие решения работают хорошо, а какие оказались не настолько эффективными.

Внешняя сторона интерфейса

После того, как дизайн и структура сайта были утверждены, мы приступили к разработке. В этом проекте мы использовали Gulp – систему сборки проекта, которая оптимизирует рутинную работу и позволяет автоматизировать многие процессы при разработке.

В частности в этой системе, нами был использован механизм оптимизации (минификации) css и js файлов. В работе применяли препроцессор SASS, что значительно ускоряло разработку проекта и автоматизировало некоторые процессы при кроссбраузерной верстке.

Также для сайта был разработан механизм развёртывание программного обеспечения проекта на development и production серверы с использованием SSH. Что позволило существенно сократить время на выгрузку изменений на сервер с сохранением версий проекта и возможностью быстро восстановить любую из них.

Монитор_1-min.png

На сайте был реализован весь потенциал современных интернет магазинов. Так, пользователь может легко найти интересующий его товар, воспользовавшись поиском:

Поиск-min.png

Или отсортировать позиции в определенной категории по необходимым параметрам:

Поиск по параметрам-min.png


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

Рекомендованные товары-min.png

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

Хиты продаж-min.png

Также на сайте присутствуют такие полезные страницы:

  • Новости компании — необходимый блок для продвижения сайта с помощью контент-маркетинга
  • Страница для профессионалов — где указаны все возможные способы связи с компанией на уровне B2B
  • Страница с вакансиями компании DSC
Новости-min.png


Если у пользователя все же остаются какие-то вопросы по товарам или сайту, то он всегда может воспользоваться формой обратной связи или задавать вопрос менеджеру компании в интегрированный чат jivosite:

Вопросы-min.png

Для удобства покупателей, мы создали страницу, где подробно объясняются все условия по доставке и оплате. Также реализовали интерактивную карту, наглядно показывающую сколько будет стоить доставка до каждого конкретного места в городе Санкт-Петербург и Ленинградской области:

ice_screenshot_20181228-142022-min.png

Внутренняя сторона интерфейса

Ключевым моментом в Backend разработке, была настройка и интеграция модуля обмена заказами Bitrix с учетной системой номенклатуры заказов DCS. На этом этапе, наша задача состояла в том, чтобы работа компании по актуализации информации по товарам и остаткам на сайте была минимальна. 

ice_screenshot_20181220-124827-min.png  

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

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

Тестирование сайта на фокус-группе

После того, как все основные функции сайта были готовы, мы решили протестировать интернет-магазин на реальных пользователях. Сайт был запущен в бета-тестовой версии:

Бета версия.jpg


Мы отслеживали различные параметры поведения пользователей:

  • Проблемные места на страницах
  • Реакцию на различные блоки
  • Успешные и неудачные решения в дизайне
  • Пользовательский путь до товара
  • Баги и ошибки

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

Внедрение личных кабинетов

На сайте мы реализовали систему личных кабинетов пользователя.

Вход в аккаунт-min.png

Любой покупатель может создать на сайте себе личный аккаунт. Там сохраняется вся история заказов, а в настройках кабинета можно указать данные по адресам доставки, чтобы далее при заказе выбирать их одним кликом:

Монитор_личныйкабинет_1-min.png

Подготовка к выпуску и релиз сайта

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

  • Размещение в РФ
  • Uptime >99%
  • Гибкие настройки для быстрого изменения конфигурации сервера — это необходимо в случае внезапных изменений в нагрузке сервера
  • Выделенный IP-адрес
  • Удобная панель администрирования
  • Быстрая реакция на запросы от техподдержки

Выбор пал на несколько лидирующих площадок и уже из них мы подобрали самый оптимальный вариант в соотношении цена/качество. Далее мы выгрузили сайт на сервер и выпустили его в релиз.

В настоящее время сайт полностью функционирует и находится на поддержке.


Заинтересовал кейс? Хотите также? Оставьте заявку на консультацию и наш менеджер свяжется с вами!

Узнать

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!