Technical Design and Evolution of Taobao Home Page BFace (Night Taobao)
Taobao’s Night Taobao (BFace) redesign transforms the homepage into a 24‑hour entertainment hub, offering night‑time live streams, short videos and games, using modular front‑end components, cross‑container state sharing, and extensible data pipelines that enabled rapid iteration, tripled user engagement and powered the Double 11 gala.
Taobao Home Page BFace (also called Night Taobao) is a new product built to satisfy users' long‑duration leisure needs on the Taobao homepage. This article presents its design and development from a technical perspective.
Background and Motivation : With the arrival of summer holidays and post‑pandemic travel, Taobao aimed to break the traditional “selling‑only” perception by creating an entertainment‑focused space that serves users’ night‑time lifestyle.
Product Positioning : BFace operates 24 hours, with the night side (20:00‑06:00) delivering entertainment, live streams, short videos, and interactive games, while the day side (06:00‑20:00) offers casual “moyu” activities.
Role in Double 11 : BFace acted as the main entry for the Tmall Evening Gala, providing pre‑show promotion, real‑time program guidance, and dynamic content slots for ads and live streams.
Technical Design :
Multiple front‑end selection modes (e.g., senior, newcomer) using custom components and DX templates.
Support for overseas versions via dedicated containers.
Subscription/Live tabs added to the top bar with independent MTOP APIs.
“Home‑as‑Venue” pattern that reuses the homepage container for event pages.
To enable rapid iteration and low‑cost experimentation, BFace combines front‑end, client, and back‑end layers, exposing the entry point in the top‑right corner and leveraging existing floating‑layer infrastructure.
Cross‑Container Parameter Passing : A recursive post‑construction merge of parameters ensures consistent day/night state across the top bar, entry container, and BFace container without timing dependencies.
Operational Efficiency : Modules are decoupled from material placement, allowing fine‑grained configuration while reducing manual effort through default settings and a mixing algorithm that auto‑generates content selections.
Scalability and Extensibility : Data sources are abstracted and decoupled from business logic, enabling quick addition of new card types (e.g., short video, live‑brand wall) and zero‑code integration of interactive features via a generic SPI.
Results : Since its July launch, BFace has tripled its user base, delivered popular content such as “Fengshen” meet‑ups and short dramas, and significantly boosted engagement during Double 11.
Future Directions : BFace will serve as a template for rapid construction of secondary pages, deepen algorithmic mixing for non‑operational content, and continue to explore innovative user‑centric experiences on the Taobao homepage.
DaTaobao Tech
Official account of DaTaobao Technology
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.