1. Главная
  2. Блог
  3. Кейсы
  4. Разработка интерфейсов оптово-розничного магазина

Разработка интерфейсов оптово-розничного магазина

18 Января 2019
289

Автор кейса: Гусаков Никита

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

Очень часто, при заказе разработки интернет-магазина в нашей (да и в любой, пожалуй) компании, заказчик, ориентируясь на цену и снижение сроков запуска, выбирает шаблонные решения. В 75% случаев, они закрывают все потребности розничных интернет-продаж. Они довольно надежны, сбалансированы, их интерфейсы качественно проработаны, а конверсионные пути покупателей по сайту продуманы и доведены до идеала – у потенциального клиента не возникает вопросов при использовании сайта, ему все понятно и удобно.

Но тогда почему только 75%? Чего не хватает остальным 25?

Все просто – для оставшейся четверти наших заказчиков, стандартный «розничный» и «типовой» подход к работе с клиентом не является оптимальным. Он просто не встраивается в их схему работы, а иногда может даже «мешать».

Сегодня один из таких примеров. Знакомьтесь, интернет-магазин искусственных цветов kosmeia.ru

smartmockups_jsyk91bi.jpg

Часть 1


Немного предыстории. Представитель заказчика пришел в нашу компанию после того, как ему в течении нескольких месяцев «запускали сайт» в студии, которая, видимо, взялась за заказ, но не рассчитала своих сил и знаний. Мучали-мучали, тянули сроки, ковыряли самописную CMS, пытаясь ее научить работать (вообще в принципе). В итоге этого «сотрудничества», у клиента 3 месяца ожиданий, разработанный логотип, какое-то количество «слитого» рекламного бюджета, потерянных денег на «разработку сайта» и четкое понимание того, что ему «впаривают какую-то дичь» (негативный момент) и такое же четкое понимание того, что ему в качестве рабочего инструмента нужно нечто совершенно иное (это момент положительный).

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

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

На первой встрече с клиентом мы приходим к пониманию, что задаче несколько шире, нежели «просто сделать сайт-каталог». Клиент хочет наладить в компании товарный учет, выйти со своим товаров за пределы города, в котором он находится и наладить процесс полноценных розничных продаж через интернет (запомните этот список, мы к нему чуть позже вернемся).

Эту задачу мы нашли решать итерационно. Изначально, проанализировали товарную номенклатуру, с которой на тот момент работал клиент. Сделали четкую иерархию в товарном каталоге и выполнили работы по внедрению системы товарного учета. Простыми словами – внедрили 1С-ку на стороне клиента. 

Звучит привычно и просто, но на самом деле это был большой и ответственный шаг для компании клиента:

• было закуплено новое оборудование;
• настроена локальная сеть;
• развернута система учета;
• создана будущая структура каталога;
• продуманы свойства и характеристики товаров;
• настроены клиентские интерфейсы;
• куплены и подключены сканеры штрих-кодов;
• куплены, настроены и подключены принтеры этикеток и ценников;
• обучены сотрудники;
• даны рекомендации по корректному заполнению карточек товаров;
• куплены, фискализированы и подключены online-кассы по ФЗ-54;
• и еще много-много мелких, но очень важных работ.

Параллельно с этим, велись работы по созданию розничного интернет-магазина. По выбору заказчика, мы проделали работы по адаптации и настройке одного из шаблонных решений из каталога официальных шаблонов Битрикс.

Для полноценного запуска был подготовлен выделенный сервер, подключены модули оплат от Тинькофф и Яндекс.Кассы, подключена online-касса Атол, настроена передача чеков в ОФД, настроены модули автоматического расчета доставок ПЭК, СДЭК, Почты РФ. 

Чуть позже, после того, как были закончены работы на стороне 1С, была произведена настройка двусторонней интеграции сайта и 1С – мы «научили сайт» обмениваться с 1С-кой информацией о товарах (цены, остатки, описания, фото), заказах и контрагентах в автоматическом режиме.
 
