Project Overview

When I took over Naluri's Design System, it lacked structure and was poorly maintained. It used outdated style guides that did not align with modern UI/UX best practices. Accessibility was completely disregarded for users. Most developers avoided it, and those who did use it had to apply manual overwrites due to inconsistencies.

There wasn't even a properly published Storybook. While it was technically hosted, no one knew the URL to access it, making it effectively useless. Documentation was non-existent, which led to confusion and inconsistency across the frontend codebase.

My goal was to transform it into a reliable, scalable, and well-documented system that developers could confidently use to build consistent, accessible, and high-quality UIs.

Key Improvements

• Rebuilt the design system with structured, WCAG-compliant reusable components, ensuring consistency and scalability.
• Created comprehensive documentation to ease integrations, standardize usage, and reduce inconsistencies across teams.
• Introduced accessibility testing to meet WCAG standards and conducted live simulations to highlight its importance company-wide.
• Worked with designers to align the design system with their latest style guide and adapt to the product’s evolving design language.
• Implemented automated CI/CD pipelines to uphold code quality, ensure reliable versioning, and streamline npm publishing.
• Republished Storybook, ensured it was properly hosted, and made it easily accessible to all developers.

Outcome

The revamped Design System has significantly improved development efficiency and UI consistency. Developers now actively use it without requiring manual overwrites, and new features are being released faster with standardized components. The published Storybook and comprehensive documentation have ensured easy adoption across teams.

The Design System continues to be actively used by developers, designers, and product owners. It has also been showcased to Naluri's Board of Directors and investors to highlight its role in improving development speed and enhancing inclusivity through accessibility for wider audiences.

Tools & Technologies:

• Development: React, TypeScript
• Testing: Storybook
• Extras: NPM package, Backward Compatibility, Developer Support