How 58 City Unified Feed, Message, and Personal Centers for a Seamless UX

Preface

58 City’s platform‑level product continuously strives to meet user needs with diverse functions. As the app grew, delivering a smooth, efficient experience across expanding scenarios became a new challenge, prompting a cross‑scene value‑integration redesign of the Feed, Message Center, and Personal Center.

Why These Three Scenes?

These scenes are the most frequently accessed parts of the app and complement each other: the Feed initiates content display and IM interaction, the Message Center pushes important information, and the Personal Center lets users manage information and preferences. Together they form a complete information‑flow loop, enabling deeper personalization based on user behavior.

Core Design Goals

The redesign targets three objectives: Efficiency (stable distribution and content rendering), Brand Warmth (simple, pleasant, lightweight visual tone), and Consistency (aligned experience across scenes).

Design Measures

1. Form Transformation – Re‑architected small card structures (Feed cards) and large container frameworks (Message Center, Personal Center) to improve layout and information hierarchy.

2. Experience Refresh – Adopted a new brand style of “simple, beautiful, lightweight, consistent” to create a more comfortable and friendly interface.

3. New Distribution Space – Explored novel distribution formats and spaces to boost active content delivery.

Feed Card Redesign

Based on nine rounds of experiments, the redesign reduced information overload, clarified visual flow, and highlighted key business card information. Eight card types were defined, with non‑essential details removed and key features emphasized, resulting in noticeable UX and data improvements.

Message Center Redesign

The Message Center was split into distinct zones: header ambience, quick actions, announcements, list area, and permission notifications. New and historical messages are clearly grouped, enhancing conversion pathways.

Personal Center Redesign

A “reduction” strategy was applied: core product goals were clarified, redundant elements removed, and configurable functions introduced. The header now focuses on essential user information and assets, followed by frequently used actions, aligning navigation with user expectations.

Visual Language Refresh

Guided by the corporate mission “help people live and work peacefully” and a “friendly, personable” brand tone, the visual style was set to “simple, beautiful.” Symbolic graphics, bright color palettes, and clear hierarchy were introduced to create a cohesive, inviting interface.

New Distribution Experiments

Three exploratory directions were tested: adding a video micro‑list between Feed video cards and detail pages, extending distribution into IM and Personal Center scenarios, and integrating an AI‑driven assistant into the IM channel to deliver higher‑quality information.

Summary and Reflection

The redesign was iterative, involving multiple experiments, rollbacks, and refinements. While brand consistency and innovative exploration still have room for growth, this upgrade marks the beginning of a continuous improvement journey, thanks to the collective effort of the entire team.