How Vivo’s Official App Redesign Achieved a Simpler, More Consistent Home Page

What is the Vivo Official App?

The Vivo official app, pre‑installed on Vivo phones, serves as the online hub for Vivo products, services, rights, news, and community, supporting users from purchase through device replacement.

Why Redesign the Home Page?

Business growth exposed design inconsistencies and quality decline, especially on the home page, prompting designers to initiate a redesign focused on visual unity and quality.

User and Business Perspectives on Quality

From the user side, the home page contains two scenarios: a clear functional entry (search bar, key area) and a content‑driven “no‑purpose” zone. Functional entries have stable conversion, while content zones heavily influence brand perception and retention.

From the business side, content operations follow a “person‑product‑place” model: analyze user traits, push relevant information, and present it in the “container.” The goal is to use minimal container rules to satisfy diverse needs, achieving “few styles for many scenes.”

Core Problems Identified

Chaotic container styles lacking consistency.

Redundant information (e.g., irrelevant chip displays, dense community posts).

Incomplete information preventing users from obtaining needed details.

Insights from Leading Brand Stores

Analysis of top‑tier brand official stores revealed a common “simplicity” aesthetic achieved through three principles:

Limited container types (max three).

Limited information quantity per page.

Clear visual hierarchy—focus on images, concise titles, prices, and tags.

Adopting the “Ultimate Simplicity” Concept

Combining user cognition, business requirements, and industry trends, the redesign centers on the keyword “simplicity,” delivering logical, rule‑based, and standardized experiences.

New Container Types

Advertising Container : Unified banner specifications and copy across header, new‑product, and interleaved banners.

Product Container : Two formats—combined and horizontal—standardizing information hierarchy and limiting copy to three levels.

Content Container : Displays brand and community content with a consistent “image‑above‑text” layout, adaptable to various scenarios.

Information Presentation Optimizations

Product info was reorganized to show complete phone models, concise subtitles, and de‑emphasized price. Community sections now only display title, source, and interaction metrics, reducing redundancy.

Visual Rules and Design System

A grid system defines container sizes; typography uses the custom Ori­ginOS font “HanYi QiHei” with only two font sizes for uniformity. Graphic language emphasizes semantic clarity and consistency, while the color system standardizes brand blue across primary, material, and gray palettes.

Result

The refreshed home page, built on the new container and visual rules, delivers a cleaner, more immersive experience that aligns with Vivo’s brand identity and prepares the platform for future global redesigns.