How Responsive Grid Design Boosted User Engagement on a Short‑Video Platform

Project Background

Haokan Video is a short‑video platform that launched its PC site in 2019. After more than two years of operation, a self‑inspection revealed low filtering efficiency on the homepage compared with competitors that use responsive layouts and recommendation feed streams.

Competitor Comparison

Screen adaptation gap: 67% of PC users have screens larger than 1920 px, but the old site was designed for a maximum width of 1200 px, wasting space. Competitors use a grid‑based responsive layout that adapts to any screen size.

Navigation efficiency: The previous top navigation displayed 15 channels and hid additional channels and functions (history, favorites) in a secondary menu. Competitors place common functions on a fixed left navigation, allowing quick switching.

Content exposure: The homepage only showed six recommended videos with left/right arrows; other categories displayed five videos each, requiring extra clicks. Competitors use a waterfall feed that continuously loads more videos as the user scrolls.

Design Goals

1. Establish a responsive grid layout to fully utilize larger screens. 2. Improve browsing and filtering efficiency through framework reconstruction and visual noise reduction.

Design Solution

Grid System – Responsive Page Adaptation

Adopt a 24‑column grid with 16 px gutters, 32 px margins, and a column width of 62 px. The maximum page width is set to 2160 px, with breakpoints that reduce column count down to a minimum of four columns on smaller screens.

Framework Refactor – Expandability and Browsing Experience

Switch to a left‑fixed navigation bar and a right‑hand area of 1920 px that uses the mixed responsive grid. This allows a single code base to serve all screen sizes while keeping development effort low.

Visual Noise Reduction

Reduce the number of font sizes from eight to four and font colors from eight to three, following WCAG 2.0 contrast guidelines. The new palette uses blue‑gray tones for comfortable reading.

Icon Redesign

All icons were redrawn with a two‑tone style, providing a unified, neutral, and clear visual language.

Implementation and Validation

An AB test on the homepage ran for one month. The experimental version with the new responsive layout and feed‑style content display showed higher content exposure, improved click‑through rates, and stable or slightly increased user retention compared with the control group.

Conclusion

Responsive grid design combined with a feed‑style recommendation flow effectively enhances content presentation and filtering efficiency for short‑video platforms, especially on large‑screen PCs. The case demonstrates how a single responsive front‑end implementation can improve user experience while reducing development overhead.