Automations 3.0

Boosted adoption by 50%+ and increased invokes,

all without backend changes.

Automations 3.0

Boosted adoption by 50%+ and increased invokes, all without backend changes.

What is Courier Automations?

Courier is a platform designed to help businesses manage and deliver notifications across multiple channels—like email, SMS, push, and chat—all from one unified place. Automations is the visual code builder to manage complex routing logic. This can include digest, or batching of messages.

The problem that led to a redesign

As usage grew, users began to hit a node limit. A quick investigation found users were using multiple conditional ‘if’ nodes to simulate what a 'switch' node would actually do. A hack.

To solve this, I wanted to introduce an actual 'switch' node. Unfortunately, our flows had a top-down flow, and this particular node requires a left-to-right flow.

Customer feedback, our expertise, and data analysis helped make the decision to redesign Automations. I also saw this as a great opportunity to improve performance, expand on enterprise features. To me, a redesign should not only enhance UX but also add meaningful business value.

Courier’s automations offered a visual builder for managing notifications. As usage grew, users began to hit a node limit. A quick investigation found users were using multiple conditional ‘if’ nodes to handle logic.

To solve this, I wanted to introduce a 'switch' node. Unfortunately, our flows had a top-down flow, and this particular node requires a left-to-right flow.

Customer feedback, our expertise, and data analysis helped make the decision to redesign Automations. I also saw this as a great opportunity to improve performance, expand on enterprise features, and add a new ‘get profile’ node. To me, a redesign should not only enhance UX but also add meaningful business value.

❌ Clients connected numerous "if" nodes horizontally within a vertical sequence, taking up considerable memory and space.

✅ A switch node can handle a long list of cases, and connect with other switch nodes. This saves memory and makes it easier to understand its flow.

Automations 3.0

Getting started

Before designing I needed to assemble a team, and do research.

Organizing the project

I broke the project into three parts tracked in Linear—Canvas, Node, and Debugger—with each project having it's own set of issues (tickets). Although the Debugger was planned as a separate project, we made design choices that would make integrating it smoother down the line, ensuring we didn't design ourselves into a corner. We held weekly planning meetings, collaborated via Slack, and held quick huddles when needed, keeping everything on track for the cycle (sprint).

Team composition

The project required a team of senior resources to ensure a strong foundation was set and migration was not an issue. I consulted with our CTO on a weekly basis to ensure resources aligned and timeframes were met.

Product Designer

UI, UX, PM

Maryam

Product Designer

Brandon

Sr Engineer

Frontend

Drew

Staff Engineer

Backend. Architecture

User and data research

There was some work the eng team had to do regardless of research. Remove bloat, upgrade ReactFlow, create new repos, etc. I allocated a week and a half to gathering data and user interviews, to later be reviewed by me and the CTO.

We identified around 12 users and scheduled interviews with them Maryam and myself split the interviews. The results were not surprising, but they solidified we were doing the right thing.

Too many panels

Nodes are too big

What is this referencing?

Why does the node have specific fields?

Automations 2.0

The positives ✅

It was extremely powerful.

It feels smooth to drag nodes around.

"I like that we can override with JSON".

The negatives ❌

Hard to know where to focus.

"Everything is too big. I can't see my boxes (nodes)."

Unclear where to start. "Do I need a Trigger?"

No indication what node is selected.

Unclear why some information is on the nodes and others on the panel.

Afraid to publish.

No version history.

Hard to read purple on black.

The dashed animated connectors made it feel something was wrong.

"Why is this (automations) in dark mode? The rest of the app is white."

No way to identify where there is a problem.

"I don't know what others changes when I am not here."

Average Automations by workspace

Average amount of nodes on an Automation

I started with the anatomy of a node

To declutter the canvas further and avoid confusion, I focused on minimizing each node and organizing ALL details in the right panel. Having it on both felt a bit crazy.

• Nodes would now use a natural language to make the flow human-readable.
• Nodes would have dynamically changing text depending on what is configured.
• Different states for all nodes.
• Node iconography reacts to states.

Node foundation

Empty state

Configured node w dynamic text

Selected node

Invalid node

Introduced the switch node!

The whole reason we are doing this can now follow the new established patterns. It will grow vertically depending on how many cases are added to the switch. This introduces more power to our users. They can use 'if' nodes alongside 'switch' nodes while having more 'accurate' structure to their flow.

It's also visually unique, making it easier to identify at-a-glance without breaking patterns.

Switch node!!

Automations 3.0

The design

Nodes, frames, it all had to be redesigned.

I started with the anatomy of a node

To declutter the canvas further and avoid confusion, I focused on minimizing each node and organizing ALL details in the right panel. Having it on both felt a bit crazy.

•

Human-readable: Nodes would now use a natural language to make the flow human-readable.

•

Dynamic text: Nodes would have dynamically changing text depending on what is configured.

•

State management: Nodes would have states for configured, non-configured, invalid.

•

Validation: Added validation to nodes. This would check for syntax and empty fields.

First attempt at a new node

To declutter the canvas further and avoid confusion, I focused on minimizing each node and organizing ALL details in the right panel. Having it on both felt a bit crazy.

Didn't work

Too "in your face". Overwhelming color.

Overwhelming color.

Stacking fields could make the node appear similar to a switch node.

Stacking was too similiar to a switch.

The final node design

To declutter the canvas further and avoid confusion, I focused on minimizing each node and organizing ALL details in the right panel. Having it on both felt a bit crazy.

Node foundation

Empty state

Configured node w dynamic text

Selected node

Invalid node

Used the foundation for the switch node

It's also visually unique, making it easier to identify at-a-glance without breaking patterns.

Switch node!!

Simplified the interface

To improve usability and create a cohesive look with the rest of Courier’s platform, I started by clearing out the visual clutter and focusing on simplicity. It also would follow our Heron Design System patterns.

Less panels, more air

Trigger node is the starting point

Canvas controls, auto-arrange, and shortcuts

Contextual panel

Less panels, more air

Trigger node is the starting point

Canvas controls, auto-arrange, and shortcuts

Contextual panel

Removed the left panel

Eliminated the drag-and-drop panel, allowing users to right-click to add nodes., or pressing + at the top. This helped bring the focus to the flow.

A fixed trigger node

Created a fixed trigger node on the canvas to serve as a starting point, making it immediately clear how to begin. It cannot be deleted.

Canvas controls

Enabled zoom features and shortcuts accessible from the top bar. We also added buttons to auto-arrange your nodes.

Version history

Load as draft and View diff

QOL improvements

Autosave: Every change is saved automatically, giving users peace of mind while they work.

Version History and Draft Mode: Created a versioning system where each publish event is saved as a new version. Users can pull any version into a draft, allowing them to explore changes without risking live workflows.

Diffs: Users can now view data before and after publishing in a standard diff.

View automation diff

Automations 3.0

The outcome

A huge success!

Results

We had no downtime, made it opt-in at first, and we're slowing rolling out the final migration. Since the update our issues have gone down. This freed up resources to work on new features like our new Debugger for Automations tool.

-95% CS issues

UI bug related, and faq's.

+200% workspace creation

From 4 to 12 average automations

+ 350% invokes per sec

From 4 to 18