GLDB: Design System at Scale
Building a Scalable Design System to Unify 300+ Banking Screens Across Dual Portals
Overview
I led the product design and fully owned the design system for GLDB, a digital wholesale bank for MSMEs in Singapore. Starting from fragmented early-stage screens, we built a scalable system — Link UI-International, that unified 300+ pages across internal and supplier portals, accelerated delivery, and transformed partner relationships from contested to collaborative.
Challenge
GLDB was born from a partnership between Greenland Group and Linklogis. The design inputs we inherited were minimal, scattered early-stage screens with a limited component library. We reverse-engineered implicit patterns from what existed and built the system in parallel with live product delivery: components were being defined and applied simultaneously.
The challenge was threefold:
- Fragmentation at scale: Without a shared design language, every team transition and partner handoff introduced fresh interpretations of spacing, colour, and interaction. Different international versions of the product diverged visually, undermining the sense of a coherent, trustworthy banking product.
- Compounding cost: Frequent redesigns consumed engineering cycles and delayed delivery as teams rebuilt what had already been decided. Design decisions defaulted to subjective negotiation rather than shared standards.
- Alignment required earned trust: The two founding partners had different aesthetic preferences and different comfort levels with ceding design authority. Good components alone couldn’t resolve that. The process itself had to build confidence.
For a digital bank operating in Singapore’s tightly governed financial market, consistency isn’t cosmetic. It’s the product. Getting the design system right meant faster delivery, fewer revision cycles, and a credible product that both partners could present with confidence.
Approach
We structured the work around three principles: Clarity, Consistency, and Growth, as decision criteria for resolving trade-offs between partner preferences and delivery pressure.
- Audit before architecting: Reviewed existing screens to surface implicit patterns before building a single component, preventing the system from resting on contested assumptions.
- Token-first foundation: Established a comprehensive set of design tokens, including colour, typography, spacing, radius, and shadow, as the base layer. This enabled global updates without redesigning individual screens, and gave partners meaningful levers to express brand identity within a shared system.
- Strict atomic build order: Followed a disciplined layer progression — Atoms → Molecules → Organisms → Templates → Pages — so each level was validated before the next was built, giving developers predictable handoffs and reducing rework.
- Partner-aligned iteration: Shared work-in-progress at regular intervals, framing consistency as a way to preserve brand identity more faithfully. This gradually shifted reviews from contested negotiations to structured confirmation sessions.
Solution
We delivered Link UI-International, a comprehensive design system built on a Vue 3 framework that unified GLDB’s dual-portal experience, covering internal management (enterprise operations, credit approval, contracts, financing, loans, repayment, etc.) and the supplier portal (onboarding, operations, financing, etc.).
Implementation highlights:
- Bilingual design system: Designed and published Link UI International (English) alongside the existing Chinese version, supporting global markets without duplicating design effort.
- 36 core components, 300+ screens: Built a scalable component library spanning foundational atoms to complex organisms, all integrated within Vue 3 for seamless developer handoff.
- Design-to-engineering alignment: Worked closely with front-end developers throughout, aligning specifications early to reduce implementation friction and maintain design integrity in production.
Impact
- ~95% UI element coverage across both portals, leaving no room for inconsistent, case-by-case design calls.
- 300+ high-fidelity screens delivered, covering all core flows with no design gaps across internal and supplier user roles
- ~70% design adoption in MVP, with system patterns carried forward into later product iterations, proving system durability beyond initial launch
- ~90% first-attempt task success rate in usability testing across key workflows
- Partner dynamic transformed: Stakeholder reviews shifted from relitigating decisions to confirming direction, reducing revision cycles and building the delivery confidence both partners needed to ship
Reflection
In fast-paced, partner-driven projects, trust comes from early alignment and visible progress. By iterating openly with stakeholders and prioritizing reusable standards from the start, we turned fragmented inputs into a scalable system that outlasted the initial crunch and became the foundation both partners were proud to ship.
