How Tianxing Financial Revamped Its App Experience with a Unified Design System

Design Background

Tianxing Financial operates five major business modules—finance, wealth, insurance, loans, and wallet—across multiple terminals. Following a brand upgrade, the client 8.0 version revealed outdated and inconsistent designs, duplicated page structures, and varied design languages, making a unified design system and horizontal experience integration essential.

Core Design Goals

The aim is to create a comprehensive design system that unifies the financial app’s experience, delivering consistent and smooth interactions, enhancing user goodwill and brand recognition, while reducing technical and design workload and improving design‑development efficiency.

The goals are broken down into three dimensions (see diagram).

Implementation Strategy and Rhythm

A ten‑month design promotion plan was deployed, with cross‑departmental briefings to product, operation, and development leads, establishing project foundations for subsequent rollout.

Phase 1: Client Base Component Upgrade

Given the relatively low page count and logic complexity in Tianxing’s various apps, the client side was chosen as the entry point to quickly iterate and abstract highly reusable base design specifications and component styles.

Colors were organized into primary, auxiliary, font, and background dimensions to simplify UI, clarify visual hierarchy, suggest interactivity, and enhance communication.

Page and card layouts were built on 12‑column and 8‑column grids respectively, establishing a unified visual rhythm with a rational, mathematically‑pleasing aesthetic.

Font usage was consolidated across all business scenarios, minimizing the number of font weights and sizes, enabling designers and developers to quickly recall the appropriate typography for common contexts, thereby improving readability and efficiency.

Phase 2: Build Cross‑Business Component Library (UI Kit)

After upgrading the UI of primary pages and native features, the design effort expanded horizontally to all business modules. Common specifications were validated across domains, abstracted, and organized into a comprehensive UI Kit that retains and upgrades business‑specific style components while maintaining overall consistency.

Phase 3: Business‑Specific Redesign and Upgrade

Targeted redesign tasks were created for key functional modules, revisiting processes, interactions, and architecture to further enhance user experience. Examples include insurance policy and family protection interactions, credit‑card module revamp, integration of platform‑wide coupon functions, mobile recharge for life‑payment, and streamlined wealth‑product purchase flows.

Phase 4: Establish the Airstar Design System

The component library was refined, the design language solidified, and a resource platform—comprising a component code library, design asset library, and public resource library—was built to enable internal sharing among product, operation, brand, design, and development teams, fostering consistent design thinking and collaborative efficiency. Development is ongoing.

Conclusion

The Tianxing design platform is progressing steadily, with a front‑end component library under construction in agreement with developers. The team thanks designers zz, fan, Eli, and 阿居仔, as well as all business collaborators. The platform will launch soon, aiming to extend the design system and component library to other departments and the market, delivering a consistent, user‑centric financial experience.