My role in this project was versatile.
I was responsible for creating a seamless user journey and designing the storefront user interface. Simultaneously, I designed the backend management tools and workflows to support these critical business needs. This project also involved extensive cross-functional collaboration with Marketing, Devices, Logistics, Customer Services, our internal IT team, and our external vendor.
2 designers, 1 Project Manager, 2 System Analysts, 2 Business Analysts, Vendor
Feb 2024 - Oct 2024
Feature Launch
Responsive web
The entire e-shop is built on and supported by the robust Salesforce Commerce Cloud service, providing a strong foundation for our innovations.
The below diagram illustrates how Special Delivery integrates into our product ecosystem. The yellow part of this diagram is the proposed enhancement for our eshop. In general, Club Shopping, another e-commerce platform within the HKT group, handles product logistics for CSL Eshop. Products shipped directly from merchants are categorized as 'Virtual Products,' which includes both e-redemption products and Special Delivery products.
Businesses face challenges in offering both physical and virtual products on eCommerce platforms due to the lack of a flexible system that supports merchant-managed delivery and digital redemption. Without these capabilities, both operational efficiency and customer satisfaction are significantly impacted.
UX Research
To gather insights and define acceptance criteria, we conducted extensive cross-team workshops. We utilized methods like card sorting for organizing information, conducted workshops specifically focusing on workflow definition, and used prototype demonstrations to validate requirements with stakeholders.
This complex diagram outlines our comprehensive order flow. It details the various stages from Browse to checkout, payment, and crucially, how virtual products lead to e-redemptions, while physical products proceed through shipment status updates. This visual helped us align stakeholders on the end-to-end process.
In checkout page, system determine to display the delivery method based on the product type. Aftering receiving order information from the CLUB, the order included virtual products will be generated redemption letter and updated shipment status on storefront in the next stage. Until all package shipped, the order status will be updates to complete.
Our research included a competitive analysis, studying established e-commerce players like CLUB Shopping – which is also within the HKT group – and HKTV Mall. We examined their approaches to special deliveries and order tracking to identify best practices and areas for differentiation in our own solution.
We conducted A/B testing on how to display order details, specifically 'Display per shipment' versus 'Display per SKU'. We decided to pursue the 'Display per shipment' view for our solution.
Display per SKU
CLUB 's Display per shipment
Display per shipment
Storefront Solutions
Some of the key UI design elements and screens that bring these solutions to life, focusing on both the customer-facing storefront and the backend management tools.
01.
Delivery Tags
We introduced clear 'E-redemption,' 'Merchant Direct,' and 'Delivery by Appointment' tags to easily identify the delivery method for each item in the shopping cart and order details.
02.
Unified Shopping Cart
The design allows customers to include Physical products, Virtual products, and Special products within the same shopping cart, providing a seamless purchasing experience.
03.
Dynamic Shipping & Delivery
The shipping fee calculation and delivery section were designed to dynamically adapt based on the specific product and delivery types selected, ensuring transparency for the customer.
04.
Order Progress Display
We provided a clear order progress display that shows the delivery status at the shipment level, allowing customers to track each part of their order individually, aligning with our A/B test findings."
We have meticulously structured the content within our Figma master library, starting with a comprehensive guideline on system usage and the methodology employed to organize the system.
Backend Solutions
Central to our operational solution is the Special Delivery Management tool, built within the SFCC backend. This tool allows operation users to manage order delivery across different merchants and update shipment statuses in batches or by unique IDs. It also centralizes merchant information through a master list, enhancing overall management efficiency.
Suitable for Cross-Device Data Management
It ensures business users can easily import and export essential data across any device, streamlining diverse operational needs.
Manday Limitation
This approach minimizes custom development needed from our vendor, allowing them to focus on core integrations.
Easy to Operation
CSV provides a simple and familiar way for business users to directly manage merchant and shipment data.
Timely Launch
It enables a quicker go-to-market by avoiding the initial complexities of a fully integrated merchant management interface.
'Upload Shipment,' demonstrates how operation users can efficiently manage shipment statuses. They can select a CSV file, upload it, and the system processes the batch update, displaying success or failure statuses.
The 'Shipment Status' tab allows them to search and filter by various criteria, enabling easy tracking of individual shipments or broader trends.
This 'Merchant Master List' tab further showcases the backend tool. Here, business users can centralize merchant information. Similar to shipment updates, they can select a file and import a CSV to update merchant profiles or manage them individually, significantly boosting efficiency in merchant management.
My role extended to providing comprehensive UX support for crucial user materials. This included designing clear and effective templates for the redemption letter, order confirmation email, and invoices. We carefully considered the necessary information for both customers and business users, drafting layouts that enable our Customer Service team to communicate clearly and efficiently with customers.
The project involved in different parties, including Logistics, Marketing, Devices, Customer Services and vendor, one of the biggest challenges was aligning different team priorities. For example, Logistics prioritized efficiency, while Customer Services focused on clear communication with customers. I initiated the cross-team workshops to align everyone quickly and drive decisions.
Unlike typical eCommerce site design projects, this one required us to design not only the storefront user journey and UI, but also the backend tools within Salesforce Commerce Cloud (SFCC). This dual responsibility demanded a clear, comprehensive blueprint of the entire product. To ensure feasibility and design consistency, we worked closely with the project manager and external vendors throughout the process.
