Boost Design Efficiency with Standardized UI Components

Introduction

During the pandemic, the concept of a side job resurfaced, and the part‑time business of 58.com entered a product growth phase. As an operations designer, I frequently encounter concentrated operational demands, short product cycles, insufficient design time, varying operational goals, and high hand‑off costs between design and development.

To maintain quality while reducing repetitive design work and speeding up delivery, I share several practical techniques.

Standardized Design Improves Quality

Establish Size Standards

Defining fixed page dimensions (e.g., 375 px @1x, 750 px @2x) ensures consistency across collaborators and avoids mismatched outputs.

Typography Binary Standard

Text hierarchy is expressed using font sizes that increase by multiples of 4 px, starting from 20 px up to 40 px on mobile. In our part‑time operation templates, we define six typographic levels, ranging from 20 px for auxiliary notes to 60‑110 px for important figures.

Control First‑Screen Height

Reducing the header height from 600 px–750 px to 460 px allows more content to be visible without scrolling, increasing click‑through rates.

Regular Module and Element Spacing

Global margins (typically 30 px) and consistent spacing between modules create a clear visual hierarchy. Using whitespace instead of lines to separate groups follows the proximity principle, making related elements appear as a cohesive unit.

Create Effective Buttons

Buttons should be at least 48 px tall to avoid accidental taps. Standardizing size, color, corner radius, and states (default, pressed, disabled) enables rapid visual updates across the component library.

Quantifiable Components Increase Design Value

Components are reusable, standardized modules (e.g., buttons, navigation bars, tabs) that improve consistency, reduce development effort, and accelerate iteration.

Consistency: Uniform use of components across the product enhances visual cohesion and reduces duplicated styling work.

Efficiency: Designers and product managers can assemble pages by dragging components, freeing time for experience design.

Continuity: Component libraries enable seamless updates and onboarding of new team members without breaking visual language.

In practice, we package special tasks as banners with micro‑interactions to attract user attention. The same component can be repurposed across different topics by simply adjusting its appearance.

We also display curated tasks as cards, building a diverse component set that can be reused in many scenarios. Changing text or colors adapts the component to new product needs, dramatically improving design‑to‑development efficiency.

Facilitate Designer Collaboration

When multiple designers work on the same project, standardized components prevent divergent styles (e.g., inconsistent corner radii), reducing communication overhead and simplifying later revisions.

Boost Collaboration and Quantify Design Value

Component‑based design not only speeds up page creation for designers but also improves developer efficiency by providing clear, maintainable code. After introducing a component template, a single designer can launch 3‑4 operational activities per month instead of one, allowing us to measure and continuously improve design impact through A/B testing.

Conclusion

Operations designers must collaborate with product teams, focusing on user scenarios and experience. Standardized guidelines and component libraries save time spent on repetitive design, letting us concentrate on innovation and user value. I hope this article offers useful insights and ideas.