Building a Complex Mid‑Platform Design System: Lessons from IXDC 2020

Entering the Experience Conference

On December 17, 2020, the author and colleague Guo Ming attended the IXDC2020 International Experience Design Conference, serving as a workshop speaker to share the topic “Concept and Construction of a Complex Mid‑Platform Design System.”

Origin

The workshop used the internal 58UXD innovation project “Matrix” as a case study, explaining how designers can elevate their thinking for complex back‑office projects, adopt a full‑link perspective, drive business development, break traditional workflows, and bridge front‑end technology with product barriers.

How to Get a Workshop Opportunity?

Key reasons include internal project recognition, adopting a full‑link mindset, achieving successful project outcomes, and cultivating personal branding through confident, unscripted presentations.

Full‑Link Thinking

Designers must move beyond passive receipt of requirements, understand the background, identify problem sources, propose solutions that meet business metrics, and lead the implementation process.

Project Success

The Matrix project won the Business Breakthrough Award in 58UXD’s internal evaluation, demonstrating strong internal adoption and impact.

Personal Brand Building

Seize every reporting, speaking, or communication chance, use innovative visual methods, and aim for off‑script delivery to leave a lasting impression.

Why This Topic Is Hot

Increasing attention on complex back‑office systems makes the design of data and business platforms a pressing challenge for many enterprises.

On‑Site Overview

The workshop attracted 47 participants, with 54% visual and interaction designers, and the rest product managers, directors, and engineers. It consisted of three parts: project sharing, tool practice, and Q&A.

Matrix Mid‑Platform Solution

Matrix is an enterprise‑level product design system that provides a unified design guide, a G1 component library, extensive modules, a Matrix Magic template site, and online design tools. It enables automation of most requirements, improving efficiency.

Value for Different Teams

Development team: Reduces repetitive work, ensures visual consistency, and offers a reusable front‑end framework.

Design team: Accelerates mock‑up creation with component libraries and templates, and keeps design assets up‑to‑date.

Product team: Uses the Matrix Axure component library to build compliant prototypes quickly, unifying interaction rules.

Template Library

To make component relationships intuitive, a set of template pages was developed, extracting modules from scenarios and assembling pages via the component library.

Axure Component Library for Product Teams

The library consolidates all design resources—components, blocks, templates, icons—allowing product teams to create high‑fidelity prototypes that align with design standards.

Automation Tools for Developers

Automation tools integrate all design resources, keeping structure consistent with product outputs. Developers can assemble pages in a WYSIWYG manner after receiving high‑fidelity prototypes.

Data Visualization in the Mid‑Platform

BI reports, dashboards, and data screens are treated as chart components, standardized in layout to reduce repetitive effort and enhance visual consistency.

Interactive Q&A

Questions focused on project progress and design authority, highlighting the need for unified internal communication and external technical collaboration.

Conclusion

The sharing presented a full‑link approach to building an enterprise‑grade design system, covering component creation, block organization, template construction, and data visualization, enabling participants to learn a complete 0‑to‑1 workflow and gain competitive advantage in their careers.