Creating the Systran Design System
Building a Scalable, Accessible Design System for Systran's Product Ecosystem
React Components
Systematic Design
React Components
Systematic Design
Product Designer
Systran
Systran’s existing interface was fragmented and outdated, built on the aging Bootstrap 3 framework. Design inconsistencies across products led to a lack of visual cohesion, uneven user experiences, and high maintenance costs for development. There was an urgent need for a unified, modern design foundation that could scale across all applications and devices.
I led the creation of the Systran Design System—a comprehensive, responsive component library built in Figma and implemented in React using the MUI X framework. The system introduced a modular, atomic design structure and supported seamless developer handoff through tokens, variants, and clear documentation.
Increase in design-to-dev efficiency through reusable components, consistent tokens, and cleaner handoff between Figma and the React codebase.
Improved accessibility and usability, with all components meeting WCAG 2.2 standards—making the tools more inclusive for a global user base.
Cross-product consistency achieved across browser extensions, web apps, and admin tools—reducing user confusion and strengthening Systran’s visual identity.
To build a scalable and structured design system, I followed the principles of Atomic Design, breaking down the UI into fundamental building blocks—atoms, molecules, organisms, templates, and pages. This modular approach made the system highly scalable and easy to maintain, both in Figma and for the developers in Storybook, while preserving consistency across all Systran products.
To ensure the design system truly met user needs, I conducted user interviews with both internal users (software engineers, linguistic developers) and external users to understand their workflows and frustrations.
As the design system took shape, I facilitated usability testing sessions to validate component designs, accessibility, and responsiveness. Feedback from real users helped refine interactions, optimize visual hierarchy, and enhance overall usability. This iterative, research-driven approach ensured that the new design system was not only aesthetically modern but also intuitive, functional, and aligned with user expectations.
Atomic design was key to design system maintenance and scalability
One of the most complex and frequently used UI elements in Systran’s products was the table component. The previous implementation was rigid, inconsistent, and lacked key functionalities like sorting, filtering, and responsive behavior. It also suffered from numerous performance issues. Given the table component's critical role in displaying large datasets, I prioritized designing a flexible, accessible, and scalable table system within the new design framework.
Built using the MUI X Data Grid component, but extended with custom styling and behavior to match specific use cases.
Integrated built-in sorting, filtering, and column management to allow users to tailor data views effortlessly.
Designed adaptable layouts and incorporated inner scroll to ensure the content remained readable and interactive across various screen sizes.
We used MUI X’s Data Grid component to support advanced table functionality, allowing for the complexity and flexibility needed in our workflow
A table settings was added as a custom MUI X Data Grid component to facilitate table modifications
Managing icons was another crucial aspect of modernizing Systran’s design system. The existing icon set was fragmented, inconsistent, and difficult to maintain, leading to visual discrepancies across different products. To streamline the process and ensure consistency, we decided to upgrade to Font Awesome, which seamlessly integrated with both Figma and React.
The Font Awesome icon library selection integrated seamlessly between Figma and Storybook
To ensure a smooth developer handoff and maintainability, I established a structured Figma file organization and versioning system. A centralized design system file housed all foundational elements—colors, typography, icons, and components—while clear component variants simplified updates. I also implemented version control, logging changes to ensure alignment across teams.
For development, I leveraged Figma’s Dev Mode to provide accurate specs and integrated Storybook for live component previews. Design tokens ensured seamless design-to-code translation, while regular handoff meetings and feedback loops kept the system adaptable. This structured approach made the design system scalable, consistent, and easy to implement, streamlining collaboration between designers and developers.
Smooth design-to-code handoff was made possible through the use of Figma variants and design tokens
Emphasising accessibility from the beginning ensured the system was inclusive and usable for everyone, reinforcing that accessibility enhances the overall user experience.
Using Atomic Design principles allowed for a more flexible, scalable, and maintainable system, making it easier to iterate and expand over time.
Early and continuous collaboration with cross-functional teams, including tech leads, product managers, and developers, was essential to ensure the design system was both scalable and feasible for implementation.