Project Overview

Tarsal users needed the ability to transform data in flight between sources and destinations, a critical feature offered by competitors but through complex scripting interfaces that required coding knowledge. As the lead product designer, I created an intuitive, visual transformation builder that enabled users to modify their data without writing a single line of code, maintaining Tarsal’s core value proposition of simplicity.

The Challenge

When assessing the product roadmap, we identified a critical gap:

• Users needed to transform their data during transit between systems
• Competing products required users to write complex scripts or code
• Adding this functionality risked compromising Tarsal’s signature ease-of-use
• Technical users expected power and flexibility, while non-technical users needed simplicity
• The solution needed to be testable in real-time for user confidence

My Approach

Discovery & Research

Through interviews with SMEs and stakeholders, I identified:

• The most common transformation operations users needed to perform
• Pain points in competitors’ scripting-based approaches
• Technical constraints that would impact implementation

Design Process

1. Problem Definition: Worked with stakeholders to clearly articulate transformation requirements
2. Conceptual Design: Explored various approaches, ultimately selecting a node-based, vertical, step-by-step visual builder
3. Wireframing: Created medium-fidelity mockups of the transformation flow interface. Given the existence of our design system/library, I could skip true wire-frames and move to medium/high fidelity screen designs quickly.
4. Technical Collaboration: Worked closely with engineers to ensure feasibility while pushing for the best user experience.
5. Visual Design: Final tweaks and design polish prior to validation and hand-off
6. Validation: Validated designs with SMEs and customers to ensure they met real-world needs

The Solution

The redesigned transformation interface offers:

Intuitive Visual Builder

• Simplified Flow Visualization: Clear input and output nodes showing data’s path
• Step-by-Step Configuration: Each transformation is represented as a visual node in the flow
• Operation Library: Common transformations (Copy, Regex, Search/Replace, etc.) available as drag-and-drop components
• Contextual Configuration: When selecting a transformation, users see only relevant options for that operation

Real-Time Testing

• Sample Data Loading: Multiple ways to load test data (pre-populated samples, uploads, or live capture)
• Visual Simulation: Side-by-side comparison showing exactly how data changes through each transformation step
• Color-Coded Changes: Visual indicators (green, yellow, red) showing additions, modifications, and deletions
• Immediate Feedback: “Simulate Step” button to preview changes before committing them

Progressive Disclosure

• Essential Operations First: Most common transformations prominently displayed
• Advanced Options Hidden: Complex options only appear when needed
• Contextual Help: Clear descriptions of what each transformation does

Key Improvements

From Code to Visual

The most significant improvement was eliminating the need for coding:

• Users can now perform complex operations through a visual interface
• Each transformation type has a purpose-built interface optimized for its function
• Real-time simulation shows exactly what’s happening to the data

Reducing Cognitive Load

• Breaking down complex transformations into discrete, understandable steps
• Providing immediate visual feedback on the effects of each operation
• Using consistent patterns across different transformation types
• Offering comprehensive preview capabilities to build user confidence

Maintaining Simplicity

Despite adding significant functionality, the design preserves Tarsal’s simplicity by:

• Using familiar UI patterns consistent with the rest of the product
• Focusing the interface on one operation at a time
• Providing clear visual cues about data flow direction
• Enabling both simple one-step and complex multi-step transformations

Results & Impact

Although formal metrics weren’t collected, user feedback indicated that the transformation feature:

• Significantly expanded Tarsal’s capability without increasing complexity
• Reduced the learning curve compared to competitors’ scripting approaches
• Enabled non-technical users to perform operations previously requiring developer assistance
• Positioned the product more competitively against alternatives offering similar functionality
• Created a clear differentiation in the market through superior user experience

Lessons Learned

This project reinforced several key product design principles:

1. Progressive Disclosure Works: Hiding complexity until needed keeps interfaces approachable
2. Visual Feedback Builds Confidence: Showing users exactly what will happen before they commit reduces anxiety
3. Consistency Reduces Learning: Leveraging existing patterns from the product minimized the learning curve
4. Testing is Essential: Building in real-time testing capabilities was critical for user adoption

Conclusion

The Tarsal Transformations redesign demonstrates how thoughtful UX design can simplify inherently complex operations. By creating an intuitive, visual approach to data transformation, we expanded the product’s capabilities while maintaining its core value proposition of simplicity. This project exemplifies my approach to product design: finding the balance between power and simplicity while always prioritizing the user’s needs and capabilities.