Platform Rebuild
The UX Master Repo: Scaling Experience Coherence via AI-Driven Infrastructure.
01 Project Brief
Goal
Empower the developers to visually map and transform data flawlessly by reducing learning curve and cognitive load while maintaining the power of the DataWeave language.
Users
The users of DataWeave and Anypoint Code Builder generally fall into two distinct categories: Novices users who may not have a formal coding background at all, working in roles like Systems Administrators; And Experts who hold roles such as Integration Architects and Engineering Leaders, and they deal with highly complex, enterprise-level transformations.
Team
UX Team - Me 😎;
Engineering Team - 7 engineers;
Product Management Team - 2 product managers;
Technical Writing Team - 2 technical writers
Skills
User Research
User Experience Design
Motion Design
Visual Design
Before
The legacy UI is cramped and difficult to navigate, and critical features such as validation and testing is missing.
After
The new transformation experience allows for intuitive drag-and-drop mapping, real-time validation, and Agentic assistance.
02 UX Approach
A user-centered design process was followed to ensure the platform met the needs of both novice and expert developers. From discovery to delivery, we iterated based on continuous feedback.
03 Highlights
Intuitive Drag-and-Drop Functionality
"To do anything complex requires using dataweave. I have to crack open google to look up some esoteric function for dataweave. Why does this require me to learn a new language - It is a stumbling block."
The new visual mapper allows users to simply drag an input field and drop it onto an output field (or a function) to instantly generate the underlying DataWeave code. It boosts productivity and meanwhile educates novice users with well-crafted DataWeave codes
A "Playground-Like" Testing Experience
"Documentation doesn’t have enough examples. If new user, one or two examples doesn’t really help, and examples are basic ones, i’ll need higher level hands-on practice."
A dedicated Preview panel allows developers to easily tinker, test functions, and see instant output with sample data without the heavy overhead of running a full debug session or setting up a complex project just to practice
Generative AI Capabilities
The new experience integrates Generative AI, allowing users to automatically generate complex DataWeave transformations by simply providing sample input/output data and natural language instructions. The AI can auto-map fields, explain the generated scripts, and provide quick fixes for errors, drastically speeding up development time.
04 Closing Notes
Impact
Significant reduction in manual coding and configuration errors led to much faster project completion.
Generated scripts are more accurate and correct, reducing the need for manual corrections.
NPS scores among developers increased by a quarter after adopting the new canvas-based editor.
Takeaways
Successfully transformed a complex and challenging coding exercise into a intuitive, productive and joyful experience without compromising on functionality or performance.
Leveraged close collaboration across design, product, and engineering to translate technical complexity into a clear, no-code user experience.
Learned to prioritize ruthlessly in high-pressure environments, focusing on what delivered the most value within tight timelines.