Transactional Design

Entwicklung von Transaktionsmails, Newslettern & CRM-Strecken

projekt transactional design

Meine Rolle:
Art Direction, UX Design, Digitales Marketing

Tools:
Adobe XD, Adobe Photoshop

Ziel:
Aufbau konsistenter, responsiver E-Mail Templates für die gesamte Customer Journey, von Registrierung bis zu CRM-Kampagnen.

Lösung:
Einführung eines modularen Master-Templates auf Basis des MJML Frameworks, ergänzt durch ein zentrales Figma Designsystem.

Überblick

E-Mails gehören zu den wichtigsten Touchpoints im digitalen Vertrieb. Mein Ziel war es, durch klare Strukturen, responsives Design und eine markenkonforme Gestaltung eine durchgängige Customer Experience sicherzustellen. Dafür gestaltete und implementierte ich verschiedene Transaktionsmails, wie beispielsweise Bestellbestätigungen oder Versandinformationen. Zudem entwickelte ich ein modulares Newsletter-Template auf MJML-Basis und erstellte in Figma ein Master-Template, das ein schnelles und konsistentes Arbeiten ermöglicht.

E-Mail Templates mit MJML

Das MJML-Framework bildete die Grundlage für die technische Umsetzung. Damit konnten responsive E-Mail-Templates erstellt werden, die auf allen Endgeräten zuverlässig funktionierten und gleichzeitig eine hohe Gestaltungsfreiheit boten. Durch den modularen Aufbau ließen sich Inhalte flexibel austauschen oder anpassen, ohne dass jedes Mal ein komplett neues Template entwickelt werden musste. Diese Herangehensweise erleichterte nicht nur den Workflow, sondern sparte auch erheblich Zeit und Kosten bei der Umsetzung von Mailings.

MJML Desktop App: Ausschnitt des Master E-Mail Templates
MJML Desktop App: Ausschnitt des Master E-Mail Templates

Ziel

  • Technische Grundlage für einheitliche, responsive E-Mails schaffen
  • Modularität für schnelle Anpassungen sicherstellen
  • Effizienzsteigerung im Produktionsprozess erreichen

Prozess

  • Aufbau modularer Komponenten im MJML-Framework
  • Umsetzung von Layouts und Content-Blöcken für flexible Nutzung
  • Testen und Optimieren für alle gängigen Endgeräte

Lösung

Ein modulares, skalierbares Template-System, das technische Zuverlässigkeit mit gestalterischer Flexibilität verband und über alle Mailing-Formate hinweg einsetzbar war.

Skill set:

MJML Responsive E-Mail Design HTML Code-based Templates Component Thinking

E-Mail Customer Journey

Die Customer Journey im Bereich E-Mail umfasst weit mehr als nur einzelne Mailings. Sie begleitet Nutzer:innen vom ersten Kontakt bis hin zur langfristigen Kundenbindung. Entsprechend wichtig war es, eine durchgängige und konsistente E-Mail-Kommunikation aufzubauen. Von der Willkommensmail über Bestellbestätigungen bis hin zu Newsletter-Kampagnen und CRM-Maßnahmen sollten alle Berührungspunkte ein einheitliches Nutzererlebnis schaffen. Ziel war es, Vertrauen aufzubauen, Informationen klar zu vermitteln und gleichzeitig eine emotionale Bindung zu schaffen.

E-Mail Customer Journey
E-Mail Customer Journey

1. Anmeldung

Willkommensmail mit klarer Markenbotschaft und Nutzerführung

2. Bestellbestätigungng

Transparente Information zu Bestellung und Versand

3. Newsletter

Regelmäßige Inhalte, abgestimmt auf Sales- und Thementrigger

4. CRM-Maßnahmen

Persönliche Ansprache durch zielgerichtete Segmentierung

5. Net Promoter Score

Aktive Einbindung der Kund:innen in den Verbesserungsprozess

Ziel

  • Entwicklung eines visuellen E-Mail-Systems für eine konsistente Customer Journey
  • Gestaltung moderner, markenkonformer Templates mit Wiedererkennungswert
  • Verbesserung der Nutzererfahrung durch klare Struktur und visuelle Konsistenz

Prozess

  • Analyse bestehender E-Mail-Strecken und Definition zentraler Touchpoints
  • Gestaltung und Aufbau modularer Template-Komponenten
  • Abstimmung von Design, Typografie und Bildsprache auf bestehende Markenrichtlinien

Lösung

Umsetzung eines flexiblen E-Mail-Template-Systems, das über alle Phasen der Customer Journey hinweg ein einheitliches und ansprechendes Markenerlebnis schafft.

Skill set:

Customer Journey Mapping UX Writing Behavioral Design CRM Integration Campaign Strategy

E-Mail Migration & Master-Template in Figma​

Um die Handhabung der E-Mail-Kommunikation langfristig zu vereinfachen, wurden sämtliche bestehenden Mailings in ein neues Template-Design überführt. Auf dieser Grundlage entstand ein zentrales Master-Template in Figma, das als Designsystem für alle E-Mail-Formate diente. Dadurch konnte das Marketing-Team eigenständig neue Mailings erstellen, ohne jedes Mal einen kompletten Neuentwurf anlegen zu müssen. Die Migration stellte nicht nur ein konsistentes visuelles Erscheinungsbild sicher, sondern beschleunigte auch die Erstellung zukünftiger Kampagnen erheblich.

Master Newsletter Template in Figma
Master Newsletter Template in Figma

Ziel

  • Migration bestehender Mailings in einheitliches Template-System
  • Aufbau eines zentralen Master-Templates in Figma
  • Sicherstellung konsistenter Markenkommunikation

Prozess

  • Analyse und Zusammenführung bestehender Mailings
  • Erstellung eines Master-Templates mit modularer Struktur
  • Dokumentation und Schulung zur Nutzung im Marketing-Team

Lösung

Ein flexibles, in Figma entwickeltes Master-Template, das schnelles Arbeiten, konsistente Designs und die einfache Skalierung neuer Mailings ermöglichte.

Skill set:

Design System Figma Components Template Architecture Collaboration Documentation

Lesson learned

Das habe ich aus den Projekten mitgenommen:

  • Ein modularer Aufbau schafft langfristig Konsistenz und Wartbarkeit in komplexen E-Mail-Systemen.
  • Enge Zusammenarbeit zwischen Design, CRM und Entwicklung ist entscheidend für ein sauberes, skalierbares Ergebnis.
  • MJML ist ein effizientes Framework, um Design und Code besser miteinander zu verzahnen.
  • Gute Dokumentation spart langfristig Zeit und erleichtert zukünftige Anpassungen.
Nach oben scrollen