STIGYA Organics ran its entire operations — logistics, finance, production, marketing — across disconnected tools with no shared design language. I built the design system that unified them, unblocked stuck projects, and embedded AI into the everyday workflow of a legacy Hong Kong business.
STI Aromas is a Hong Kong institution — decades of business, multiple brands (Gya Labs, H'ana, Gya Tea Co, Kukka), and a global supply chain. STIGYA Organics runs its internal operations on a custom cloud ERP. When I arrived, nine separate teams — Logistics, Sales, Finance, Operations, Marketing, IT, Production, Support — were all working in the same product. None of them were working the same way.
Four tools guided the discovery phase: Figma for the design audit, Miro for mapping the system relationships, Milanote for organising insights, and Frame0 for sketching interaction logic quickly enough to validate with developers before committing to high-fidelity.
I went through every existing Figma file — all scattered across multiple drafts, shared libraries, and local components — and catalogued what existed versus what was consistent.
Each team had different workflows, different data densities, and different interaction speeds. I mapped what each team needed from the ERP before designing a single component.
The business needed stuck projects unblocked immediately — but also needed a foundation that wouldn't need rebuilding in 6 months. I explored three structural approaches before committing.
Week 1
Full design audit across all files. Defined colour tokens (primitive + semantic), spacing scale, typography scale, border radius, shadow system. Documented in Figma variables.
Week 2
Built core components: buttons (all states), inputs, selects, tables, badges, modals. Immediately used to unblock the 3 highest-priority stuck projects. Overtime this week.
Week 3
Designed and documented the AI layer: suggestion bar, quick insights panel, action suggestion component, account health monitor. Defined rules for when AI is surfaced and how.
Week 4
Built dev-ready annotations, named every frame, created role-based state variants. Delivered to Angular/Django team with a component-to-code mapping document.
Tokens are the invisible skeleton. Built as Figma variables mapped to CSS custom properties — so a colour change in one place ripples through all 11 tools consistently.
This was an internal product — no A/B tests, no NPS surveys. The proof is in delivery velocity and team behaviour, not dashboard numbers.
The deferred items weren't deprioritised carelessly — each one has a written brief with the rationale for when it becomes urgent. The accessibility audit in particular is something I flagged as critical for Phase 2, not optional.