How a Modular Illustration System Boosted Product Efficiency and Brand Cohesion

Illustration System Background

In recent years, facing diverse internal products and rapid business growth, the illustration system not only enhanced overall visual appeal but also improved tool efficiency. Componentized illustration design increased interface aesthetics, better conveyed brand characteristics, and boosted collaborative efficiency.

Design Process

Style Selection

Before the project started, an emotion board was created and various illustration styles were collected for design and analysis, such as flat, line, 3D, and geometric. Styles were evaluated for brand differentiation, feasibility, refinement, and extensibility. Flat and labor‑intensive 3D styles were discarded, as were overly abstract geometric styles. Ultimately, a micro‑3D gradient style was chosen.

Design Theory

Based on atomic theory, illustration components were built from atomic elements, allowing multiple combinations to form illustration modules.

Design forms include character mode, scene mode, and element mode.

Color Definition

Colors, a key factor for brand expression and emotional communication, were derived from the 58 logo: blue, red, yellow, green. Saturation was reduced to suit B‑side products. A refined blue serves as the primary color, complemented by yellow, red, and green as accent colors.

Accessibility was considered, ensuring color contrast ratios greater than 5.

Element Evolution

Brand symbols from the 58 logo were deformed and extended, combining elements L, O, O, C into background elements and clothing textures.

Design Workflow

Character Design

Challenges include maintaining refined, distinctive designs while enabling componentization and collaborative use. Standards must be simple and reusable.

Characters use gradient, shadow, and white highlight to form a unified specification. Brand features appear in both elements/background and character details. Corner radii follow multiples of 4 px, ranging from 4 px to 24 px, ensuring smooth illustration.

Character Definition

Different business lines define corresponding character roles, giving each product line a vivid, story‑driven persona (e.g., HR “coco”, 58 employee‑programmer “Mark”, customer service “vivi”).

Character Motion

Common actions such as walking, sitting, standing, and pointing were selected based on enterprise scenarios. Ten base actions for “coco” were designed and reused across eight roles, resulting in over 70 character motions.

Character Props

Props like laptops, computers, files, and cards were defined according to internet‑person identities and can be swapped as needed.

Foreground, Midground, Background

Foreground: main characters, most refined, interchangeable.

Midground: generic components and card combos; icons can be fetched from the illustration system icon library.

Background: single theme color, adds visual accents.

Illustration Extension – Icon Design

A set of illustration system icons was created for use within illustration scenes and UI interfaces, broadening the system’s application.

Scene Mode

Scene categories include character models for guiding pages (home, onboarding) and object models for larger spaces, ensuring richness and lightness.

Scene color schemes are divided into light (for white backgrounds) and dark (for colored backgrounds) palettes.

Module Design and Component Application

To improve design output efficiency, more than 20 template types (login, empty, onboarding, home, detail pages, etc.) were produced, each with systematic usage guidelines, enabling rapid design production.

Application and Empowerment

After launch, the enterprise‑level illustration system was applied across data, business, and technology platforms and multiple product lines, with plans to extend to additional enterprise projects.

Conclusion

The illustration system has increased product efficiency and enabled high‑impact empowerment. Future work will further systematize and tool‑ify the system for greater convenience.