Designing an Effective Mobile Feed Flow: Principles, Market Insights & Usability

01 Introduction

In the era of information explosion, users have unlimited channels; selecting quality content is crucial. Feed streams, a product of mobile internet, provide personalized content recommendation, becoming valuable in the content‑driven era. Designers must adapt to create better user experiences.

MeiYou, a highly active women’s community in China, uses Feed streams as a core scenario for news and community, continuously optimizing it. This article covers understanding Feed streams, domestic market landscape, usability design principles, and design proposals.

02 Understanding Feed Streams

2.1 What is a Feed Stream?

"Feed" can be understood as "feeding". In the early web era, users subscribed to news sites or blogs, and aggregators updated information chronologically.

According to Wikipedia, a web feed is a data format that continuously provides content to users; content providers offer subscription services, and users actively subscribe to receive updates.

In 2006 Facebook redefined it as "News Feed", emphasizing immersive experience with infinite scrolling.

Today, most feed streams are driven by intelligent algorithms rather than manual subscription.

Summary: Feed streams act as an information outlet, delivering personalized content with a single refresh.

2.2 Role of Feed Streams

The core of modern feed streams is personalized recommendation, matching users and content to display "information finds people".

2.3 Forms of Feed Streams

Feed streams consist of content, time, location, publisher, and meta‑information such as likes, shares, comments. In mobile internet, three common forms exist: text feed, image feed, and video feed.

2.3.1 Text Feed

Typically composed of "title + supporting image". Used in news apps like Toutiao and Tencent News.

Advantages: Clear information, high content extraction rate, low learning cost.

Disadvantages: Weak visual impact, incomplete content display, requires a second tap for details.

Common layouts: Left‑right or top‑bottom structures.

2.3.2 Image Feed

Primarily image‑based with text at the bottom, seen in platforms like Instagram, Facebook, WeChat Moments, Xiaohongshu.

Advantages: Strong visual impact, simple implementation, rich visual hierarchy, high‑quality images improve product perception.

Disadvantages: Large space consumption, less textual clarity, poor image quality reduces perceived quality.

Common layouts: Large image, grid, collage, waterfall flow.

2.3.3 Video Feed

Short‑video‑centric with minimal text, exemplified by Douyin and Kuaishou.

Advantages: Immersive experience, strong sensory impact.

Disadvantages: High bandwidth, storage demands, limited content per view, requires frequent scrolling.

Common layout: Full‑screen feed.

03 Domestic Feed Stream Market Landscape

In today’s fragmented era, users seek efficient and accurate information. News products focus on content delivery, while social products emphasize interaction. This article analyzes two categories within MeiYou: news‑type and social‑type feeds.

3.1 News‑type Feeds

In 2016, news client penetration among smartphone users reached 66.2% (377 million). Recommendation algorithms create a "filter bubble" where users prefer information aligning with their views.

Based on Analysys, the top four news feed styles are compared:

3.1.1 Toutiao

A comprehensive news app using behavior analysis and recommendation engines for personalized push. Clear structure, multiple three‑image and video styles, red brand color, up to three lines of text.

3.1.2 Tencent News

Leverages WeChat and QQ ecosystems, emphasizes real‑time news delivery. Simple, clean blue interface.

3.1.3 Qu Toutiao

Focuses on entertainment and lifestyle, uses more three‑image layouts, distinctive green color.

3.1.4 Sohu News

Open subscription model with abundant exclusive content. Uses left‑image right‑text layout, more small‑image styles, presenting more news per page.

3.1.5 Dynamic Font Size Usage

News apps often support dynamic font sizes. For example, Toutiao adjusts title font size in steps of two units while keeping other elements unchanged.

3.2 Social Interaction Feeds

Social needs drive community products. Grid layouts are common, e.g., WeChat Moments.

3.2.1 Sina Weibo

Feed is a key scene, featuring grid layout with publisher info and follow button above each post.

3.2.2 Douban

Home page emphasizes discovery, using 2‑image and 3‑image styles without follow button, similar to news feeds.

04 Usability Design Principles

Design is both artistic and commercial; data‑driven decisions are essential.

4.1 Signal‑to‑Noise Ratio

Balancing relevant and irrelevant information improves communication. Emphasizing signal helps users quickly find needed content.

4.2 Text Readability

Minimum readable size is 12 pt on iOS and Android. Line spacing of 1.2–2× font size is optimal.

4.3 Image Ratio

Image area proportion (image‑to‑page ratio) affects visual interest; 40 % provides a lively layout, while 100 % can be overwhelming.

4.4 Gestalt Proximity Principle

Objects placed close together are perceived as a group; spacing controls perceived relationships.

05 Design Proposals

Based on foundational knowledge and comparative analysis, a redesign targets three goals: ordered consistency, space utilization, and visual experience.

Key issues identified:

Inconsistent feed font sizes.

Uneven image spacing and corner radius.

Lack of unified tag placement logic.

The redesign applies signal‑to‑noise theory to reduce decorative noise, uses Gestalt proximity to manage element spacing, and experiments with title size, line height, and letter spacing to find optimal combinations.

Image proportions follow the golden ratio (e.g., 4:3, 3:2, 1:1, 16:9). After establishing base image‑text styles, all feed variations are redesigned accordingly.

06 Conclusion

The article shares the complete redesign process of MeiYou’s feed flow, highlighting lessons learned and emphasizing that design should be grounded in theory and market understanding to enhance user experience.