BunnyHill

Bunnyhill

Bunny Hill – это концептуальный магазин для детей и родителей. В ассортименте компании представлена продукция более 100 европейских и российских брендов, в том числе эксклюзивных: Banwood, Baghera, Kaloo, Love Mae, Milledeux, Mr Maria, nuuroo, petú petú и Fresk, а также продукция собственной торговой марки LUKNO. Компания имеет магазины в Универмаге «Au Pont Rouge», в Санкт-Петербурге и три магазина в Москве — в Центральном Детском Магазине на Лубянке, в Универмаге Цветной, в ТРК VEGAS Кунцево.

Вводное

Что же является главным элементом интернет-магазина? Конечно же первое, что приходит в голову — это каталог товаров. И этот ответ можно считать правильным. Однако, если бы только лишь каталог сам по себе мог влиять на уровень конверсии, собственники онлайн-площадок задумывались бы лишь о приятной визуальной подаче своей продукции, объёме сопутствующей информации о ней. И такая тенденция тоже существует в наше время, однако её принято называть интернет-витриной, за которой, как правило, содержится большой штат сотрудников от отдела продаж до закупщиков и логистов.


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

Задачи проекта

Проект bunnyhill.ru находится на нашей техподдержке уже более 2 лет, сам сайт представляет собой розничное направление, но имеет и оптовый раздел со своей бизнес-логикой. За время сотрудничества мы создали множество функционала, отладили основные типы проблем и багов, проработали отказоустойчивость, частично изменили интерфейс и многое другое. Однако, с первых месяцев работы с проектом нас сильно беспокоила корзина сайта, написанная на стандартном компоненте Битрикса, от и до кастомизированном. Помимо бэкенд части, вёрстка шаблона компонента была местами неадаптивна и к её логике были вопросы.Проблемы качества с точки зрения оценки состояния проекта нами можно было бы опустить, ведь заказы все‑таки оформляются. Но только не в том случае, когда это касается пользователей.

Основные типы проблем можно было описать следующим образом:


1. Временами без объяснения причин не добавлялись товары в корзину.
2. Для оптовых клиентов корзина добавляла товары, но они не отображались на страницы заказа, пока она не была перезагружена.
3. Были проблемы с товарами со скидкой, они не применялись для определённых брендов.
4. Загрузка корзины при выборе способа доставки составляла от 10 секунд.
5. Ошибки при расчёте стоимости доставки.
6. Временами товары не удалялись из корзины.

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

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

Пример ошибки:

При любом действии в корзине сыпались ошибки в консоли, они замедляли работу корзины, запросы (более 300 шт.) выполнялись с задержкой:

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

При добавлении товара в корзину, основная сетка сайта затемнялась и малая корзина выводилась с правого края страницы. Однако, она иногда выводилась по настроению, из-за чего зачастую невозможно было понять, добавился ли товар в корзину вообще:

В самой корзине не было структуры, и визуального разделения на шаги:

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

Выбор упаковки тоже был неудобен и про неё вообще мог забыть клиент, так как она была на последнем шаге после выбора оплаты, что вовсе нарушает логику:

Прекрасным преимуществом Bunny Hill является то, что каждого клиента ведёт менеджер, благодаря чему обратная связь от пользователей максимально прозрачна, достаточна и оперативна. За счёт этого практически не было сомнений, что эту проблему нужно срочно решать.

Решение

Мы предложили разработать реактивный компонент, который ускорит работу корзины и избавит её от багов. Но не путём рефакторинга, а с воссозданием совершенно нового комплексного компонента.

Объективно сразу же редизайнить корзину было важно и как можно скорее, чтобы ещё и захватить разом проблему с адаптивностью и удобством для пользователей.В итоге было принято решение написать корзину на стеке Vue JS приложения и BackEnd API на основе CMS 1C-Bitrix.

Бизнес-аналитика

В разработанном заказчиком дизайне, корзина состояла из трех шагов с адаптивными версиями: состав заказа, доставка, оплата.

Первый шаг десктопная и мобильная версия:

Второй шаг десктопная и мобильная версия:

Третий шаг десктопная и мобильная версия:

Пустая корзина десктопная и мобильная версия:

Этап 1. Проектирование и написание ТЗ проекта

Мы построили блок-схему работы корзины, чтобы учесть все пользовательские сценарии сайта и на её основании составили подробное техническое задание на разработку. В ТЗ мы постарались учесть все возможные пути пользователя и логику работы, но несмотря на сотни вариантов развития событий, что‑то все же удалось упустить.

Этап 2. Реализация проекта

В корзине работает добавление товара, точно и без отказов работает начисление/суммирование скидок, взаимодействие с промокодами:

Есть возможность включать и выключать выбор подарочной упаковки к товару сразу же в составе заказа.

В рамках программы лояльности начисляются бонусные баллы. За каждые 50 рублей от стоимости товара начисляется 1 балл, который можно списать в счет следующих покупок, за исключением стоимости доставки.

Теперь можно управлять из административной панели всеми способами доставки:

И всеми способами оплаты:

Проблемы, с которыми столкнулись

Самая главная проблема возникала при тестировании корзины. Как рассказывали ранее, мы не учли в блок-схеме все пользовательские сценарии и тестирование заняло больше времени, чем мы планировали. Но после того, как мы прописали дополнительные сценарии поведения пользователя и доработали их:

1. Покупка товара с оплатой бонусами.
2. Покупка товара с бонусами и оплатой через Юкассу.
3. Покупка товара с оплатой бонусами с платной доставкой.
4. Добавление подарочного товара в корзину.

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

Выводы

Корзина позволила:

1. Ускорить оформление заказа.На скриншотах видно, что проверка пройдена, а в старой корзине PageSpeed не мог определить скорость страницы, т.к. она долго грузилась.

Скрин старой корзины:

Скрин новой корзины:

А за период, когда на сайте была старая корзина 01.08.22–01.10.22 всего лишь 344 заказа. Для сравнения мы взяли периоды, когда не было крупных праздников и распродаж. Совпадение? Не думаем:)