Brief
By mid-2018, Neogrid’s product portfolio—built since 1999 through in-house development and company acquisitions—suffered from visual and technical inconsistency, with little standardization and fragmentation across solutions. Initially tailored almost individually for each client, the products were developed by isolated teams using different technologies and focusing on specific client needs. As a result, despite their quality and relevance, the products lacked a cohesive identity, with only a few visual elements like colors and logos offering any sense of unity.
My contribution
I joined the project right at the beginning, shortly after the selection of the base design system (Ant Design) and the start of design critiques. I led many of these sessions and helped refine the design system governance, streamlining the process for updating, creating, and documenting components, as well as handing them off to the DevOps team. I also created dozens of components myself, ensuring alignment with both design and development standards. Since the project began during Figma’s early days, I adapted many of these components to take advantage of new features such as variants, micro-interactions, interactive components, variables, and conditional properties.
The Impact
1. Accelerated Product Development
⚡ Faster UI development with reusable React components
⚡ Reduction in design inconsistencies across 20+ supply chain products
⚡ Fewer redundant design files by consolidating patterns
⚡ Reduction in design inconsistencies across 20+ supply chain products
⚡ Fewer redundant design files by consolidating patterns
2. Improved Cross-Team Collaboration
🔄 100+ components documented in ZeroHeight, reducing tribal knowledge
🔄 Unified 5+ acquired companies under one design language
🔄 Unified 5+ acquired companies under one design language
3. Business & User Impact
📈 Drop in user training time thanks to intuitive, consistent patterns
📈 Devs reported easier maintenance
📈 Devs reported easier maintenance
4. Technical Foundations
🧠 Atomic Design adoption reduced component duplication
🧠 Ant Design customization saved 6+ months of build time
🧠 Figma Variables + Auto Layout enabled rapid theme switching
🧠 Ant Design customization saved 6+ months of build time
🧠 Figma Variables + Auto Layout enabled rapid theme switching
Key Takeaway:
Neo UI didn’t just standardize components—it became the operational backbone for supply chain innovation, proving that design systems are scalability multipliers.
Neo UI didn’t just standardize components—it became the operational backbone for supply chain innovation, proving that design systems are scalability multipliers.
Building variants and Auto Layout configurations for Big Number
Building a Design System
The challenge then became the creation of a Design System to bring consistency, scalability, and a unified visual and user experience—both for existing and new products. This effort would span all aspects of the products, from data science and back-end to the user-facing layers.
At the time, the chosen path was to develop what would become Neo UI, by customizing an existing market solution: Ant Design. This is a comprehensive Design System, covering everything from the UI kit to the React component framework.
Popconfirm dialog box variants
Kickoff: Atomic Design, Guidelines, Tokens, and Core Components
The project began with a tight deadline, and the small initial team took the first steps toward building a basic UI guideline—covering colors, design tokens, fonts, and spacing—using Ant Design’s UI Kit as a foundation.
Despite starting with a ready-made UI Kit and a robust React framework, there was still significant work required to adapt Ant Design’s generic approach to Neogrid’s specific needs.
These components were built in Figma using variables, following Atomic Design principles—always leveraging smaller components to construct larger ones.
Color tokens
WCAG legibility gold standards
Typography tokens
Neo UI design tokens samples
The Process
The process typically began with either an internal team request (e.g., a missing or undefined component) or an external one (e.g., a specific type of chart requested by a Product Owner).
From there, the workflow followed these steps:
1. Research – Investigating best practices, existing solutions, and user needs.
2. Semantic Panel & Brainstorm – Defining concepts, gathering references, and exploring ideas.
3. Preliminary Version – Creating an initial draft based on discussions.
4. Critique Session – Presenting the proposal for feedback and refinement.
5. Architecture & Front-End Validation – Reviewing feasibility and technical alignment with the development team.
6. Approval & Variations – Finalizing the component, defining its states and adaptations.
7. Documentation – Detailing usage guidelines for designers and developers.
8. Dev Handoff & Implementation – Ensuring smooth integration into the codebase.
This structured yet flexible approach ensured that every component was well-researched, validated, and ready for development.
Neo UI DS workflow
The Design Critique Ceremony
Neo UI has been a collaborative effort involving numerous professionals since 2020—and it’s still evolving. To accelerate the modernization of its solutions, the company expanded its UX design team, enabling parallel work across multiple products. This meant the Design System had to be refined alongside interface development, all while running discoveries and maintaining constant collaboration between developers, Product Owners (POs), designers, and clients.
One key practice to streamline this process was the introduction of Design Critique ceremonies. These sessions brought the team together to review proposed solutions and components, debating whether to include, modify, or discard them based on collective feedback.
How It Worked:
• A dedicated Figma board organized components into sections:
◦ Under Discussion – New proposals awaiting feedback.
◦ Approved – Finalized and ready for implementation.
◦ Blocked – Pending revisions or technical constraints.
◦ Rejected – Discarded ideas (with documented reasoning).
• If multiple options existed, the team voted to decide.
• Initially, critiques were daily, hour-long meetings.
• As the Design System matured, the frequency gradually reduced.
This structured yet flexible approach ensured alignment, efficiency, and consistency—turning individual contributions into a unified system.
Avatar with badge dots variants
Outcomes: Component Library & Documentation
Components are built in Figma, leveraging features like Auto Layout and variables to streamline daily workflows. The full documentation can be explored on Zero Height.
Given the highly collaborative nature of Neo UI’s development—where individual contributions often blend into collective progress—I’d like to highlight some of my key contributions:
• Active participation in early design critiques, providing insights and proposals.
• Leading the creation and refinement of variables for consistency and scalability.
• Adapting components to Auto Layout for better responsiveness and efficiency.
• Establishing a versioning system based on Semantic Versioning 2.0, ensuring clear tracking of updates.
Today, most products have adopted Neo UI, significantly improving user experience alignment and development speed. However, the work continues—both in promoting a Design System culture and evolving the system itself to meet market demands and product innovations.
Neo UI examples: Component previews in Figma
