How LOCO Design System Revolutionized 58.com’s UI Development

System Path

Before building LOCO Design System we called it “Basic Interaction”, a name that was hard to pronounce and spread.

At the end of 2019 we reorganized 58.com’s design specifications, expanding components to 20 types, covering 532 component states and nearly 1000 icons. In 2020 it was renamed LOCO Design System, where LOCO stands for Live, People, Creative, Ecosystem, echoing the brand philosophy and sounding like “Local”. The vision is to appreciate aesthetics in a complex commercial environment.

Design Path

Design systems are an intangible asset that gradually promotes collaboration between designers and engineers. Rapid product iteration creates redundant code and duplicated design work, increasing product size and maintenance cost, forming technical debt.

We aim for each product upgrade to bring a global experience, linking users with business, system, and hardware. This shifts from single‑function design to holistic thinking.

LOCO DS consists of four parts: graphic design system, UI interaction guide, marketing ad design guide, and motion design specification. Initially maintained as documents, we realized that only code‑based components could truly solve debt and enable global functionality.

We audited old components and found poor compatibility and accumulated legacy issues. Many components were second‑level developments of system components, causing barriers for engineers. Re‑engineering components with higher flexibility reduces duplication.

Component Modes

We classified component design into three modes:

Mode 1 – Fully encapsulated functional component : Business can invoke the component from the codebase with simple navigation logic, image replacement, and text changes. Suitable for basic top navigation, activity landing pages, or notification pages.

Mode 2 – Open component : Frequently used components are packaged with more open customization, exposing interfaces for spacing, size, position, style, and interaction. Examples include top navigation, button, dialog, Tab.

Mode 3 – Independent atomic component : For highly flexible business needs, atomic components are nested inside custom components, supporting arbitrary property configuration. Examples include button, scroll, list, tag.

These modes address different development scenarios while considering compatibility, interface design, event handling, and system permissions.

Top Navigation Example

We applied Mode 1 and Mode 2 to the top navigation component, providing template models and strict validation of model data.

private const val TEMPLATE = "{\"nav_bg_color\":\"0x00796B\",\"nav_type\":0,\"left\":[{\"item_type\":1,\"item_data\":{\"image_local\":\"ic_back\",\"actionUrl\":\"\",\"params\":{}}}],\"center\":[{\"item_type\":4,\"item_data\":{\"title\":\"标题\",\"title_color\":\"0xffffff\",\"params\":{}}}],\"show_sep_line\":0,\"params\":{}}"

Corresponding Kotlin model classes:

class WubaActionBarModel {
    @WubaActionBarTemplate.TemplateStyle var navType: Int? = null
    var navBgColor: String? = null
    var showSepLine: Int = 0
    var left: List<WubaActionItemModel>? = null
    var center: List<WubaActionItemModel>? = null
    var right: List<WubaActionItemModel>? = null
    var params: HashMap<String, Any>? = null
}

class WubaActionItemModel {
    @WubaUIComponentType.ActionType var itemType: Int? = null
    var itemData: ItemData? = null
    class ItemData {
        var title: String? = null
        var titleColor: String? = null
        var imageLocal: String? = null
        var imageUrl: String? = null
        var badgeType: Int = WubaUIConstants.BadgeType.BADGE_TYPE_NONE
        var badgeText: String? = null
        var badgeTextColor: String? = null
        var badgeBgColor: String? = null
        var actionUrl: String? = null
        var params: HashMap<String, Any>? = null
        var placeHolder: String? = null
        var placeHolderColor: String? = null
        var imageLocalSearch: String? = null
        var imageUrlSearch: String? = null
        var imageLocalVoice: String? = null
        var imageUrlVoice: String? = null
        var showVoice: Int = 1
    }
}

First batch of components was completed in September 2020 (8 components). Collaboration with business engineers led to gradual replacement of legacy components, confirming the effectiveness of the three‑mode approach.

Multimedia Component Suite

In December 2020 we began developing a multimedia suite (camera, video, album). The suite abstracts capture and album logic, providing separate pages and a nine‑grid album for different scenarios.

Key API examples:

fun setPickerMode(mode: Int)
fun setPickerStyle(builder: WubaPickerStyle.Builder)
fun setMimeType(mimeType: Int)
fun setDefaultTabPosition(position: Int)

The suite exposed more interfaces, integrated pop‑ups and top navigation, and was later shared with Anjuke through 58.com’s code‑sharing mechanism.

Collaboration Path

LOCO DS has been applied internally and in open‑source projects such as the “Windfire Wheel” efficiency platform, FAIR (Flutter‑based components), and Taro (cross‑framework solution). Monitoring tools like the “ZhiMe” project (later QMD experience assessment) evaluate the system’s growth in product lifecycles.

After two years, LOCO DS has evolved from documentation to a code‑driven asset, fostering teamwork among designers, engineers, and product managers, and is preparing for a 2.0 era focused on global functionality.