RudderStack
About
Making event pipelines understandable.
An event passes through several systems before it becomes useful. The design brings those relationships into view, then gives engineers the detail they need to configure a connection, inspect a transformation, and understand a failure.
Understand the work
A connection was only the beginning.
The research followed the work behind a data pipeline: defining events, updating SDKs, extracting and transforming data, checking it in QA, and monitoring the result. A single question—did the expected event arrive?—could send an engineer between code, infrastructure, queries, and logs.
The documented problems were expensive setup, limited real-time visibility, sensitive-data handling, and fragmented debugging. The interface needed to connect these tasks. Its overview would explain where data went; focused tools would reveal what happened to an individual event along the way.
Choose a representation
Show the pipeline at a glance.
Five directions explored how to represent the system: Circuit board, Kanban board, Revolve, Workflow builder, and Card connect. Card connect became the chosen direction for its clarity, scalability, and lower implementation risk. Sources and destinations remain recognizable objects, with their relationships drawn between them.
That choice set a useful boundary. The overview shows the structure of the pipeline; transformation work has its own space. The screen can explain which tools are connected without displaying every field mapping and operation inside every connection.
Follow the work.
Explore the source-to-destination model, open Hash PII in Transformations, and inspect its sample input and output. Interactive reconstruction with local data.
Configure with control
Make the mapping visible. Keep the code accessible.
The mapping screen places source fields and destination fields in parallel columns. Each row expresses a concrete relationship, while template expressions preserve the shape of the underlying data. Engineers can build and inspect the mapping one field at a time.
Use JSON provides another way into the same work. Familiar terminology and access to raw code carry through to transformations, where JavaScript sits beside sample events and output. The visual interface offers orientation while keeping the data model close to the task.
Inspect the evidence
A status needs an explanation.
The transformation editor brings code, sample input, output, and logs together. Run makes the result available beside the operation that produced it, so a change can be examined through the event itself.
Live Events extends that comparison into inspection. Before-and-after information, delivery states, and a selected JSON payload share the same workspace. A dropped event or an instance-not-found failure becomes something an engineer can investigate in context. Monitor provides the broader view, combining delivery trends with events, connections, and properties.
Revisit the work
The detail matters when you can use it.
The interactive exhibit is a 2026 reconstruction of the original product screens. It makes the connection flow, field mapping, transformation testing, and event inspection usable with local sample data. Additional setup views, the transformation library, and interaction refinements were developed for this reconstruction.
The principle carries across both versions: a clear overview is most useful when it leads to inspectable detail. The reconstruction lets that relationship be experienced directly, from the first connection to the event behind a result.
Follow an event through the system.
Explore the RudderStack demo ↗A current, interactive reconstruction of the original screens, with additional setup views and local sample behavior.
Product design by Xiang Gao. Original brand and landing-page work involved an external agency, hired and directed by Xiang.