Automations Relaunch
I redesigned Mailjet’s Automation Builder to make complex marketing journeys visually clear, consistent, and scalable — under tight timelines and without a dedicated UX research phase.
The redesign stabilized usability, aligned the tool with Mailjet’s design ecosystem, reduced time-to-build, and increased internal confidence across product + engineering.
Early analytics suggested a meaningful lift in automation adoption within the first quarter.
Timeline:
Q1
2025
-
Q2
2025
Role:
Senior Product Designer
Services:
Visual Workflow Redesign, Feature Expansion
Mailjet’s Email Automation (documented here:
👉 https://documentation.mailjet.com/hc/en-us/articles/35021196504219-Email-Automation)
allows users to create event-driven journeys using triggers, delays, conditions, and actions.
When I joined Milestone One:
scope was locked
timelines were tight
no research had been conducted
three prior engineering owners left drift in the UI
The legacy builder suffered from:
flat boxes with no hierarchy
inconsistent spacing + shadows
hidden branching inside dropdowns
locked editing for live flows
a constant fear of “breaking something”
My job was not to reinvent functionality — it was to restore trust through visual clarity and predictable structure.
If users can’t scan it, they can’t trust it.
How I grounded decisions without a new research cycle.
1️⃣ Adjacent Research — Sinch Chatbot Workflow Builder
Provided validated insights on branching, orientation, and step-based logic.
2️⃣ Mailjet Personas & User Stories
Guided labeling, editing expectations, and clarity for non-technical users.
3️⃣ Scenario Blueprinting (~80% of real use cases)
Blueprinted welcome, nurture, re-engagement, cart/browse abandonment, post-purchase, and lifecycle journeys.
Blueprinting exposed system-wide needs:
horizontal expansion
repeated delay/condition nodes
mixed journeys
orientation problems → led directly to the minimap
⭐ Blueprints → Pre-Built Templates
Blueprints evolved into the foundation of Mailjet’s pre-built automation templates used for onboarding and rapid build.
4️⃣ Competitive Analysis
Benchmarked hierarchy, branching clarity, minimaps, and templates across 7+ automation leaders.
5️⃣ Scrappy Internal Validation
Conducted fast, realistic validation sessions with internal marketers, lifecycle teams, and customer-facing staff who matched our target persona.
“Validation doesn’t have to be expensive — it just has to be real.”
Distinct node types, modular spacing, consistent flow direction, readable labels, and clearer pathing.
The Automations builder needed predictable behavior, not visual embellishment.
Working within our new React-flow-based system, my focus was on ensuring that users could reliably understand how blocks behaved as flows became more complex.
Rationalizing blocks and configurations
Reducing variation in how similar triggers and actions were configured, so users didn’t have to relearn patterns from block to block.Standardizing interaction patterns
Aligning configuration panels, validation states, and error messaging to behave consistently across the builder, even when blocks rendered conditionally.Clarifying boundaries and constraints
Making system limitations visible through UX (disabled states, helper text, inline guidance) so users understood what was possible without needing trial and error.Designing within technical constraints
Partnering closely with engineering to adapt UX patterns to the realities of a React-driven, configuration-heavy system—prioritizing clarity and learnability over bespoke solutions.
The goal wasn’t to redesign the system’s foundations — it was to make the existing system feel coherent, reliable, and understandable to users.
Node Hierarchy & Rhythm
Modular spacing + clear differentiation = scannable journeys.
Logic Clarity
Removed hidden dropdowns → visible branching patterns.
Safe-Edit Guardrails
Enabled confidence when editing live flows.
Pre-Flight Validation
Caught missing integrations, permission gaps, or unmapped fields.
Minimap for Orientation
Critical for navigating long, horizontally expanding journeys.
Design System Alignment
Unified Automations with Email Editor
reduced time-to-build
fewer QA loops and regressions
improved comprehension validated internally
early analytics showed meaningful adoption lift
blueprint flows → basis for pre-built templates
"The visual canvas makes it easy to understand flow logic at a glance."
User feedback post-launch
Validation doesn’t have to be expensive — it just has to be real.
validate early, even informally
blueprinting reveals structural UI requirements
progressive disclosure preserves clarity
clear labeling reduces scope anxiety
guardrails protect design integrity
This milestone laid the foundation for long-term scale. Future opportunities include:
expanding the template library with more behavioral patterns
introducing journey-level analytics
AI-assisted optimization suggestions
deeper alignment across Mailjet’s Editor, Brand Kit, and future workflow tools
A high-velocity visual redesign that made Mailjet’s Automation Builder legible, maintainable, and scalable.
Powered by blueprints, competitive insights, adjacent research, and scrappy persona-aligned validation.
