Hewyn Email Studio

A full email marketing platform for a UAE wellness brand, with drag-and-drop composition, AI-powered strategy generation, and a custom 2,481-line MJML compilation engine that handles automatic English-to-Arabic translation with full RTL support.

The Problem

Hewyn is a premium wellness and supplement brand in the UAE with 4,500+ products across 65+ brands. The marketing team needed to produce both automated email flows (welcome series, post-purchase, winback, browse abandonment) and weekly newsletters. Generic email builders like Klaviyo and Mailchimp don’t understand Hewyn’s product catalog, brand voice, or Gulf market nuances. Every email went through a cycle of copywriter, designer, developer, and back again.

The bilingual requirement made it worse. The UAE market expects both English and Arabic, and Arabic email rendering is its own world of pain: right-to-left text direction, different font stacks, flipped margins and padding, localized headers and footers. No off-the-shelf email builder handles this well. The team was either skipping Arabic entirely or producing it manually, which meant it was always behind.

The Approach

I built an internal email marketing platform from scratch. The core is a drag-and-drop email composer with 12 section types (hero image, product cards, trust pillars, discount codes, tips lists, category tiles, cross-sell blocks, and more). Emails are stored as JSON arrays of typed section objects, compiled to MJML on the fly with 600ms debounced auto-compilation for live preview.

The AI layer sits on top. Instead of writing email copy from scratch, the team starts with AI-generated strategy for any flow type. The strategy prompt embeds verified business facts: actual product count, real brand names, working discount codes, valid page URLs. Explicit rules prevent the model from fabricating any of it. The AI picks from 8 composable content block types (text, category blocks, product cards, discount banners, review quotes, stacks, steps, CTA) based on the email’s purpose, producing varied structures rather than forcing every email into the same template.

The bilingual pipeline is where most of the engineering complexity lives. English and Arabic are stored as separate section arrays. When the MJML compiler runs for Arabic, it swaps fonts (Figtree to Noto Sans Arabic, Merriweather to Amiri), adds dir="rtl", flips margins and padding, and uses localized header and footer blocks. If an Arabic translation is missing, the compiler calls Claude automatically to generate it. 24 UI strings are pre-translated for consistent interface localization.

10 flow blueprints come pre-loaded (welcome, post-purchase, browse abandonment, winback, replenishment, VIP tier, re-engagement, seasonal, review request, referral) with AI gap analysis that identifies which flows are missing or underperforming.

Key Decisions

• Composition-based content generation over rigid templates. The previous approach was “every email looks the same.” The new system uses 8 typed content blocks that the AI selects based on email purpose. A welcome email gets a different block structure than a winback. This produces dramatically better variety without manual design work for each flow.

• Custom MJML compilation engine over a third-party service. At 2,481 lines, this was the single biggest investment. But email rendering across clients is fundamentally different from web rendering, and adding RTL/Arabic support on top of that meant no existing tool could handle it. The engine compiles section-by-section, handles font swaps, direction flips, and produces clean HTML that renders correctly in Outlook, Gmail, Apple Mail, and their Arabic equivalents.

• AI with hard factual constraints over open-ended generation. The strategy prompt embeds verified business data and includes explicit rules like “NEVER make up facts, page URLs, or brand counts.” Without these guardrails, LLMs confidently fabricate discount codes and product URLs. The system falls back to static content when no API key is present.

• Section-based drag-and-drop over WYSIWYG editing. Emails are structured data (JSON arrays of typed sections), not free-form HTML. This makes them compilable, translatable, and versionable. The dnd-kit library handles reordering, and the 600ms debounced compilation gives real-time preview without overwhelming the compiler.

Under the Hood

The email composition pipeline flows from structured data through MJML compilation to rendered HTML:

┌──────────────────────────────────────────────┐
│         Drag-and-Drop Composer               │
│    12 section types, JSON storage            │
│    dnd-kit reordering + live preview         │
└──────────┬───────────────────────────────────┘
           │ 600ms debounced
           ▼
┌──────────────────────────────────────────────┐
│        MJML Compilation Engine               │
│    2,481 lines, section-by-section           │
│    EN: Figtree + Merriweather                │
│    AR: Noto Sans Arabic + Amiri + RTL        │
└──────────┬───────────────────────────────────┘
           │
           ▼
┌──────────────────────────────────────────────┐
│       AI Strategy Layer (Claude Sonnet 4)    │
│    8 content block types                     │
│    Verified business facts embedded          │
│    Auto Arabic translation when missing      │
└──────────────────────────────────────────────┘

The content block architecture lets the AI compose varied email structures:

type ContentBlock =
  | { type: "text"; content: string }
  | { type: "category_blocks"; categories: Category[] }
  | { type: "product_cards"; products: Product[] }
  | { type: "discount_banner"; code: string; terms: string }
  | { type: "review_quotes"; reviews: Review[] }
  | { type: "stacks"; items: StackItem[] }
  | { type: "steps"; steps: Step[] }
  | { type: "cta"; label: string; url: string };

The bilingual compilation swaps the entire rendering context:

// Arabic compilation overrides
const arConfig = {
  direction: "rtl",
  bodyFont: "Noto Sans Arabic",
  headingFont: "Amiri",
  marginFlip: true,      // swap margin-left ↔ margin-right
  paddingFlip: true,      // swap padding-left ↔ padding-right
  header: arHeaderBlock,  // localized header
  footer: arFooterBlock,  // localized footer
};

Scale

• 12 section types in the drag-and-drop composer
• 10 flow blueprints with AI gap analysis
• 2,481 lines of custom MJML compilation with full RTL/Arabic support
• 24 Arabic UI string translations
• 8 composable content block types for AI-generated email structures
• 50+ API endpoints organized by feature domain
• Automatic Arabic translation via Claude API during compilation

What I Learned

Domain expertise matters when you build a product with AI. This is the thing nobody talks about. You can have the best model, the cleanest architecture, the most elegant prompt engineering, and still end up with a tool that produces emails that flop halfway through a flow because the person who built it didn’t understand how email marketing actually works in a Gulf market.

I knew that a winback flow for a wellness brand in the UAE looks nothing like a winback flow for a fashion DTC in the US. I knew that Arabic email copy isn’t just a translation problem, it’s a tone and formality problem. I knew which discount structures work for replenishment products versus one-time purchases. I knew that a welcome series for a brand carrying 65+ third-party brands needs to build trust differently than a single-brand DTC. That domain knowledge shaped every decision: which content blocks the AI could choose from, what business facts got embedded in the prompts, which flow blueprints were included and how they were structured.

Without that knowledge, you build something that looks impressive in a demo and falls apart in production. The AI generates plausible-sounding copy with fabricated discount codes, links to pages that don’t exist, and flow structures that make no sense for the actual customer journey. The guardrails I built weren’t an afterthought. They were the product. Anyone can wire up an LLM to generate email copy. The hard part is knowing enough about the domain to constrain it correctly.

That’s the real lesson: AI doesn’t replace domain expertise. It amplifies it. If you know the domain, AI lets you build tools that would have taken a team of six. If you don’t, it lets you build something half-baked faster.

---

Built for Hewyn (hewyn.com), a DTC wellness brand in the UAE. Architecture and email flows shown. Revenue metrics anonymized.