case study

city'super

city'super Updates Online Storefront to Enhance Online Customer Experience

city’super chose the global cloud ecommerce platform, Shopify to offer a distinguished online store UX. Wave Commerce worked with city’super to enhance the client’s online store navigation and build in product availability and delivery information throughout the customer journey.

June 15, 2020
F&B
Hong Kong

PLatform

Shopify Plus

services provided

Shopify Plus site redesign, enhancements and optimization, Advanced search and filter, Navigation enhancement, Conversion rate optimization, Applications and extensions, custom features
Since 1996, city'super has been Hong Kong's leading upmarket supermarket. city'super operates stores across Greater China, and offers a premium selection of products from around the world for busy urban professionals who pursue a premium quality of life.

To further its mission to inspire and enrich customers’ lifestyles by providing innovative shopping experiences, city’super chose the global cloud ecommerce platform, Shopify to offer a distinguished online store UX. Wave Commerce worked with city’super to enhance the client’s online store navigation and build in product availability and delivery information throughout the customer journey.

Goal: Enhanced Shopify Storefront to Support an Online Shopping Experience

By putting customers first, city'super wanted to utilize the latest Shopify solutions and update their online store to offer an extended range of products. Conveying information to customers in a user-friendly manner, from store navigation through to in-store pickups was crucial city’super. Wave Commerce worked closely with city’super to map out key customer touchpoints during online shopping that could facilitate a smooth shopping experience, including storefront navigation, sticky headers, as well as customized messages based on product availability limitations.

Solution: Creating Smart Delivery Settings at Checkout

Wave Commerce supported city'super to update their online store in a manner that delivered an exceptional brand experience. By ensuring that customers are given delivery and pickup information throughout their store interactions, Wave Commerce designed and executed a consistent experience from browsing to checkout so that shoppers are not surprised. Shoppers making purchases will have a seamless online order and offline pickup experience.

city’super wanted to fully utilize Shopify’s customization to the benefit of customers. If a customer made a large order, it is likely that some items may be delivery-only, while others would have to be picked up at selected locations. Wave Commerce worked with city’super to fully utilize Shopify’s tagging and code-level changes to deliver a one-of-a-kind checkout and delivery experience.

In order for this customer-centric design to increase customer satisfaction, clear communication throughout the shopping experience was crucial. Wave Commerce designed communication around key customer touchpoints:

  • Product description
  • Disclaimer messages in cart drawer when restricted items are added to the Cart
  • Shopping cart summary

Customers looking at an item can see if an item is delivery only, or the available stores for pick up in the product description (such as IFC Mall or New Town Plaza). This facilitates them making a decision.

Next, disclaimer messages will appear only for products with restrictions to inform a shopper that the item added to the cart has a delivery restriction. This feature helps alert shoppers to key information, so that they are prepared by the time they checkout, thereby reducing the abandoned cart rate.

Finally, Wave Commerce worked with city’super to design clear communication as part of checkout UX. The city’super Cart page displays as personalized calendar and location based on an item’s delivery or pickup restrictions. For example, only the Harbour City location will display if an item is only available at that location, or a pickup-only item will be indicated to show why there is no delivery option. Based on the pre-defined delivery and pick-up logic, Wave Commerce created messages for various scenarios to ensure that customers felt that the store was designed in their best interest and instructions were easy to understand.

Displaying the information during the final purchase stages enables customers to easily understand the next step to collect or receive their order. By making the information easy to find, customers do not need to look up information later and can have a frictionless shopping experience.

---

The clear communication to customers enabled city'super’s online store to facilitate an effortless shopping experience for customers and order fulfillment for staff. By working closely with city’super’s team to integrate storefront communication and the store’s backend logic for shipping restrictions, Wave Commerce helped city’super anticipate the needs of customers and take their professional customer service online.

The UI/UX enhancement helps to better display the navigation of menu as well as to cater for different delivery/pickup models. It further improves the whole customer journey, from browsing, purchasing to receiving the items."