В итоге получился легкий и понятный розничный интернет-магазин, первые заказы в котором, начали появляться уже с первых дней работы – клиент до появления сайта занимался «ручными продажами» через собственные аккаунты в социальных сетях и собрал неплохую «горячую» аудиторию, которая быстро оценила удобство выбора и заказа товаров на сайте. 

Очень быстро начало работать «сарафанное радио» в масштабах страны и сайт kosmeia.ru стал для клиента одним из основных источников продаж.

Часть 2


Еще на этапе анализа и проектирования нового сайта, мы выяснили, что клиент работает с 2 сегментами аудиторий – розничные покупатели и мелкий/крупный опт.

Под оптовыми покупателями клиент понимал представителей небольших off-line розничных магазинов по всей стране и мастеров, которые использовали товары kosmeia.ru. в качестве компонентов для своих изделий – это и дизайнеры интерьеров, и свадебные агентства, и флористы и тд.

Всем этим покупателям нужны были отдельные оптовые и мелкооптовые цены.

Причем, ценовая градация должна быть зависима не от типа клиента (это можно было просто решить лицензий Битрикс «1С-Бизнес" вместо «1С-Малый бизнес», которая позволяет работать с несколькими типами цен), и не от количества покупаемого товара (это можно было бы решить скидками и правилами корзины), а от типов упаковок продаваемого товара.

Помимо цен, оптовые клиенты иначе понимали и работали с номенклатурой – они мыслили и хотели покупать не только «штуками», а еще и «упаковками» и «коробками».

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

Вот 2 примера:

1) есть товар «цветочные головки», он может быть продан:

• поштучно по 10 рублей за штуку – розничная цена;
• упаковкой, в каждой по 40 штук, цена за штуку 7 рублей – цена мелкого опта;
• коробкой, в каждой по 200 штук, цена за штуку 5 рублей – оптовая цена.

2) товар «букет цветов», он может продаваться:
• поштучно, по 20 рублей – розничная цена;
• упаковкой, в каждой 700 штук, цена за штуку 17,2 рубля – цена мелкого опта;
• коробкой, в каждой 4000 штук, цена за штуку 13 рублей – оптовая цена.

Ну и в дополнении ко всему – количество единиц в упаковках и коробках может периодически меняться для каждого товара. Поначалу у нас была идея сделать это на основе стандартных скидок Битрикс, но после введения этого «условия» и она отвалилась.

Было принято решение хранить количества штук в упаковках и коробках в свойствах товаров на стороне 1С. Там же хранить и цены – розничную, цену мелкого опта и оптовую.

Мы начали работать параллельно – 1С-ник «допиливал» обмен, а дизайнер и программисты начали работать над интерфейсом.

Клиент изначально хотел реализовать стандартную логику – покупатель кладет в корзину какое-то определенное количество товара. Если это количество больше или равно количеству товара в упаковке, но меньше чем должно быть в коробке, то цена на товар изменяется на мелкооптовую. Если «догребаем» до коробки, то
меняется на оптовую. В довесок, клиент хотел сделать информирование, которое бы стимулировало клиента к увеличению – что-то типа «положи в корзину еще 1000 шт и цена будет ниже на 13%».

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

В этом решении покупатель:

1. видел все возможные типы цен;
2. понимал объем, который ему необходимо положить в корзину для получения оптовой/мелкооптовой цены;
3. это сильно упрощало взаимодействие с сайтом для клиента – ему больше не нужно было вручную вводить количество товара или, что еще комичнее, плюсиком накликивать тысячи единиц!

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

2018-12-19_08-58-18.jpg
В зависимости от параметров и свойств товара, карточка может меняться. Например, если товар продается только поштучно (нет коробок или упаковок), то для него не будут выводиться лишние блоки с ценами – только поштучная цена.

Если клиент хочет купить товара больше, чем у нас есть на складе, то ему будет показано предупреждение, а кнопка «в корзину» будет неактивна.

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

