A superb eCommerce grocery website on Magento 2

Client: MY MARKETIndustry: eGroceryLocation: Hong Kong

View Website

Introduction

My Market is an eCommerce grocery (eGrocery) brand that specialises in supplying imported French products to foreigners residing in Hong Kong. As a Direct to Customer eCommerce (D2C eCommerce) model, My Market does not give customers an offline shopping experience like other companies, but depends 100% on the eGrocery website. By understanding the needs of My Market in developing a new online system which is more scalable and effective, SECOMM has collaborated with Synova to offer an eCommerce solution in line with the D2C model.

Given problem

The need of upgrading an eCommerce website for long-term growth

My Market eCommerce website was firstly built using the open source Drupal platform. However, since Drupal is a specialised CMS platform for general informative websites, the eCommerce-support modules are basically non-existent, and the development cost for customizations on this platform is considerably higher because Drupal is not designed for statistical and commercial data management. 

Furthermore, the management tasks on the current system are quite manual, due to the lack of integration between the existing website with the ERP and process automations system, from product imports to order fulfilment, everything on the eCommerce system must be handled “by hand”, causing the business to spend a lot of time and labour cost to process orders.

With all of the aforementioned hurdles, SECOMM has advised to use  the Magento 2 platform to rebuild the website to help My Market to achieve the present and future goals,  such as flexible customisation, building more D2C eCommerce grocery-specific functions, and more.

Solution & Technology

Migrating data from Drupal to Magento 2

Product data is a critical component of any eCommerce website and must be fully and precisely synced amongst corporate management systems, and My Market currently has a wide range of products with a complicated category tree and attribute structure. Knowing the significance and complexity of this project, SECOMM has developed strategies to combine Drupal import/export files and build a set of modules that connect with the ERP system’s APIs to fully and accurately transform the entire system, such as brand name, product category, and customer information to the new structure on the Magento 2 platform, ready for the later stage of feature development and operation.

Rebuilding UI/UX for My Market website interface

In the eCommerce industry, the website interface is regarded as the “face” of the brand, thus businesses usually pay close attention to the website layout as well as graphical elements, such as spacing between blocks or widgets, how to show images/videos, and where to place Call-to-Action buttons to attract customers. When rebuilding the website, My Market also wants the new website to adhere to UI/UX design guidelines in order to provide customers with the most comprehensive shopping experience while retaining the grocery industry’s peculiarities and brand characteristics.

My Market - A superb eCommerce grocery website on Magento 2
My Market’s eCommerce website interface

Therefore, SECOMM has designed the My Market website’s new interfaces based on special characteristics of  the grocery market, which also represents My Market’s branding traits. At the same time, SECOMM rebuilt several additional pages, such as the Catalog and Product Detail pages, to be compatible with the new system functionalities. In this way,  SECOMM has helped My Market to have a professional UX/UI while saving money and the project implementation time. 

Additionally, this new eGrocery system enables administrators to be able to modify some content elements easily like changing images, colours, fonts, logos, images, icons, and sections on the Homepage, Category, and Product detail pages without requiring technical support.

Creating a system of advanced and unique features for My Market

Building functionalities to support the eCommerce marketing strategy

Aside from the fundamental eCommerce operations, SECOMM has set up a system of advanced and peculiar grocery industry features to support My Market’s eCommerce Marketing approach.

Social Integration: Using the social commerce strategy, My Market has requested the feature of transferring images automatedly posted on Instagram to the website. SECOMM also created a tool that automatically displays product promotional tags to encourage customers’ purchasing.

Content Marketing Strategy: Create a category on the navigation called “Recipes” for SEO strategy and cross-sell/upsell the products in the post to enhance online sales.

My Market - A superb eCommerce grocery website on Magento 2
Share Recipes combined with SEO strategies, Cross-sell and Up-sell

Loyalty Program: Add a loyalty programme feature to the system, accumulating points for each user’s purchase to rank users, redeem coupons, gifts, and so on. My Market can then boost customer-brand interaction.

