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

More Work Examples

Replica Places Study

Replica Design System

mySidewalk Dashboards

Studio.Replica Redesign

Replica Trends

Replica Data Library