WeChat Ecommerce

Hublot

Hublot China’s ecommerce WeChat mini program. A sleek, modular design allowing for flexible layouts, campaigns, and product pages with smooth UX and high conversions.

Hublot China - Ecommerce WeChat mini program case study header
Scroll
Hublot China - Ecommerce WeChat mini program case study header

WeChat Ecommerce

Hublot

Hublot China’s ecommerce WeChat mini program. A sleek, modular design allowing for flexible layouts, campaigns, and product pages with smooth UX and high conversions.

Building the Hublot WeChat ecommerce experience in China

Working with Hublot China, we designed and developed an ecommerce WeChat mini program to provide an online shopping experience for Chinese luxury consumers. The meticulously crafted digital ecommerce experience was the first of its kind for Hublot in China, bringing their high quality of service and limited edition timepieces inside an easy-to-use and visually stunning WeChat mini program. Since its launch, our partnership with Hublot has continued, expanding on the features and functions to optimize both the UX and the business logic to strengthen digital clienteling and sales across China.

Services in scope

UX Design

UI Design

Design system

WeChat mini program development

Laravel development

Ecommerce

Data tracking

CRM integration

An advanced ecommerce funnel for nurturing leads & driving sales

With the nature of HNW customers and the high cost of Hublot timepieces, the experience of shopping and purchasing products on the Hublot ecommerce WeChat mini program was carefully tailored to create advanced sales funnels for campaigns, capturing data, analytics, and leads, nurturing them throughout the process with personally assigned sales associates from boutiques of their choice.

Hublot China - Ecommerce WeChat mini program case study

Hublot Ecommerce WeChat mini program purchase flow

Flexible and modular front-end components

To ensure the integrity of the design system is maintained by content managers we created a front-end system of flexible modules and blocks. The system allows for selecting from multiple block sizes, formats, and content types, then being able to control the inner structure and content within each block including the headings, text, buttons, their colors, sizes, and alignment. Blocks can then be used together to create seamless campaigns and product pages quickly and in line with the Hublot brand and our UI design system creating consistency and harmony. The content used in the example components below uses mock-up data and does not represent Hublot.

Drag

Fullscreen - Content with CTA / centered

A clear design system for consistent collaboration

As the Hublot team grew in China and more creatives, marketers, and managers became involved in the project we designed The Hublot China Ecommerce Digital Design Guide to create a unified design language within and between cross-functional teams and collaborators.

Design system

Colors

Typography

Buttons

Dark/light mode

Components

Icons

Forms

Logo

Banner blocks

Component blocks

Product resizing

Drag

Compliant with China’s personal data protection laws

Since the Personal Information Protection Law (PIPL) data privacy law came into effect on November 1st, 2021 in China, the Hublot’s ecommerce WeChat mini program has been updated to be fully compliant with the processing of personal data, data transfer, security controls, and data localization to ensure stronger personal information and personal data leakage protection for its users in China.

Planning ecommerce in China?

Related case studies

View
Hublot China custom CRM dashboard case study

Digital Data Capture CRM

Hublot

UX / Laravel / Vue.js

View
Hublot Wechat owners mini program case study background card

WeChat Owners Club

Hublot

UX / UI / WeChat mini program / Laravel

Have a project in mind?