How a TV App’s Waterfall Layout Boosted User Engagement and Efficiency

1. Project Overview

The horizontal layout had been used for about two years, but it suffered from poor content arrangement, theme segmentation, exposure efficiency, and operational convenience. The waterfall flow addresses these issues and is now a common industry practice.

Advantages of the waterfall flow include:

Scrolling down feels smoother than moving right, matching user habits.

The navigation bar is fixed at the top, more noticeable and acts as a bridge between content and status bar.

Higher content capacity shortens the path for users to find videos.

Row‑level content aggregation facilitates thematic operations within channels.

The redesign also introduced a series of optimization requirements, such as VIP‑related changes visible in the comparison diagram.

The project started product planning on 2017‑06‑19, entered internal gray release on 2017‑10‑20, and achieved full release on 2017‑11‑20, spanning five months. Development alone took six weeks with five engineers.

Results included significant improvements in VV conversion, user retention, membership conversion (ranking first among Tencent Video terminals), increased channel penetration, richer page content, shorter navigation paths, and higher user efficiency via Z‑axis shortcuts.

2. Differences Between Old and New

Compared with the previous horizontal layout, the waterfall flow still faces the same challenges:

The environment remains complex with multiple licenses, partners, and distribution channels.

Hardware constraints are severe; set‑top boxes have limited CPU and memory, often running Android versions one or two releases behind.

Thus, compatibility and extensibility issues persist. New challenges introduced by the waterfall flow are:

Data volume increases 5‑6 times.

Personalized recommendations raise content capacity and require stable display over time.

UI adjustments introduce many new cell types and significant changes to existing ones.

Higher content capacity demands more flexible system configuration.

3. Implementation Plan

3.1 System Architecture

Key points:

Channel list navigation and featured content are core logic, directly output by the homepage logic layer.

VIP panel information is fetched asynchronously via an independent VIP interface after core data is obtained.

A fallback cache provides degraded service when downstream services fail; the VIP panel logic is not covered by this cache.

The CMS system is the hub for homepage data, while other systems provide extensions.

3.2 Heavy Backend, Light Frontend

Due to poor hardware on TVs and set‑top boxes, the strategy is to shift most logic to the backend, reducing client load. A “seven‑layer structure” and component‑based abstraction are used to describe page content.

3.2.1 Seven‑Layer Structure

The layers are:

Page : Each channel’s featured content is a page.

Section : Pages consist of vertically stacked sections; each section groups multiple groups.

Group : Groups represent thematic collections, optionally showing titles and background images.

Line : Lines organize content within a group; most groups have a single line.

Component : Determines the number and layout of grid cells within a line.

Grid : Holds one or more items; different grid types define item organization.

Item : The basic content unit, composed of View, Action, and Report.

Example: Group1 → Line2 contains four album items, each with a single grid cell.

3.2.2 Componentization

Each item consists of:

View : Visual representation (e.g., poster view).

Action : ActionId plus parameters defining the behavior.

Report : Key‑value pairs for analytics.

Componentization enables reuse across homepage, list pages, and detail pages.

3.3 CMS Configuration System

The CMS manages layout, content, and control configurations. Layout configuration focuses on assembling components, while content configuration links groups to data sources or entry points.

3.3.1 Layout Configuration

Components are chosen as the basic building block to balance element library size and flexibility. Group and Line are simple but can become complex; Grid and Item are too fine‑grained for layout design.

Component attributes include:

Line type (ensures consistent height across components).

Grid type (defines cell dimensions).

Component type (guides client rendering).

Configuration steps: select component → add group → edit group to insert lines → add components to lines.

3.3.2 Content Configuration

Groups link to data sources (media assets) or entry content. Data sources provide static lists or personalized recommendations. Entry content supplies navigation or activity links.

3.4 Homepage Backend Service Split

3.4.1 Processing Flow

The flow includes fetching channel layout, assembling data according to the seven‑layer structure, applying filters, handling personalized data, and performing A/B testing.

3.4.2 Static vs. Dynamic Data (Dynamic‑Static Separation)

Static data (e.g., manually curated lists) are pre‑fetched and cached with a 10‑second granularity. Dynamic personalized data are fetched per user request and may involve Union service enrichment.

3.4.3 Light‑Heavy Separation

Two data paths exist: the main homepage logic handles core content, while a separate VIP panel logic handles membership‑specific information asynchronously.

3.5 Pagination Design

3.5.1 General Pagination Modes

Three common patterns:

Page number + page size.

Start position + request count.

Sequential paging where the server supplies the next page arguments.

3.5.2 Homepage Pagination Characteristics

Large pagination granularity (Section as unit).

High data volume per page.

High freshness requirement; entire page skeleton and content are delivered together.

Filtering logic (compatibility selectors) may cause uneven page sizes.

Personalized content leads to variable section counts, requiring “pseudo‑infinite” expansion.

3.5.3 Homepage Pagination Solution

Use page number + size for Section lists after applying compatibility filters.

Backend controls page size and supplies next page number, hiding pagination details from the client.

Introduce a “skeleton” concept: the backbone of Sections and Groups that remains constant across pages.

Client renders based on skeleton completeness and Group data presence.

Client triggers data refresh when a Group gains focus.

3.5.4 Group Content Pull and Update

Initial app launch fetches the first page of multiple tabs. Subsequent down‑scroll actions request next pages. When a Group gains focus, the client checks focus interval and decides whether to refresh data. Empty Groups are skipped, but empty pages may be retained to allow future content insertion.

3.6 Robustness

3.6.1 Caching

Client‑side caches navigation and featured content to survive backend failures. Backend caches static data (channel list, layout) and uses a static‑data system for non‑personalized lists. Personalized data rely on short‑term client caching.

3.6.2 Disaster Recovery and Fault Tolerance

Data storage uses Redis with multi‑machine backup and cross‑IDC disaster recovery. The homepage service is stateless, enabling easy horizontal scaling and multi‑region deployment. Additional mechanisms include a fallback cache layer (accelerates responses and provides data when upstream fails) and a circuit‑breaker that disables problematic downstream calls based on failure thresholds.