От потопа — в Ковчег!
Интернет-магазин сантехники и оборудования, максимально интегрированный с 1С
«Ковчег» — центр сантехники в Тюмени. У клиента два магазина и большие планы на выход за пределы своей области, поскольку качественная и стильная сантехника, которую можно выбрать и купить на сайте, — тот ещё квест для покупателя.
Интернет-магазины ближайших конкурентов вызывают апатию и желание потратить несколько литров бензина для поездки в точку продаж офлайн: настолько там всё плохо. Нашей задачей стала разработка функционального интернет-магазина сантехники и оборудования, с которым заказчик впоследствии сможет выйти на федеральный рынок.
Интернет-магазины ближайших конкурентов вызывают апатию и желание потратить несколько литров бензина для поездки в точку продаж офлайн: настолько там всё плохо. Нашей задачей стала разработка функционального интернет-магазина сантехники и оборудования, с которым заказчик впоследствии сможет выйти на федеральный рынок.
Задачи проекта
Помимо классических задач по обновлению визуального облика сайта в соответствии с трендами дизайна, четкого юзабилити и адаптивности, у заказчика к разработке проекта был ряд специфических требований:
1
Учесть ценовой сегмент при разработке дизайна.
2
Предложить визуальные фишки, которые можно использовать на различных страницах сайта для привлечения покупателей.
3
Реализовать автоматическую интеграцию сайта с 1С (все данные о товарах и заказах).
Аналитика
Среди целевой аудитории мы выделили три ключевых группы:
Анализируя целевых персон, конкурентную среду и старый сайт заказчика, мы выявили несколько проблем, которые нам предстояло решить на проекте.
- Семьи с достатком, желающие оборудовать ванную своей мечты. Они не экономят на материалах и знают, чего хотят. Чаще всего, даже знают, что желаемое придётся подождать пару месяцев. Не сильны в технических характеристиках и с радостью воспользуются консультацией специалиста.
- Мелкооптовые покупатели и дилеры — владеют точками продаж с небольшим оборотом, поэтому не могут сотрудничать с производителями напрямую (неспособны обеспечить нужный объём сбыта). Хотят особых условий и чтобы можно было не ехать в торговую точку «Ковчега», а заказать нужные позиции через интернет-магазин.
- Проектировщики — выбирают товары, исходя из бюджета своих проектов, хотят быть в курсе последних новинок.
Анализируя целевых персон, конкурентную среду и старый сайт заказчика, мы выявили несколько проблем, которые нам предстояло решить на проекте.
Проблема 1. Множество разрозненных свойств у товаров
Это вам не банальные цвет-материал-размеры: у ванн десяток своих параметров и своя специфика, у душевых кабин, полотенцесушителей или мебели для ванной — всё по-другому. Есть базовые, а есть технические характеристики, понятные специалисту и не очень понятные обычному покупателю. И всё это должно понятно умещаться на детальной странице товара, чтобы не порождать хаос и панику.
Решение: ключевые характеристики рядом с фото товара. Полный список — на вкладке ниже. На двух других вкладках условия доставки и возврата.
Это вам не банальные цвет-материал-размеры: у ванн десяток своих параметров и своя специфика, у душевых кабин, полотенцесушителей или мебели для ванной — всё по-другому. Есть базовые, а есть технические характеристики, понятные специалисту и не очень понятные обычному покупателю. И всё это должно понятно умещаться на детальной странице товара, чтобы не порождать хаос и панику.
Решение: ключевые характеристики рядом с фото товара. Полный список — на вкладке ниже. На двух других вкладках условия доставки и возврата.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild3039-3736-4137-a433-653232626565__-__empty__photo.png)
Проблема 2. Множество свойств у товаров (опять)
Та же проблема, только вид сбоку: контент-менеджеру вбивать все эти специфичные критерии вручную для каждого товара не хватит жизни. Поэтому нужна шустрая интеграция с «1С: Управление торговлей», чтобы все характеристики товара импортировались в карточку автоматически.
Заказчик сразу понимал, почему и зачем ему сайт на Битриксе, и очень надеялся на то, что впоследствии сможет легко его обслуживать за счет разнообразия штатных решений системы. Но не все штатные решения подходят под задачи проекта — в процессе мы дописали несколько кастомных, чтобы всё работало так, как задумывалось. Благодаря вовлеченности заказчика в процесс интеграции, все прошло быстро и гладко: заказчик с готовностью вникал в технические детали, не давал дремать 1С-никам и вообще не допускал никаких проволочек.
Та же проблема, только вид сбоку: контент-менеджеру вбивать все эти специфичные критерии вручную для каждого товара не хватит жизни. Поэтому нужна шустрая интеграция с «1С: Управление торговлей», чтобы все характеристики товара импортировались в карточку автоматически.
Заказчик сразу понимал, почему и зачем ему сайт на Битриксе, и очень надеялся на то, что впоследствии сможет легко его обслуживать за счет разнообразия штатных решений системы. Но не все штатные решения подходят под задачи проекта — в процессе мы дописали несколько кастомных, чтобы всё работало так, как задумывалось. Благодаря вовлеченности заказчика в процесс интеграции, все прошло быстро и гладко: заказчик с готовностью вникал в технические детали, не давал дремать 1С-никам и вообще не допускал никаких проволочек.
Проблема 3. Сезонность спроса
Зависит от строительного сезона — зимой спрос ниже, летом выше. Но для интернет-магазина такие колебания довольно критичны. Чтобы заказчик мог подогревать интерес покупателей к конкретным категориям товара круглогодично, мы предложили множество вариантов, как визуально привлечь внимание к акционным товарам. Карточки с ними можно выводить внутри категории каталога, на странице поиска и на типовых текстовых. Плюсом есть несколько шаблонов для классных баннеров, мимо которых сложно пройти.
Зависит от строительного сезона — зимой спрос ниже, летом выше. Но для интернет-магазина такие колебания довольно критичны. Чтобы заказчик мог подогревать интерес покупателей к конкретным категориям товара круглогодично, мы предложили множество вариантов, как визуально привлечь внимание к акционным товарам. Карточки с ними можно выводить внутри категории каталога, на странице поиска и на типовых текстовых. Плюсом есть несколько шаблонов для классных баннеров, мимо которых сложно пройти.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6264-3735-4336-b466-343066623366__-__empty___2.png)
Проблема 4. Критерии выбора покупателей
Казалось бы, если ванна стоит ползарплаты среднестатистического менеджера, цена должна иметь определяющее значение. Да, но нет: сначала всё-таки внешний вид (подбирается-то она под какой-никакой дизайн-проект), следом — технические характеристики (банально: войдёт ли по размерам, с какой стороны слив, угловая или нет и так далее). И только после цена.
Мы учли это в каталоге: в карточках крупные фото товаров, сразу указываются размеры и производитель, крупно показана цена и есть кнопка «купить».
Казалось бы, если ванна стоит ползарплаты среднестатистического менеджера, цена должна иметь определяющее значение. Да, но нет: сначала всё-таки внешний вид (подбирается-то она под какой-никакой дизайн-проект), следом — технические характеристики (банально: войдёт ли по размерам, с какой стороны слив, угловая или нет и так далее). И только после цена.
Мы учли это в каталоге: в карточках крупные фото товаров, сразу указываются размеры и производитель, крупно показана цена и есть кнопка «купить».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6465-6262-4164-a338-616334383837__-__empty__2.jpg)
Для удобства добавили иконку с глазом на некоторых карточках — пользователи сразу видят,
какие товары можно потрогать в офлайн-магазине
какие товары можно потрогать в офлайн-магазине
Не каждый потребитель знает производителей сантехники поимённо, поэтому для удобства в фильтр мы добавили параметр «страна».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6133-6364-4463-a137-646561393061__-__empty__photo.jpg)
Нужна итальянская ванна с ножками-лапками? Не вопрос!
Заказчик может сам задавать для каждой категории список параметров для фильтра и даже определять, какие из них будут главными (всегда на виду), а какие — второстепенными. Пока настраивали это, раскопали очень странную логику импорта Битрикса: указывать вывод свойств можно только при их создании — а значит, нельзя обновлять. Зачем так сделано — непонятно. Мы поправили, ничего не нарушив :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6431-3966-4431-a636-303865386535__-__empty__konovalov.png)
Евгений
Разработчик
Проблема 5. Издержки на обработку заказов
Не каждый товар есть в наличии — опять же, специфика отрасли. При прочих равных итальянскую ванну вам могут везти 2 месяца, а подушечку к ней — внезапно пять. И придётся терпеть ради красоты и уюта. А чтобы всё это приобрести на сайтах конкурентов, звонок менеджеру неизбежен. А потом, скорее всего, потребуется ещё минимум один, чтобы уточнить детали доставки.
На сайте Ковчега всё проще и удобнее. Мы реализовали несколько стейтов для выбора времени доставки: есть два фиксированных промежутка плюс возможность назначить конкретное время (за небольшую доплату). Здесь же покупатель может указать, что потребуется подъём на этаж. Это не только облегчило опыт пользователя, но и сократило количество менеджеров, необходимых для обработки заказов.
Не каждый товар есть в наличии — опять же, специфика отрасли. При прочих равных итальянскую ванну вам могут везти 2 месяца, а подушечку к ней — внезапно пять. И придётся терпеть ради красоты и уюта. А чтобы всё это приобрести на сайтах конкурентов, звонок менеджеру неизбежен. А потом, скорее всего, потребуется ещё минимум один, чтобы уточнить детали доставки.
На сайте Ковчега всё проще и удобнее. Мы реализовали несколько стейтов для выбора времени доставки: есть два фиксированных промежутка плюс возможность назначить конкретное время (за небольшую доплату). Здесь же покупатель может указать, что потребуется подъём на этаж. Это не только облегчило опыт пользователя, но и сократило количество менеджеров, необходимых для обработки заказов.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild3735-3638-4761-b337-326534346536__-__empty___.png)
Дизайн
Мы сразу сошлись с заказчиком в том, что это будет не только функциональный интернет-магазин, но и эстетически привлекательный (что, как показала аналитика, не характерно для рынка сантехники). Заказчик был готов к экспериментам, поддерживал все наши идеи и хотел эффектно выделить «Ковчег» на фоне конкурентов с нагроможденными унылыми каталогами. Вместе выбрали общую стилистику: много воздуха, акцентные фото и … ничего лишнего. Главную сделали максимально простой и понятной: всего один экран и иконки категорий внизу, при переключении которых меняется фоновое изображение. Цвет логотипа заказчика соответствовал отрасли, но мы его немного освежили: на основной версии он стал светлее, на альтернативной — цвета моря.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6563-3763-4964-b135-666430393965__-__empty___.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6539-6130-4764-a265-653665636265__-__empty___.png)
На сайтах конкурентов рука не поднимется отдать по 50−100 тысяч за сантехнику, даже если она от крутого производителя: их интернет-магазины выглядят дешево и несовременно — и это очень диссонирует со стоимостью товаров. Мы же создали актуальный дизайн, который полностью соответствует ценовому сегменту.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6166-3734-4236-b934-313230326333__-__empty__akulov.png)
Евгений
Арт-директор
Необычная 404
Заказчик оказался настолько смелым, что был готов на эксперименты — каждого посетителя, попавшего на 404-ю, ждёт квест по мотивам олдскульной игры о Марио (он ведь сантехник!).
Удобство заказа
Заказом легко поделиться
Фишка корзины — возможность распечатать заказ, чтобы прийти с ним в офлайн-магазин. Или поделиться содержимым корзины в соцсетях: удобно, если клиент Ковчега не силён в технических характеристиках и доверяет выбор прорабу или своему доверенному специалисту. Или, например, если жена выбрала, а муж оплатил :)
Фишка корзины — возможность распечатать заказ, чтобы прийти с ним в офлайн-магазин. Или поделиться содержимым корзины в соцсетях: удобно, если клиент Ковчега не силён в технических характеристиках и доверяет выбор прорабу или своему доверенному специалисту. Или, например, если жена выбрала, а муж оплатил :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild3561-6262-4239-b234-623063303032__-__empty___.png)
Когда пользователь отправляет список товаров на печать, Битрикс запоминает конфигурацию корзины, присваивая номер в системе. Менеджер магазина может найти конкретную конфигурацию клиента в админ-панели, чтобы не тратить время на поиск товаров по базе. То же самое происходит при нажатии на кнопку «задать вопрос» (конфигурация «улетает» менеджеру на почту) или «поделиться» — сайт выдаёт ссылку, по которой человек попадает в уже сформированную корзину с конкретными товарами.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6431-3966-4431-a636-303865386535__-__empty__konovalov.png)
Евгений
Разработчик
Заказ легко отследить
На сайте реализовано отслеживание заказа по номеру, который приходит клиенту в письме. Зная его, можно видеть статус и детали — причём, без необходимости регистрации в личном кабинете.
На сайте реализовано отслеживание заказа по номеру, который приходит клиенту в письме. Зная его, можно видеть статус и детали — причём, без необходимости регистрации в личном кабинете.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild6231-3136-4636-b035-363761663231__-__empty__-.png)
Легко выбрать адрес доставки на карте
Можно не вводить адрес вручную, а просто найти свой дом на карте — сайт автоматически подставит выбранный адрес в поля.
Можно не вводить адрес вручную, а просто найти свой дом на карте — сайт автоматически подставит выбранный адрес в поля.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild3465-3330-4434-b932-333437346135__-__empty___.png)
Чтобы минимизировать риски разработки, мы с заказчиком остановились на MVP — запустили сайт с рабочим каталогом, корзиной и формой оформления заказа. Сразу настроили многогородовость — в будущем клиент планирует выходить на федеральный рынок. В планах — подключение систем онлайн-оплаты, реализация бонусных и дисконтных программ и отдельный раздел для партнёров.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1561100523/tild3765-6235-4534-b166-366639336437__-__empty__mamontova.png)
Екатерина
Исполнительный директор и руководитель проекта
Готовый проект