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