
Tractics UX & IA Transformation
Strategically transforming user experience through exhaustive audits, IA refinement, and a scalable design system.

The Challenge
Tractics had grown quickly, but the platform’s UI and UX were inconsistent and fragmented. Screens were designed in isolation, patterns varied across features, and the lack of a system made every new release slower and riskier. Customer success teams were left without clear guidance on how to support new functionality, and users often faced friction when navigating the product. The challenge was to bring order, consistency, and scalability to the product while improving speed of delivery and overall usability.
Role & Responsibilities
As product design lead, JT drove the effort to standardize Tractics’ interface and experience. This work included auditing the platform, defining reusable components, and creating new UX patterns that could scale across modules. JT partnered closely with product and engineering to align on requirements and rollout strategy, while also enabling the customer success team with clearer, more consistent flows to support training and adoption. Beyond the design system itself, JT established new standards for layouts, tables, and interactions, ensuring the product could evolve faster and with less rework.
Problem Identification
The initial audits revealed significant UX and IA issues:
-
Complex and Confusing Navigation: Users encountered dead ends and orphaned pages.
-
Inconsistent User Interface: Lack of standardized components, typography, and colors.
-
Poor Developer Documentation: Dev teams had minimal interaction guidance, leading to constant rework and ambiguity.

Left: Full IA Audit • Right: Full UI/UX Audit
Deep Audits & Strategic Insights
Conducted thorough audits to comprehensively document UX/UI gaps:
-
Performed exhaustive UX page-by-page audits (Figma), identifying usability flaws.
-
Created a detailed IA map (FigJam), visualizing every interaction.
-
Developed a strategic slide deck summarizing key insights and proposed solutions.

Example Slide from the Tractics Audit Slide Deck
Design System Development
Based on audit findings, I developed a robust, scalable design system:
-
Leveraged and customized the MUI library to align with Tractics' brand identity.
-
Created detailed components, typography rules, color palettes, and interaction states.
-
Enhanced developer experience through detailed documentation and Figma Dev Mode.

Example Tractics Design System
Interactive Prototype & User Validation
Created an ambitious, site-wide clickable prototype:
-
Enabled comprehensive navigation and interaction testing.
-
Integrated responsive design with components optimized for web and mobile.
-
Supported light/dark mode through advanced Figma variables.


Tractics Prototype in Action
Incremental Rollout Strategy
Recognizing resource constraints, I landed on a practical phased rollout:
-
Initial updates (typography, colors, icons)
-
Basic components and layout updates
-
Comprehensive navigation and interaction enhancements
-
This approach ensured minimal disruption to ongoing feature development and customer support activities.

Example Strategy & Execution Slide Deck
Reflections & Lessons Learned
This work went beyond creating a design system; it standardized components and UX patterns across the platform. Consistency in layouts, tables, and interactions reduced ambiguity, sped up delivery, and improved usability.
Key lessons included the value of incremental rollouts and the importance of focusing on interaction patterns, not just visuals. Just as critical, early alignment with product and customer success ensured smoother launches and stronger internal support for new features.
Optional Deep-Dive Links
Results Delivered
Accelerated feature delivery by 25% with standardized components and guidelines
Reduced design-to-development time by up to 50% through improved prototyping, iteration, and dev-ready handoffs
Improved cross-team enablement by aligning CS and engineering for smoother launches