historical
Investree — Web Design System
Bringing order to a fintech design team working across three tools
- Role
- Product Designer — I initiated the design-system effort, audited the existing UI, led the tooling migration, and owned naming and component structure.
- Scope
- UI inventory and audit, migration from Sketch/Zeplin to Figma, component naming conventions, categorisation and grouping, and the foundational layer: icons, typography, buttons and colour guidelines.
- Timeline
- 2019 — 2020
- Category
- Design System
Overview
Investree serves both SMEs seeking supply-chain financing and investors looking for passive income, across Android and desktop/mobile web. Several product tribes worked in parallel, each shipping interface work of its own.
Challenge
In 2019 the design team ran Sketch for UI, InVision for prototyping and Abstract for file management — three tools to deliver one design. With multiple tribes working in parallel and no shared library, the interface drifted and every handoff cost time.
Objective
Establish a design system that would make collaboration efficient, hold the UI consistent across tribes, and make the product feel trustworthy — while reducing the tooling cost.
Approach
Three stages. First research and audit: reading through Material Design and design-system literature, then inventorying every UI element in the existing Sketch files and grouping components one by one. Second, the tool migration, agreed with the design team and begun in December 2019. Third — the hardest part — editing and evolving: deciding naming conventions, categorising, and reorganising components.
Selected decisions
Atomic Design was adopted as the mental model, so the system was built upward from the smallest pieces rather than decomposed from finished screens. The migration broke every nested symbol, which forced a full renaming and regrouping pass — painful, but it produced conventions the team could actually hold to.
Deliverables
A Figma component library with defined naming conventions, foundational icon / typography / button / colour guidelines, and a team migrated off three tools onto one.
Outcome
The team consolidated from three tools to one and gained a shared component library. This was an internal design-system effort; no public performance metrics were published for it.
Reflection
The technical migration was the easy half. The hard half was naming — deciding what a component is called, and getting several tribes to agree, took far longer than moving the files. A design system is a social agreement before it is a library.