How 58 MicroChat SDK’s Visual Upgrade Boosts Efficiency and User Experience

Preface

The middle‑platform concept extracts common, reusable services from front‑end business to enable inter‑communication and enhance capabilities across products.

Background

As the group expands, more business lines integrate the MicroChat SDK, which serves as the core export for instant messaging. The visual‑interaction experience of the SDK directly impacts user satisfaction and business growth, making an upgrade essential.

Current Product Analysis

Key issues identified include outdated visual styles, poor user experience, generic capabilities lagging behind mainstream solutions, lack of business‑specific features, low customisation efficiency leading to high integration costs, and a high reuse rate that magnifies the impact of any visual shortcomings.

Goals

The product aims to deliver a first‑class, fully‑featured linking service, take responsibility for user experience, strengthen message and reminder monitoring, and reconstruct visual interaction across all client ends. Specific objectives focus on improving reusability, consistency, and usability.

Design Method Exploration

Two major challenges were identified: difficulty in requirement analysis due to numerous, vague scenarios, and difficulty in design validation (conversion metrics and user feedback). A dedicated “front‑stage middle‑platform experience upgrade” team was formed in March 2020, establishing weekly and bi‑weekly meetings and conducting functional research with product managers.

The research uncovered 53 experience problems and 19 functional demands, leading to the following improvement directions:

Framework extensibility: add high‑risk reminders, sticky cards, emoticon extensions, and generic card styles.

Image‑sending efficiency: introduce a shortcut that reduces the steps from five to three.

Visual Upgrade

The visual redesign focuses on four aspects:

Brand‑color optimisation: adjust hue and saturation to convey a more stable, tool‑oriented image.

Large rounded corners: apply consistent corner radii to dialogs, cards, avatars, and icons to increase visual friendliness.

Simplified visual elements: reduce unnecessary lines and enhance colour contrast to lower cognitive load.

Generic card reconstruction: modernise card layouts for better hierarchy and consistency.

These changes are supported by a consolidated component library that abstracts common UI elements, enabling easy reuse across business lines.

Code Upgrade

Based on the new visual specifications, the SDK’s codebase was refactored to improve integration efficiency, reduce secondary development effort, and ensure visual consistency across platforms.

New Version Preview

The upgraded SDK is slated for full release by the end of September, supporting over 200 ports across mobile, web, M‑terminal, and mini‑program environments.

Key Advantages

Comprehensive functionality covering basic chat, business‑specific extensions, and rapid response to new requirements.

High efficiency and stability with millions of messages processed daily, encrypted transmission, and offline push.

Simple integration through quick onboarding, UI integration kits, professional technical support, and extensive experience.

Rich data feedback via core and custom reports, plus real‑time message bus synchronization.

Core Capabilities

Conversation modes: single chat, group chat, customer service, public accounts.

Message types: text, voice, image, emoji, location, file, video, custom messages.

Audio‑video calls: voice, video, and IP‑based calls.

Conversation management: list, delete, pin, unread count, reminders, do‑not‑disturb.

Message functions: recall, read receipts, @mentions, deletion.

Additional features: user profile sync, sensitive‑word filtering, offline push, mute.

Application Scenarios & Business Coverage

The SDK serves a wide range of scenarios—private messaging, group chat, customer support, audio‑video communication—and powers numerous 58 Group services such as 58.com, 58 Tongcheng, Zhaopin, Anjuke, and many others.

Four‑Step Simple Integration

Integration requires only four straightforward steps, illustrated in the accompanying diagram.

Acknowledgements

Thanks to the project team members: Zhang Li, Sun Qiaoling, Li Yang, Zhang Hua, Li Jian, Wang Yang, Shen Yushu.