< back to portfolio

<aside> 💡

Executive Summary

• Context: Neogrid’s multi-product ecosystem evolved rapidly between 2019 and 2024, leading to UI fragmentation, redundant design work, and friction in engineering handoff.
• Solution: Architected Neo UI, a centralized Figma component library and token-based system tailored for complex B2B supply chain platforms.
• Role: Product Designer.
• Core Impact: Accelerated high-fidelity prototyping velocity, standardized complex data-heavy components (data grids, filters, forms), and established clear usage guidelines for engineering alignment. </aside>

EDI dashboard made with Neo UI

1. The Challenge: UI Fragmentation at Scale

As Neogrid expanded its suite of supply chain and SaaS solutions, different product modules began developing isolated UI patterns. Without a unified design language:

• Design Inconsistency: Similar user actions (e.g., table filtering, bulk actions, status indicators) had varying visual representations across modules.
• Redundant Effort: Designers routinely rebuilt common components from scratch, while engineers spent extra cycles writing custom CSS for recurring patterns.
• Complex Data Density: B2B supply chain interfaces require high information density (large data tables, multi-step forms, complex filters). Standardizing these high-density components required careful visual hierarchy and strict interaction rules.

Table actions component

2. System Architecture & Token Strategy

Rather than building a custom system from scratch or introducing unnecessary abstraction layers, Neo UI was architected for immediate production parity with engineering.

Pragmatic Token Architecture (Ant Design Parity)

• Enterprise Framework Alignment: Adopted Ant Design as the core foundation to leverage its battle-tested B2B accessibility primitives and grid systems.
• Direct 1:1 Code Parity: Mapped Figma styles directly to Ant Design’s native seed and scale tokens (e.g., -antd-font-size-*, -antd-normal-*).
• Zero-Overhead Handoff: By intentionally avoiding custom semantic translation layers, developers can inspect tokens in Figma and apply them straight into React code without ambiguity or manual mapping.

Typography and color tokens

High-Density Component Taxonomy

• B2B Pattern Extension: Extended baseline Ant Design primitives to construct proprietary, supply-chain-specific components (high-density data grids, advanced multi-filter panels, and status-heavy tables).
• Complete State Coverage: Built robust Figma variants leveraging Auto-Layout and Properties, fully defining all edge states (Default, Hover, Active, Disabled, Loading, Error) to maintain UI integrity across complex workflows.

Button component structure