PagerDuty Context Variables [developer tools][automation][interaction design]

Automation jobs in PagerDuty could only receive two pieces of context about the incident they were responding to. I designed a variable picker built directly into the script editor allowing on-call engineers to browse, search, and insert fields regarding the incident without leaving their workflow.

Impact:11x increase in actions created with context variables (18 → 198 after one month) · Increased rate of Rundeck Action triggers

Role:Product Design, UX Research, Design Facilitation, Competitive Analysis

Collaborators:Sean Noble (Product Manager), Mat Trudel (Lead Engineer), Jon Grieman (Engineering Manager)

Automation Action script editor with available context variables
Automation Action script editor with available context variables

Why

Automation actions could only receive two pieces of context about the incident they were responding to and users had no way to discover or insert variables without looking elsewhere in the product.

How

A variable picker built directly into the code editor enabling authors to browse, search, and insert incident data without leaving their workflow.

Impact

11x increase in actions created with context variables (18198 after one month) · Increased rate of Rundeck Action triggers

Automation jobs could run scripts, pull logs, restart services — but they only knew two things about the incident they were responding to: the incident id and the user id.

Creating an automation action script was limited to 'incident.id' and 'user.id' even though a response shared much more data
Creating an automation action script was limited to 'incident.id' and 'user.id' even though a response shared much more data

The design scope was focused on a single interaction after the script editor opens and before the action is saved.

Flow diagram exploring multiple UI options for variable discovery and entry
Flow diagram exploring multiple UI options for variable discovery and entry

I mapped each approach to existing component patterns in an attempt to minimize engineering work, although existing patterns were unable to accomodate the user experience required.

Analysis of existing components
Analysis of existing components

I researched how developers handle variable insertion in code editors through autocomplete, inline suggestion, and token UI patterns.

Research across developer tools to design for familiar engineer mental models.
Research across developer tools to design for familiar engineer mental models.

We explored how to render, type, and insert context variables through list layouts, inline autocomplete, and JSON picker style components.

Variable picker explorations
Variable picker explorations
Drag-and-drop explorations
Drag-and-drop explorations

I prototyped insertion methods to discover which felt most natural for engineers already inside a script editor, however these interactions felt too clunky and required over-engineering the scope.

The prototypes did point towards the same answer: keep users in the editor, and make variables discoverable within the editor UI.

Working with the engineering team and through user testing, a split-panel design began to feel right: the script editor on the left, a browsable variable list on the right with a toggle between list and raw JSON views.

Split-panel script layout
Split-panel script layout

The variable list supports hover preview and one-click copy while the JSON view exposes the full alert payload as structured sample data.

Default listing, hover preview revealing the variable's value, and copy-to-clipboard confirmation.
Default listing, hover preview revealing the variable's value, and copy-to-clipboard confirmation.

Context variables written as a VarSub Pattern language to be used across the product & design system
Context variables written as a VarSub Pattern language to be used across the product & design system

Variables inserted into the script are highlighted inline and are visually distinct from surrounding code so users always know what’s runtime data.

Final script editor with showing context variables highlighted inline
Final script editor with showing context variables highlighted inline

The final design embedded directly into PagerDuty’s existing action creation flow — no new pages, no context switching.

"Create an Automation Action" wizard with the script editor, inline highlighted context variables, and the "Available variables" panel
"Create an Automation Action" wizard with the script editor, inline highlighted context variables, and the "Available variables" panel

Automated actions expanded from surfacing only two incident related values to receiving the full alert payload.

”Of all the projects this year, Omar’s work on the context variables project really stands out. There was a lot of subtle design touches to that project that really elevated it, and Omar did a great job of presenting the changes and advocating for them in a way that motivated the rest of the team to step up.”

Mat Trudel · Software Engineer IV