Дверь примерить не желаете?
Стираем грань между онлайн и оффлайн магазином
Дверь примерить не желаете?
Стираем грань между онлайн и оффлайн магазином
Сейчас у покупателей сформирована модель поведения ROPO (research online, purchase offline) — исследуй онлайн, покупай оффлайн. Основная проблема продавцов — продать именно онлайн. Людям важно посмотреть товар воочию, потрогать, рассмотреть цвет, текстуру, фактуру и прочие вещи, которые в обычном интернет-магазине разглядеть сложно.
Для компании «Оптовый двор», которая продает двери, был нужен интернет-магазин — не обычный, а который подтолкнет пользователя к покупке без визита в шоу рум :)
На территории Казахстана «Оптовый двор» является официальным и эксклюзивным представителем топовых производителей дверей. Хоть название «Оптовый двор» и говорит об опте, на деле же целевая аудитория намного шире: от розничных магазинов до затейников ремонта в своей квартире.
Для компании «Оптовый двор», которая продает двери, был нужен интернет-магазин — не обычный, а который подтолкнет пользователя к покупке без визита в шоу рум :)
На территории Казахстана «Оптовый двор» является официальным и эксклюзивным представителем топовых производителей дверей. Хоть название «Оптовый двор» и говорит об опте, на деле же целевая аудитория намного шире: от розничных магазинов до затейников ремонта в своей квартире.
Аудитории разные, их потребности тоже будут различаться. Сайт должен все это учесть.
Дизайн мы начали с того, что освежили логотип и фирменные цвета заказчика, сделав их более современными.
Дизайн мы начали с того, что освежили логотип и фирменные цвета заказчика, сделав их более современными.
Главная визуальная фишка, которую мы предложили для сайта, — промоблок с открывающимися дверями на главной странице.
В промоблоке показаны несколько дверей, которые можно разглядеть со всех сторон, узнать про производителя, модель и цену. А если любовь с дверью случилась с первого взгляда, сразу перейти в карточку товара в каталоге. Всю эту красоту заказчик сможет обновлять через административную панель сайта сам, без дизайнера и программиста: нужно просто задать текст описания и выбрать товар.
Дверь в промо-блоке открывается благодаря CSS-анимации: ключевые кадры — в нашем случае это изображения двери с разных ракурсов — автоматически воспроизводятся и создают эффект аналогичный 3D.
Принципиально не стали использовать 3D-модели или видео. Такие штуки слишком тяжелые, тормозят при загрузке, да и PageSpeed их очень не любит из-за больших объемов данных.
Леонид
разработчик
Давайте пройдемся с вами по сайту, как пользователи, и посмотрим, удалось ли нам убедить вас купить дверь онлайн :) Итак, вам нужна дверь.
В карточке товара вы едва ли заметите разницу между онлайн и оффлайн магазинами — вы можете рассмотреть и фактуру двери, и рисунки на стекле. Разве что понюхать дверь нельзя. Зато можно не только изучить мелкие детали и текстуры двери, но и «примерить» ее.
Мы разработали два варианта «примерки» двери: один (редактор) — проще и быстрее, второй (в интерьере) — интереснее и подходит для детального изучения вопроса интерьерного дизайна.
В редакторе можно выбрать цвет, модель и размер двери, посмотреть демонстрационное видео, и также выбрать цвет стены, чтобы оценить, как дверь будет сочетаться с ней.
Мы разработали два варианта «примерки» двери: один (редактор) — проще и быстрее, второй (в интерьере) — интереснее и подходит для детального изучения вопроса интерьерного дизайна.
В редакторе можно выбрать цвет, модель и размер двери, посмотреть демонстрационное видео, и также выбрать цвет стены, чтобы оценить, как дверь будет сочетаться с ней.
Если этого недостаточно, чтобы принять решение о покупке, и вы все еще подумываете съездить в магазин — не спешите. Налейте чайку и попробуйте примерить дверь «в интерьере». Тут можно посмотреть, как дверь будет смотреться в интерьере вашей комнаты, кабинета и любого другого помещения!
По сути мы сделали конфигуратор, который вполне может заменить при примерке двери программу для работы с архитектурными проектами.
Просто сделайте фотографию стены, где будет установлена дверь, загрузите в конфигуратор и подгоните размеры и положение двери. Нет фото? Не беда! Выберите один из нескольких готовых вариантов интерьера, предложенных в конфигураторе.
По сути мы сделали конфигуратор, который вполне может заменить при примерке двери программу для работы с архитектурными проектами.
Просто сделайте фотографию стены, где будет установлена дверь, загрузите в конфигуратор и подгоните размеры и положение двери. Нет фото? Не беда! Выберите один из нескольких готовых вариантов интерьера, предложенных в конфигураторе.
Ну вот :( Столько всего понавыбирали и поняли, что цвет двери не вписывается в интерьер. Не нужно начинать заново или переходить на другую страницу — меняйте на месте: внешний вид двери, ее цвет и цвет стекла.
Теперь все идеально? Сохраните файл и отправьте себе на почту (если вы сами себе дизайнер) или клиенту (если вы самый настоящий дизайнер, которому за это платят). Или просто отправьте ссылку: каждый раз, когда вы изменяете параметр в конфигураторе, формируется новый URL. Так вы сможете передать ссылку на товар другому человеку в том виде, в котором вы его оставили у себя на странице, и все выбранные опции сохранятся.
Все равно не уверены, какая дверь вживую будет лучше? У заказчика есть уникальная услуга — «Примерка двери» оффлайн. И это бесплатно! Добавляете «примерку» в заказ, вам привозят все двери из заказа. Вы примеряете их (да хоть просто к своей стене приложите), делаете кучу фото, выставляете на своей страничке с опросом «какая лучше», оплачиваете только ту, что победит. Или все то же, но без опроса :)
Так, так так… Все еще есть сомнения насчет мелочей? Нельзя же все предусмотреть в интернет-магазине. Еще как можно! На детальной странице товара есть всё:
Все равно не уверены, какая дверь вживую будет лучше? У заказчика есть уникальная услуга — «Примерка двери» оффлайн. И это бесплатно! Добавляете «примерку» в заказ, вам привозят все двери из заказа. Вы примеряете их (да хоть просто к своей стене приложите), делаете кучу фото, выставляете на своей страничке с опросом «какая лучше», оплачиваете только ту, что победит. Или все то же, но без опроса :)
Так, так так… Все еще есть сомнения насчет мелочей? Нельзя же все предусмотреть в интернет-магазине. Еще как можно! На детальной странице товара есть всё:
- описание материала полотна двери,
- детальная дополнительная информация по товару (материал, толщина полотна, стекло и пр.),
- видео-обзор,
- рекомендации по самостоятельному монтажу,
- а мельчайшие детали товара показаны на изображениях крупным планом.
Бывалый затейник ремонта знает, что «купить дверь» — это несколько операций: найти полотно, ручки, добор, наличник, порожек и прочие штуки, без которых дверь остается просто доской. Если нет времени и желания разбираться в тонкостях дверных дел, есть простой вариант — воспользоваться предлагаемыми к двери комплектами.
К двери можно купить базовый комплект или быстро ответить на 4 вопроса, чтобы подобрать его индивидуально.
К двери можно купить базовый комплект или быстро ответить на 4 вопроса, чтобы подобрать его индивидуально.
Почти вся информация в каталоге берется из 1С заказчика.
Во-первых, 1С отдает нам XML-файл с товарами и скидками. Но для 1С каждая разновидность двери — отдельный товар. А пользователям удобнее, когда товары сгруппированы в торговые предложения. Когда карточка товара одна, но в ней можно переключить цвет, выбрать внешний вид и какое стекло будет у двери. Поэтому мы группируем похожие товары, полученные из 1С, в торговые предложения на стороне сайта при помощи специального скрипта.
Во-вторых из 1С мы получаем цены и остатки. Они изменяются в зависимости от региона пользователя.
Определились с дверьми и комплектами к ним? Пора в корзину — там еще несколько приятных бонусов:
- Товары выводятся не в порядке добавления в корзину, а разделены секциями, чтобы было четко видно: вот дверь и вот аксессуары к ней.
- Прямо в корзине можно добавить к заказу услугу монтажа дверей. Расчет стоимости монтажа будет зависеть от количества дверей у вас в корзине.
- Тут же можно заказать услугу примерки двери оффлайн.
Заказы, на какой бы стадии покупки они ни были, отображаются в личном кабинете покупателя с указанием статуса. Заказ можно повторить или, если что-то у вас внезапно поменялось, отменить.
С проектом получилась очень интересная история. По каждому этапу работали продуктивно и шли в хорошем темпе, планировали море функционала делать сразу же и запускать проект полностью «вооруженным». Но посреди работ по верстке ударил коронавирус и остановил проект на несколько месяцев.
Когда волна прошла, мы вернулись к работе, но время уже было упущено. Чтобы решить проблему, позвали на помощь SCRUM. Быстренько переработали план и разделили проект на 3 релиза: онлайн витрина, e-commerce и прочий менее приоритетный функционал.
Когда волна прошла, мы вернулись к работе, но время уже было упущено. Чтобы решить проблему, позвали на помощь SCRUM. Быстренько переработали план и разделили проект на 3 релиза: онлайн витрина, e-commerce и прочий менее приоритетный функционал.
Антон
руководитель проекта
Готовый результат
