GLDB: From Fragmented Designs to a Unified Design System
Early-stage screens and competing preferences
We inherited early-stage screens and a limited component library. The earlier project team wanted to retain the visual style, but some designs did not meet WCAG, and component and module details were inconsistent. The challenge was threefold:
- Prevent inconsistencies from spreading. Differences in colour, spacing, and component details risked carrying over into new pages as the product grew.
- Avoid repeated rework. Without shared standards, teams revisited the same decisions, consuming design and engineering time.
- Build agreement among partners. The founding partners had different visual preferences. We needed to explain what could stay and what needed to change for accessibility and consistency.
Set shared standards before designing more pages
Three principles guided our work: Clarity, Consistency, and Growth. They helped us balance visual preferences with delivery needs and establish a foundation before expanding the page designs.
- Review existing screens. We identified recurring patterns, accessibility issues, and inconsistencies before defining the system.
- Standardize the foundations. I defined reusable values, or design tokens, for colour, spacing, corner radius, and other visual properties, keeping changes to the overall style minimal.
- Build from elements to pages. We used an atomic design structure: Atoms → Molecules → Organisms → Templates → Pages.
- Review changes with stakeholders. We regularly shared work with the project manager, product managers, and founding partners. Showing changes within product screens helped connect individual visual preferences to shared standards.
Apply one system across two portals
We created Link UI-International specifically for GLDB. I worked closely with front-end developers to align design specifications with the Vue 3 implementation as the work progressed. The system supported two portals with distinct responsibilities:
- Internal management portal: Enterprise operations, credit approval, contracts, financing, loans, and repayments.
- Supplier portal: Onboarding, operations, and financing.
Shared components supported both sets of workflows, while templates gave new pages a consistent structure.
Impact and reflection
The component library and screen designs established consistent patterns across both portals, and those patterns carried forward into subsequent product iterations. Stakeholder reviews also became more focused. Discussions shifted from debating individual design choices toward confirming a shared direction, giving the team a clearer basis for design decisions.
This project reinforced that a design system needs agreement as well as components. Preserving the visual direction helped us respect the earlier team’s expectations, while standardizing the foundations supported new design work. As design lead, a key part of my role was establishing those shared rules before the team scaled page design.
