Комментарии
Стираем грань между онлайн и оффлайн магазином
Результат Процесс
Дверь примерить не желаете?
Сибирикс
Дверь примерить не желаете?
Стираем грань между онлайн и оффлайн магазином
Сейчас у покупателей сформирована модель поведения ROPO (research online, purchase offline) — исследуй онлайн, покупай оффлайн. Основная проблема продавцов — продать именно онлайн. Людям важно посмотреть товар воочию, потрогать, рассмотреть цвет, текстуру, фактуру и прочие вещи, которые в обычном интернет-магазине разглядеть сложно.

Для компании «Оптовый двор», которая продает двери, был нужен интернет-магазин — не обычный, а который подтолкнет пользователя к покупке без визита в шоу рум :)

На территории Казахстана «Оптовый двор» является официальным и эксклюзивным представителем топовых производителей дверей. Хоть название «Оптовый двор» и говорит об опте, на деле же целевая аудитория намного шире: от розничных магазинов до затейников ремонта в своей квартире.
оптовый двор
Аудитории разные, их потребности тоже будут различаться. Сайт должен все это учесть.

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

Дверь в промо-блоке открывается благодаря CSS-анимации: ключевые кадры — в нашем случае это изображения двери с разных ракурсов — автоматически воспроизводятся и создают эффект аналогичный 3D.

Принципиально не стали использовать 3D-модели или видео. Такие штуки слишком тяжелые, тормозят при загрузке, да и PageSpeed их очень не любит из-за больших объемов данных.
оптовый двор
Леонид
разработчик
Давайте пройдемся с вами по сайту, как пользователи, и посмотрим, удалось ли нам убедить вас купить дверь онлайн :) Итак, вам нужна дверь.
оптовый двор
оптовый двор
В карточке товара вы едва ли заметите разницу между онлайн и оффлайн магазинами — вы можете рассмотреть и фактуру двери, и рисунки на стекле. Разве что понюхать дверь нельзя. Зато можно не только изучить мелкие детали и текстуры двери, но и «примерить» ее.

Мы разработали два варианта «примерки» двери: один (редактор) — проще и быстрее, второй (в интерьере) — интереснее и подходит для детального изучения вопроса интерьерного дизайна.

В редакторе можно выбрать цвет, модель и размер двери, посмотреть демонстрационное видео, и также выбрать цвет стены, чтобы оценить, как дверь будет сочетаться с ней.
оптовый двор
Если этого недостаточно, чтобы принять решение о покупке, и вы все еще подумываете съездить в магазин — не спешите. Налейте чайку и попробуйте примерить дверь «в интерьере». Тут можно посмотреть, как дверь будет смотреться в интерьере вашей комнаты, кабинета и любого другого помещения!

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

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

Теперь все идеально? Сохраните файл и отправьте себе на почту (если вы сами себе дизайнер) или клиенту (если вы самый настоящий дизайнер, которому за это платят). Или просто отправьте ссылку: каждый раз, когда вы изменяете параметр в конфигураторе, формируется новый URL. Так вы сможете передать ссылку на товар другому человеку в том виде, в котором вы его оставили у себя на странице, и все выбранные опции сохранятся.

Все равно не уверены, какая дверь вживую будет лучше? У заказчика есть уникальная услуга — «Примерка двери» оффлайн. И это бесплатно! Добавляете «примерку» в заказ, вам привозят все двери из заказа. Вы примеряете их (да хоть просто к своей стене приложите), делаете кучу фото, выставляете в инстаграм с опросом «какая лучше», оплачиваете только ту, что победит. Или все то же, но без инстаграма :)

Так, так так… Все еще есть сомнения насчет мелочей? Нельзя же все предусмотреть в интернет-магазине. Еще как можно! На детальной странице товара есть всё:

  • описание материала полотна двери,
  • детальная дополнительная информация по товару (материал, толщина полотна, стекло и пр.),
  • видео-обзор,
  • рекомендации по самостоятельному монтажу,
  • а мельчайшие детали товара показаны на изображениях крупным планом.
оптовый двор
Бывалый затейник ремонта знает, что «купить дверь» — это несколько операций: найти полотно, ручки, добор, наличник, порожек и прочие штуки, без которых дверь остается просто доской. Если нет времени и желания разбираться в тонкостях дверных дел, есть простой вариант — воспользоваться предлагаемыми к двери комплектами.

К двери можно купить базовый комплект или быстро ответить на 4 вопроса, чтобы подобрать его индивидуально.
оптовый двор

Почти вся информация в каталоге берется из 1С заказчика.

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

Во-вторых из 1С мы получаем цены и остатки. Они изменяются в зависимости от региона пользователя.

Определились с дверьми и комплектами к ним? Пора в корзину — там еще несколько приятных бонусов:

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

  2. Прямо в корзине можно добавить к заказу услугу монтажа дверей. Расчет стоимости монтажа будет зависеть от количества дверей у вас в корзине.

  3. Тут же можно заказать услугу примерки двери оффлайн.
оптовый двор
Заказы, на какой бы стадии покупки они ни были, отображаются в личном кабинете покупателя с указанием статуса. Заказ можно повторить или, если что-то у вас внезапно поменялось, отменить.
оптовый двор
С проектом получилась очень интересная история. По каждому этапу работали продуктивно и шли в хорошем темпе, планировали море функционала делать сразу же и запускать проект полностью «вооруженным». Но посреди работ по верстке ударил коронавирус и остановил проект на несколько месяцев.

Когда волна прошла, мы вернулись к работе, но время уже было упущено. Чтобы решить проблему, позвали на помощь SCRUM. Быстренько переработали план и разделили проект на 3 релиза: онлайн витрина, e-commerce и прочий менее приоритетный функционал.
оптовый двор
Антон
руководитель проекта

Готовый результат