Systran: Cross-product Navigation Audit & Design System Creation
Establishing a scalable UX foundation across products and teams
/User Journeys/
/React components/
/User Journeys/
/React components/
Systran offers a suite of AI-powered translation tools used by enterprise clients across industries. Over time, individual products had evolved with inconsistent navigation, styling, and interaction patterns, resulting in friction for both users and developers.
As part of a broader UX modernization effort, I led a cross-product navigation audit and co-created SYSTRAN’s first React-based design system, enabling a more unified and efficient design approach across platforms.
Establish a unified navigation framework and reusable component system to streamline development across Systran products, while improving user consistency and efficiency. As Product Designer, I led the design system initiative and navigation review — bridging developer needs with enterprise-grade UX across tools.
Timeline: 5 months (ongoing iterations)
Myself (Product Designer), 1 PM, 5 full-stack devs
Systran's interface landscape had grown organically across different engineering teams, leading to:
Inconsistent navigation patterns between products
Redundant UI components and developer friction from maintaining bespoke elements
User confusion moving between tools (e.g., translation console vs. translation resource manager)
There was a clear need for alignment, reusability, and a shared language between design and development.
Before: Users found much of the UX/UI across the product ecosystem to be confusing, with multiple entry points, and a lack of information hierarchy.
To understand pain points and build buy-in, I conducted research through internal interviews and cross-team workshops.
This research helped identify common themes: a desire for predictable navigation, configurable table views, and UI components that reflect complex data logic, especially in terminology, models, and translation history.
Early mappings of information architecture and user insights grouped by product/pain point.
The product team and I laid out a two-part strategy:
Our goal was to streamline the experience for users, while reducing friction and redundancy for developers building SYSTRAN’s future-facing tools.
I began by auditing navigation flows across 5 core tools. I mapped inconsistencies, duplicated menus, and places where users lost context when switching views.From there, I proposed a standardised layout pattern with persistent top-level navigation, breadcrumb support, and contextual tool panels. These were shared as Figma templates, then discussed and iterated with developers and QA teams.
In parallel, I worked with frontend engineers to create a reusable component library in React, using MUI as the foundation. We focused early on complex data patterns, especially those used in translation resource databases and admin statistics.
Using MUI X DataGrid, we implemented advanced features like sortable columns, inline actions, row selection, and expandable cells — all while maintaining WCAG 2.2 accessibility and i18n support. Components were documented and demoed live in Storybook.
Atomic design was key to design system maintenance and scalability
We rolled out a beta version of the layout and component system across two internal tools, and gathered feedback from:
What worked:
Developers appreciated having a clear structure and shared styling rules
Product teams could iterate faster with modular, ready-to-use table components
Users noticed improved consistency in navigation, especially when switching contexts
What we refined:
Added state-handling patterns (loading, error, empty) to all key components
Tuned table density options for power users handling large datasets
Improved the responsiveness of layout templates for heavy data tables.
Established consistent top nav with product-level switching, session persistence, and contextual side panels.
Modular component library using MUI, including buttons, forms, dialogs, tabs, tables, and status indicators — all themed to match Systran's brand.
Built and deployed reusable table patterns for high-density, feature-rich data (with sorting, filtering, inline edit, and batch actions).
Each component was documented in Storybook with usage guidelines, props, and interaction examples to support adoption across teams.
Account information was reorganised, simplifying user flows, removing duplicated entry points, and providing a clearer, hierarchical display of information.
Certain information previously buried in complex table expands was given dedicated pages, making it easier for users to view and manage their tasks.
A table settings was added as a custom MUI X Data Grid component to facilitate table modifications
Improved developer onboarding and handoff across 5 active products
Reduced duplicate UI code across frontend teams by an estimated 30%
Set the foundation for product-wide navigation and design consistency
This project challenged me to design for scalability across teams and tools — where developer efficiency, product consistency, and complex enterprise UX all had to align. Key lessons:
Reusable components only succeed if devs want to use them — clear APIs, good docs, and fast theming were key.
Early alignment across engineering, support, and product teams helped ensure the design system was useful, not just elegant.
Tools like MUI X DataGrid helped us embrace real-world complexity instead of hiding it — especially for dense, enterprise-focused data.
