Разработка высоконагруженного маркетплейса Halalo на платформе CS-Cart

Главное о кейсе

Проект является стартапом. Это площадка, где продавцы (офлайн магазины) продают свои товары.
В основном маркет ориентирован на продажу продуктов питания, которые доставляются собственной курьерской службой в определенное время.
- Делать и отслеживать заказы в реальном времени легко
- Собирать заказы и менять статусы товаров- стало еще проще
На текущий момент загружено 25 K товаров, проект совсем недавно запустился.

The project is a startup. This is a platform where sellers (offline stores) sell their goods.
Basically, the market is focused on the food. Its own courier service deliveres products to the clients at a certain time.
- Make and track orders in real time is easy
- Collect orders and change product statuses is simple
25K products have been uploaded at the moment, the project has recently been launched.

Как проект изменил жизнь пользователей

Проект старт-ап, на начальном этапе сложно оценить результаты.
НО! Пользователи в Великобритании легко могут заказать свежие товары, не выходя из дома, максимально быстро.
А вендорам просто разместить и реализовать свои продукты.
Проект дружелюбен как к покупателям, так и к продавцам.
Заказчик огромное внимание уделял обеим сторонам.


The project is a startup, it is difficult to evaluate the results at the initial stage.
However! Users in the UK can easily order fresh products at home, as quickly as possible.
Vendors place and sell their products.
The project is user friendly to both buyers and sellers.
The customer has paid great attention to both sides.

Бизнес-задача и ее решение

Основная задача: это создание функционального маркетплейса, удобного как пользователям, так и вендорам.

1) Локации для покупателей.
При регистрации пользователь обязательно вводит свой zipcode, по которому через API выводятся доступные адреса для выбора. Тот же процесс происходит и при добавлении нового адреса доставки. В результате маркет понимает, куда должна осуществляться доставка позже
Для вендоров также существуют зоны, где они работают. Если покупатель хочет, чтобы ему привезли заказ курьером, он будет видеть магазины и их товары только из своей зоны доставки.

2) Слоты доставки
Каждый вендор определяет доступные слоты времени для самовывоза, а маркет определяет слоты для доставки. Покупатель для своего заказа может выбрать нужный ему временной интервал.

3) Вывод товаров по группам
Логика проекта предусматривала, что основной страницей, где покупатель добавляет товары, будет страница продавца. Здесь выводится меню категорий, где продавец размещает свои товары, фильтрация и сортировка, но самое главное, все товары представлены по группам, категориям и наборам (например, товары со скидкой). Здесь стояла задача: как вывести, например, 10,000 товаров на одной странице, когда нет общей пагинации, а товары представлены в слайдерах.
Что было сделано:
- Использовались CSS слайдеры, которые работают гораздо быстрее JS слайдеров
- Выводились для каждой группы не все товары, а только несколько. Остальные подгружались при прокрутке слайдера для каждого блока отдельно

4) Быстрое добавление товара в корзину.
При добавлении товара в корзину со списка или с карточки товара, кнопка "добавить в корзину" меняется на +/- и пользователь быстро может наполнить корзину с нужным кол-вом товара.

5) Горячие предложения.
Это группы товаров, которые вендор хочет прорекламировать. Покупатель видит изображение горячего предложения, а внутри список товаров.
Горячих предложений может быть много, поэтому на каждой странице они выводятся по смыслу.
Например, на странице продавца, только его горячие предложения, на главной странице только предложения вендоров, которые доступны текущему покупателю

6) Модифицированная страница оформления заказа.
Функциональность маркета высокая, пользователь может быстро оформить заказ и на этапе оформления сделать все необходимые действия, не уходя со страницы.
При этом ведется контроль за заполнением основных полей, пользователь не сможет разместить заказ, пропустив обязательные поля.

7) Распределение оплаты между вендорами.
Сразу после оплаты весь платеж распределяется между маркетом и вендорами, что удобно.
Во-первых, вендоры сразу получают оплату за свои товары, а во-вторых все прозрачно, нет необходимости вести учет кто, кому, сколько должен.
При отмене или частичном возврате, денежные средства распределяются в обратном порядке.

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

