Douwe Egberts · Responsive email system

One master template, every market.

Douwe Egberts wanted their email to work on a phone, and to still look like Douwe Egberts whoever was sending it. I read the emails already going out around the world, then built one master template holding every module combination their teams would need.

Douwe EgbertsInformation design · Modular systems
Overview

Won on pitch while I was at eBay Marketing Solutions, for Douwe Egberts and the brands under it.

Marketing teams in a lot of different countries were all sending email under the same brand, and all building it their own way. None of it was responsive. The ask was to make the emails work on a phone, and to make sure that whichever marketer in whichever country was building the newsletter, what landed in the inbox held together.

So the work wasn’t really an email design job. It was working out what their email was made of, agreeing a set of parts, and handing over something other people could build with.

My role
Email and information design, end to end
Brands
Douwe Egberts and its brands, Senseo among them
Delivered
Responsive email design, a library of responsive wireframe modules, and a best practice guide
The problem

Same brand, a hundred different emails.

Every market built its own newsletters, from whatever it had to hand.

Nothing was responsive, so an email that read fine on a desktop fell apart on a phone. And because there was no shared set of parts, the brand drifted a little further with every campaign. Two emails from the same company, sent the same week from two countries, could look like they came from different places.

01

Nothing was built for a phone

The emails were designed for a desktop inbox. Opened on a handset they broke.

02

Every market started over

Teams in different countries built their own, so the same brand arrived looking different depending on where it came from.

03

No shared parts

There was no agreed set of blocks, so nothing anyone built could be picked up and reused by anyone else.

04

Consistency rested on the person

Whether a newsletter looked right came down to who happened to be building it that week.

The audit

I read between fifty and a hundred of their emails first.

Not to mark them. To find out what they were actually made of. Which blocks kept turning up, which ones only one market ever used, and where the same idea had been rebuilt five different ways by five different people. That list of recurring parts became the module set, which meant the system was built out of what they already sent rather than out of what I thought they needed.

The module library

Then one master template, holding every combination of those parts.

Product, video and image modulesScroll to explore ↓
The module library: product, video and image modules laid out in rows and labelled A to Q down the side
Product, video and image modules, lettered down the side so a marketer could ask for a layout by name instead of describing it. Every combination they were likely to need is in here, which is the thing that stops someone inventing a new one.View full size
How the modules behave

Each block had to survive the drop from desktop to phone without anyone having to think about it.

The wireframes set out how a row of three becomes a stack of three, what collapses, what stays side by side, and where the video and social blocks sit in each case. That behaviour is the part a marketer never sees and never has to.

Desktop wireframes showing a hero and text layout alongside a multi-column module grid
The desktop wireframes. A hero and body layout, and the grid of product, video and social blocks that sits under it.View full size
Mobile wireframes showing how the desktop modules stack and reflow on a handset
The same modules on a handset. Three across becomes three down, the video block keeps its proportions, the social row stays put.View full size
A page from the best practice guide, mapping desktop blocks across to where they land in the mobile stack
From the best practice guide. Each desktop block drawn across to where it lands in the mobile stack, so whoever picked the system up could see the rule rather than be told it.View full size
The system in use

Built out as a Senseo campaign, one of the brands under Douwe Egberts.

The Senseo Twist campaign shown in a desktop browser alongside two mobile versions
The same newsletter, in a desktop inbox and on two handsets. Nothing is redrawn between them — it is the same modules doing what the wireframes said they would.View full size
The finished desktop newsletter: a hero product shot with three colour variants beneath, each with a price and a call to action
The desktop build. Hero block, then a three-across product row, each variant carrying its own price and call to action.View full size
The same email on a phoneScroll to explore ↓
The same campaign on a phone, with the three-across product row stacked into three full-width blocks
And on a phone. The row of three becomes three full-width blocks, each still carrying its price and its button at a size a thumb can hit.View full size
Outcome
A responsive email system Douwe Egberts’ marketing teams could build from, in any market, without the brand drifting.

Three things went over: the responsive email design, the library of wireframe modules behind it, and a best practice guide explaining how the modules behave so the system could be used without me in the room.

This case study uses selected project artefacts from the design work. Client-identifiable and sensitive detail has been kept out of view.