Celonis Visual Editor

Redesigning and simplifying the component-building experience for all user levels — moving away from the code-based editor used at the time

Client
Celonis
Role
UX Designer
Time
2023
Process
Discovery → Prioritisation → Design & Test → Refine
Problem

To create a component in Studio, most components required over 20 lines of YAML to configure — a "code-like" experience that lacked visual guidance. As a result, users frequently reached out for support with specific configuration issues

Side-by-side of the old YAML code editor and the resulting chart, showing the configuration complexity
How we worked

From complexity to a plan

  1. Solution discovery — user interview & benchmarking

    To deeply understand the problem, we ran user interviews with two target users, discussing their current workflow and early low-fidelity concepts of the Visual Editor

    Two target-user persona boards: an accounting group lead in Bavaria and a data analyst in the USA, mapping demographics, goals, tools, tasks, and frustrations
  2. Prioritisation & roadmap — turning complexity into a plan

    I documented the user interaction, data format, and advanced features for each component to give an overview of their content. This enabled a discussion with the project manager and engineers to establish a timeline and make feasibility easier to see

  3. Design & test — fast iterations, real feedback

    For each prioritised feature I developed user cases and journeys, then moved quickly into user flows and information architecture. I built interactive prototypes directly in Figma — without needing developer support

    Each design iteration took less than a week from prototype to tested. I ran continuous rounds of user testing, redesigning based on what I observed until the feedback validated the hypothesis. Speed without cutting corners — the goal was to learn fast, not ship fast

  4. Test & refine — staying responsive post-launch

    We established monthly group feedback sessions with users to surface issues early and capture evolving needs. Each session produced actionable points that fed directly back into the sprint cycle — keeping the team responsive without losing focus

A user building a chart in the Celonis Visual Editor on a MacBook, with the layer configuration panel and live chart preview side by side
Visuals

The Visual Editor

The redesigned editor replaces YAML configuration with visual panels — chart layers, encodings, axes, legend, and interactions — so building a component becomes a guided, point-and-click experience

The Celonis Visual Editor interface: chart layers panel, live chart preview, and configuration options for axes, legend, and interactions
Result
Simplicity & Efficiency