Email Marketing Integration: Integrate Email Marketing tools like Mailchimp to automate sending order confirmation emails, abandoned cart notifications and information about forthcoming My Market promotions.

Building functionalities to serve delivery management

The peculiarities of the eCommerce grocery industry are the complexity of the process and operation system, and so is the business model of My Market. SECOMM has built and implemented numerous modules in the new system to  control the complete order fulfilment process.

Cut-off Time Management:

This is regarded as the most challenging feature when developing the new website since it required SECOMM to comprehend My Market’s operations in order to create a configurable process for the whole delivery management system, with following criteria:

▪️ Determine the earliest delivery date available on the system. Customers can receive orders the next day if they order before 4PM, and 2 days later if they order after 4PM.

▪️ Orders placed before 4PM on Friday will be delivered on Saturday, Sunday, or Monday. Otherwise, the orders will be dispatched on next Tuesday.

▪️ Provide an advanced configuration that allows administrators to set up a separate cut-off time for each district and date in Hong Kong.

▪️ The global cut-off time will be preferred if no special event settings exist.

Multiple Delivery Options Support:

▪️Pickup in store:Customers can pick up after 1 hour ordering on the website, particularly from Monday to Friday (09:30 – 18:30).

▪️Standard delivery: Purchases under 750 HKD must pay a delivery cost of 80 HKD, while orders over 750 HKD are free.

▪️Outlying Islands: Create a custom shipping method based on a flat rate with a 100 HKD shipping fee and allow customers to choose between 2 options pier, but the delivery date will follow global cut-off configurations.

▪️ Express Delivery:Integrate with Lalamove service to support a set delivery fee of HKD150 that is only available in a few districts, and delivery dates will follow cut-off time configurations.

Time Slot Management: Set up 3 time slots including 9AM – 1PM, 1PM – 5PM, 5PM – 7PM and support delivery rules based on addresses since some locations only deliver in the afternoon, certain bays only pick up on Monday, Wednesday, and Friday, etc.

Delivery Switch-Off: Added a feature to temporarily halt deliveries to deal with unanticipated social crises such as the Covid-19 outbreak, social distance, natural catastrophes, hurricanes, floods, and so on. My Market may also suspend shipment on weekends and holidays in certain Hong Kong districts, with a banner announcing that order delivery has been disabled at the top of every page of the website.

Earliest Delivery Day Management: Allows admin to configure the earliest delivery day available for customers to choose during the checkout process. This configuration applies to the global cut-off time setting and Special Cut-Off Time Configuration above.

Delivery Schedule Information: Show the chosen Date and Time Slot in the Order Overview column, and under the Shipping Method section.

Show the delivery date and time in the shipping method section.

Building functionalities for Warehouse Management and Order Fulfilment

To help My Market to optimise the order fulfilment process, one of the most important step is Order Picking, which has been suggested by Secomm to implement into both system and human activities:

My Market: A superb eCommerce grocery website on Magento 2
Order management process at My Market

SECOMM has assisted businesses in transitioning from manually managing product expiry dates to an automated process so that they are picked in the correct order, allowing companies to know precisely which batch to pick up and how many for each order.

At the same time, the system is built with a feature to send emails to employees when the product expires so that My Market can promptly provide plans to handle them, such as promotions, liquidation of goods, and so on.

Outcome

Completing an eGrocery website for My Market

Despite the challenge of migrating data, building basic, advanced and peculiarity functional systems, SECOMM has completed the My Market project within 5 months which helped the business to operate their processes a lot more efficiently.

The favourable initial steps in building a eCommerce website specialised for the grocery industry is the basis for My Market to gradually optimise the D2C eCommerce business model. This project will be the premise for SECOMM, Synova and My Market to continue implementing the next eCommerce projects in the near future with more extensive features like Business Intelligence, complete ERP integration, etc.