Pipeline IDE

Problem

Redpanda Connect pipelines were expressed as YAML, but the people building workflows increasingly included both engineers and people without an engineering background. We needed a way to make the structure of a pipeline understandable without taking away the direct control experienced builders expected.

I brought together over a hundred pieces of internal and external feedback, including conversations with solutions engineers, customer success, and people supporting the sales and customer journey. A recurring design goal was to expose problems earlier and make the next action understandable.

Key decisions

• Pair the IDE with a visual structure. I used a directory-tree-like view to make the required input and output visible, with placeholders and add actions indicating what remained to be configured. The YAML editor stayed available for direct work.
• Make the complete flow usable from the keyboard. I designed command and slash menus and preserved focus through the setup dialogs and editor. The Noya founder's use of VoiceOver had changed how I thought about the first focus target and the sequence of actions.
• Keep documentation beside the component. I put a documentation action on each leaf in the tree, revealed on hover, so people could reach the relevant component docs from the pipeline they were configuring.