How Picasso Simplifies Frontend A/B Testing with Efficient Flow and Custom Rules

1. Project Background

Previously, the front‑end redesign at XingSheng YouXuan lacked a simple, efficient A/B experiment integration. Front‑end developers had to handle experiment logic themselves, leading to high maintenance cost, limited scope (only client‑side), and insufficient data granularity.

2. Core Features

What is A/B testing?

A/B testing is a product optimisation method that compares two variants (A and B) on the same goal by exposing different user groups and measuring metrics such as click‑through rate or conversion rate.

2.1 Traffic Allocation Algorithm

The Picasso platform uses a string‑hash‑modulo bucket algorithm (DJB2 hash) to assign users to experiment groups. This method converts any input string into a deterministic numeric hash, then distributes users according to predefined traffic ratios.

2.2 Traffic Reuse / Orthogonal Experiments & Mutually Exclusive Experiments

When multiple experiments run simultaneously, traffic reuse (orthogonal experiments) ensures that users assigned to group A of experiment 1 are re‑allocated in experiment 2 according to its own traffic rules, preventing strong correlation between results. Mutually exclusive experiments place experiments in the same exclusive group so a user can belong to only one of them.

2.3 Multi‑Scenario and Custom Rules

Picasso supports custom filtering rules defined by a five‑tuple: Area, Key, Value, Operator, and Type. This enables precise user segmentation (e.g., by province) and different traffic allocations per scenario. Scenarios are combined with OR logic, have ordering and weight, and can each define their own rules and traffic ratios.

2.4 Custom Metrics and Reporting

Metrics describe phenomena such as UV, PV, or derived ratios. Picasso allows creation of simple count metrics and composite metrics (e.g., bounce rate, conversion rate). Fourteen calculation methods are supported, including sum, median, average, and conversion rate, with full configurability and reuse across experiments.

After configuring metrics, an experiment report is generated instantly, showing time‑series charts for each metric and group, enabling quick identification of the best performing variant.

3. Overall Architecture

The architecture integrates the traffic allocation engine, custom rule engine, metric calculation service, and reporting UI, forming a complete experiment lifecycle from creation to analysis.

4. Case Studies

Since launch, Picasso has served the mini‑program front‑end of XingSheng YouXuan, covering recommendation, advertising, search, UI, and product features, providing end‑to‑end experiment services that support rapid iteration and data‑driven decisions.

5. Future Directions

More convenient experiment configuration and richer report experience.

Integration of user segmentation for finer targeting.

Enhanced statistical testing and confidence interval calculation.

Stable, high‑availability service infrastructure.

Continuous feature expansion to accelerate business growth.