How We Revamped a 20k‑User Enterprise Communication Tool’s PC UI

Product Background

Meishi is the internal communication and collaboration tool of the 58 Group, serving more than 20,000 employees and aiming to provide the simplest, most efficient office experience for every user and to help both individuals and the organization operate more effectively.

At the beginning of the year, the pandemic made online work a hot topic. Rapid user growth, continuous feature expansion, and the replacement of the underlying service provider with the group‑developed "MicroChat" revealed that the original PC visual style and interaction experience could no longer meet users’ rising expectations, prompting a full PC redesign.

Problems with the Old Version

Outdated visual language: Rough overall visual identity, unclear visual communication, inconsistent icon sizes, and poor adaptation to high‑resolution screens.

Chaotic information acquisition: Low‑quality reading experience, oversized avatars, and overly heavy secondary information that distracts users.

Low collaborative efficiency: Lack of unified visual and interaction specifications prevented a component library from being implemented, resulting in isolated pages and reduced design‑development efficiency.

Design Goals

Through extensive competitor analysis and alignment with product objectives, the team defined the following goals:

Design Implementation

Visual Upgrade to Strengthen Brand Recognition

Brand color: The new PC version retains Meishi’s signature orange while using more white space to create a lighter feel, differentiating it from the mobile version.

Icon Standardization

Old icons varied widely; the redesign adopts a unified line‑style icon set, weakening icon prominence in the message area and adding a subtle blue hue on black backgrounds to emphasize the office context.

Component Elements

The original UI used fully rounded buttons, which looked playful but hindered usability when nested options were present. Adjusting the corner radius improves interaction, conveys a more rigorous and secure product image, and aligns with the platform‑oriented business direction.

4‑Pixel Grid Layout

A 4 px grid system serves as the foundation for UI element positioning, ensuring flexible layouts, clearer module division, and improved reading efficiency while adding visual rhythm.

Information Noise Reduction

In group chats, repeated avatars and names are shown only on the first message of a continuous sequence, creating a cleaner conversation view. The same principle is applied to one‑on‑one chats, stripping unnecessary elements to let content speak for itself.

Prioritizing Information Alignment

Effective organizations need to prioritize and filter massive daily messages. The new PC contact list introduces a top‑pinned area where the highest‑priority contacts appear, allowing users to pre‑determine importance.

Interaction Enhancements with Motion Framework

Guided pages showcase core features and serve as brand touchpoints. The team incorporated the in‑house illustration system and After Effects (AE) animations, adding Lottie‑based micro‑interactions to loading indicators, tips, empty states, and cards.

Establishing a Design System

The design system goes beyond visual guidelines; it defines the team’s workflow and core values. Mid‑project, a PC component library was built to ensure consistent design language, streamline development, and deliver a unified user experience.

Project Summary

Enterprise products differ from consumer products: while consumer users can freely choose the best experience per domain, enterprise tools must also strive for integration. This redesign marks the first step in transitioning Meishi from a simple tool to a platform, improving visual appeal, interaction consistency, and development efficiency. The author thanks the FE, PM, and QA teams for their support.