Tractics UX & IA Transformation

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

Overview

When I joined Tractics, the user experience was fragmented, with confusing navigation, inconsistent UI, and inadequate developer documentation. To solve these issues, I conducted extensive UX and IA audits, built a comprehensive and scalable design system, created an interactive prototype for user validation, and developed a practical incremental rollout plan.

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.

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.

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.

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.

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.

Results & Business Impact

Faster Design to Dev

Cut Figma time in half through improved prototyping, iteration, and dev-ready handoffs.

Reduced Developer Rework

Clear documentation and design guidelines led to a 50% drop in post-handoff rework.

Accelerated Delivery Timelines

Standardized layouts, components, and interaction patterns reduced feature delivery time by 25%.

Stronger CS Enablement

Proactive alignment and handoff boosted CS team preparedness for new feature launches.

Reflection & Lessons Learned

This transformation significantly improved my strategic leadership and UX proficiency. Balancing ambitious vision with practical, incremental execution taught me valuable lessons in cross-team collaboration, user empathy, and agile methodology.

Optional Deep-Dive Links