2018-12-19_09-01-47.jpg
Отдельная битва у наших программистов была с корзиной, которая никак не могла начать понимать, почему это один и тот же товар может продаваться с разной ценой. Но этот нюанс доблестно был побежден и теперь все хорошо – цены в корзине нормально зависят от упаковок. В 1С заказы тоже корректно выгружаются.

2018-12-19_09-23-43.jpg
Отдельно для корзины проработали валидацию количества с зависимостью от типа упаковок и цен – как и в карточке товара мы отслеживаем, по какой цене мы можем какое количество товара продать. Такая проверка гарантирует прозрачность в понимании покупателем принципов ценообразования, а также сводит на нет ошибки ручного ввода и ручного расчета.

Помимо корзины и карточки товара, изменения коснулись и страницы каталога.
2018-12-19_09-14-54.jpg
Не заходя внутрь карточки товары, у потенциального клиента есть уже «почти вся» информация о цене. «Почти» – потому что нет расшифровки того, как купить по более привлекательным оптовым и мелкооптовым ценам, – данные по упаковкам только в самой карточке товара.

Сделано это было специально, по нескольким причинам:

1. Информирование о возможных ценах – маркетинговая фишка. Покупателя нужно информировать о возможностях.
2. Нужного количества товара может и не быть на складе (упаковкой или коробкой его нельзя будет купить), а спрос на него нужно формировать показывая ценовые возможности (магазин работает и под заказ).
3. Чтобы не перегружать интерфейс дополнительными элементам (если дать возможность прямо из каталога выбирать тип цены, то нужно тогда давать возможность и количество задавать или выводить что-то типа SKU)
Для страницы каталога были переработаны 3 интерфейса вывода списка товаров – плиткой (скриншот ниже), списком:
2018-12-19_09-23-43.jpg
и таблицей:
2018-12-19_09-24-02.jpg Как показывает практика и наблюдение за статистикой, чем «оптовее» покупатель, тем более табличный интерфейс для просмотра списка товаров он использует. И это вполне логично – розничному покупателю, не знакомому с номенклатурой, нужно больше рассматривать изображения, чтобы понять что это за товар и подходит ли он ему.

Для мелкооптовых покупателей каталог более-менее знаком, но фото еще нужны, но можно мельче и нужно добавить более заметные кнопки для сравнения и откладывания товара (часто заказ формируется не один день).

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

После этих доработок у нашего клиента значительно снизился критичный показатель – время на обработку заказов. В России пик загрузки приходится на несколько дней в году – 8 марта, 1 сентября, праздник Пасхи. Менеджеры не справлялись с потоком из-за необходимости пересчитывать цены в заказах и большое количество времени приходилось уделять общению с покупателями по телефону. Дважды был коллапс, из-за которого прием заказов приходилось останавливать из-за неразберихи на складе и большого количества поступивших, но необработанных заказов. С появлением автоматического функционала интернет-магазина такой проблемы нет.

Одновременно с этим у клиента снизились временные издержки за счет стимулирования оптовых продаж – складские работники меньше времени тратят на пересчет товара – коробки легче считать, нежели штуки.

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

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

Все это стало возможным из-за того, что клиент хотел не просто «какой-нибудь сайт, чтобы был», а хотел развиваться. Клиент вместе с нашей командой анализировал, планировал, думал и принимал решения. И это очень круто! 

Сейчас мы готовимся уже к третьей и четвертой стадии развития сайта kosmeia.ru. и компании клиента в целом. В планах – более глубокая проработка алгоритмов работы с оптовиками, переход на обработку заказов в CRM, совместные закупки, чуть больше социализации и геймификации и еще куча полезных мелочей.


В общем, следите за развитием проекта, ну и приходите к нам в WEB-AiM за качественными решениям, которые помогут более эффективно развивать и ваш бизнес тоже!
Записывайтесь на консультацию 8 800 201-07-68, она бесплатная и ни к чему вас не обязывает :)
8 800 201-07-68
Консультации по решению