9) Приложение доставки
Задача: автоматизация процесса доставки, а именно построение оптимального маршрута, назначение задач водителю, нотификации, подтверждение факта доставки и получение этой информации на стороне маркета.
После обработки заказа вендорами, он попадает в систему доставки woodelivery.
Происходит следующая цепочка событий:
- Заказ передается курьеру, согласно его расписанию
- Курьеры в приложении видят все задачи и выстроенный маршрут
- На определенных этапах покупатель получает SMS и E-Mail нотификации.
- Выполнение задач подтверждается фото, сканированием штрихкодов и т.д.
Как только курьер взял заказ в работу, покупатель видит все его перемещение в режиме онлайн.


The aim: develop a functional marketplace, convenient for both users and vendors.

1) Locations for buyers.
When registering, the user must fill in his zipcode, so that it displays the available addresses via API. There is the same process when new delivery address is added. As a result, the market understands where the delivery should be carried out.
For vendors, there are also zones where they work. If a customer wants an order to be delivered by courier, he will see the stores and the goods only from his delivery zone.

2) Delivery slots
Each vendor determines the available time slots for pickup, and the market determines the slots for delivery. The buyer can choose the time interval he needs for his order.

3) Output of goods by groups
The logic of the project was: the main page where the buyer adds products is the seller's page.
It displays a menu of categories where the seller places his products, also filtering and sorting, but the most important: all products are presented by groups, categories and sets (for example, discounted products).
The task was: to display, for example, 10,000 products on one page when there is no general pagination, and the products are presented in sliders.
What was done:
- CSS sliders were used. They work much faster than JS
- Not all products were displayed for each group, only a few. The rest were loaded when scrolling the slider for each block separately

4) Easy to add item to the cart.
When you add an item to the cart from the list or from the product card, the "add to cart" button changes to +/- and the user can add the desired quantity quickly.

5) Hot offers.
These are groups of products that the vendor wants to advertise. The buyer сan see an image "hot offer", there is a list of products inside of it.
There can be a lot of hot offers.
For example, there are only the vendor's hot offers on his seller page, there are only vendor offers that are available to the current buyer on the home page

6) Modified checkout page.
The functionality of the market is high. The user can easily place an order and do all the necessary actions without leaving the page at the stage of registration .
At the same time, there is a control, the user will not be able to place an order without filling in the required fields.

7) Distribution of payment between vendors.
The entire payment is distributed between the market and vendors immediately after payment. It is convenient.
Firstly, vendors receive payment for their goods immediately, and secondly, everything is transparent.
In case of cancellation or partial refund, the money are distributed in reverse order.

8) Step-by-step work with orders
After an order is placed, the vendor receives a sound signal about a new order. He takes it to work, setting a certain status. Only a certain set of statuses is available at each stage, this makes his work more convenient and reduces the likelihood of an error.

9) Delivery app
Task: the delivery process automation: the optimal route, assigning tasks to the driver, notifications, confirming the fact of delivery and receiving this information on the market side.
After the order is processed by vendors, it gets into the woodelivery system.
The following events' chain occurs:
- The order is directed to the courier, according to his schedule
- Couriers see all the tasks and the built route in the app
- The buyer receives SMS and e-mail notifications at certain stages
- The task fullfillment is confirmed by photos, barcode scanning, etc.
As soon as the courier has taken the order to work, the buyer sees all his movement online.

Крафт (мастерство), реализация, технические детали

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


It was difficult to choose a service for tracking orders and routes optimization . There are many similar companies in the UK market, but none of them provides exactly what the customer needed.
We had to give and take compromise and modify some functions.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Заказчик-очень увлеченный человек-перфекционист, ему важны все детали. Он сам лично тестировал все изменения.
Во время заключительного тестирования, сделал столько много "живых" заказов, что продукты не поместились у него в холодильнике.:)

The customer is a very enthusiastic perfectionist. All the details are important for him. He tested all the changes by himself.
During the final testing, he had made so many real orders that he did not have enough place in the fridge for them.

Скриншоты