Email Design System — Refresh.
Hello!
It’s been a long while since I blogged about anything…But as it’s 3 years since I’ve been working with CACI, and with this particular client. I thought I’d write this up as it’s a project I’ve been particularly proud of and what I feel is probably my best work. You’ll recall I used to write blogs about experimental emails, Sonic the hedgehog in emails, Faux-Videos, background images, Alien Games for emails etc. Fun stuff.
I thought I’d give you more of an insight of the type of thing I’ve been doing for the last few years…. and a typical process I like to go through, thought processes etc… whether they are orthodox or not…
Pre-amble done….
At the end of 2019 I was tasked re-working, re-designing, re-building and re-structuring a design system for a particular client.
The template is a few years, and it had been updated, changed, tweaked over that time, but with a rebrand coming, and new functionality within the template, and several updates to different inboxes, and a change to different ESP it was about time we went over it, and gave it an refresh. This is a rough guide to how we went about that, and what was changed.
The Review
An important part of the process which is often overlooked, this is best opportunity gather information on what currently exists, here from all key stakeholders and make plans for the overall needs going forward, and look at the new brand, gathering as much information for the planning stage as possible.
- Current system modules — what works, likes, dislikes, used, less-used.
- The new brand, visuals, wants, needs.
This is a personal preference, but I like to do a lot of work at this stage with paper and pencil, I like to minimise working digitally as much as possible. It’s a quicker process, leaves things open, and gives you a quick framework with rough notes.
From us all sitting down and going through the template together we can quickly gather reactions and feelings from in the room, and collaborate to establish key needs and get this together as quickly as possible, precisely, without mis-communication. Hows this looks on paper or how it is recorded does not matter.
We quickly established that although there is a rebrand, and a rebuild to be established we don’t need a full re-design to achieve this, but we do need to visualise a few key elements based on the requests.
Key Requirements that came up:
1) Background images with different image ratio options
2) Flexibility to adjust space between each module
3) Granular level modules. Headline text, body copy, CTA, etc….
4) New brand elements
5) Re-balance the functionality of certain modules. Less toggles, and menus.
6) Layout Ratio of 2 columns Left/Right for greater flexibility of content.
7) Ways of watching icons
8) Cleaner, simpler overall layout with a variety of new options, explore galleries, animations, overlays and advanced elements. But with consistency within inboxes, and ease of use within the platform.
The Plan
After establishing what would in theory be kept (but rebuilt), and what could go we then split the project in to two parts;
- The visual elements to establish a visual base to work from relating to the new brand. All these elements would largely influence everything within template, and keep a clean, simple high contrast design.
2. Scamp/Sketch/Rough ideas for new modules based on my experience of working with C4, and email and discussion during review.
There were early, rough sketches of some elements, but then more useful and specific elements I particularly felt suited their needs and hit the brief I looked more closely and started to tie them to the brand, and makes some key notes contemplating the functionality and considerations to make — Many of these were then all done in build.
Creates diagrams/wireframes/scamps — whatever it is you want to refer to them as (it’s just planning) I find working on paper helps me to be more creative, but more importantly keeps things fluid, and helps me to see the bigger picture. It also, when it comes to building, allow me to start from a better place.
The Build
We split the build up in to three parts, which featured rebuilding the core of the template, with the new designed style elements and ensuring functionality.
Phase 1
This phase would be the core of the new template, largely standard simple approaches to modules and the priority would all be around functionality, allowing C4 users to familiarise with the new layout and set-up and begin using it. We also made a guide for this part to support the client.
Some keyfeatures:
- On/Off switch for Braze rulesets for a variety of pre-set dynamic elements
- Font-sizes and different web font options.
- Left and Right 2 column modules with ratio variants (50/50, 60/40, 70/30) and options to to how they display on mobile. This gives C4 a wide range of options in consistent layouts. But suits their range of differing image ratio.
- A standard pre-stacked 2 column option (image, text, button), that I was surprised wasn’t already part of their templates
- Background header image — This has three pre-defined ratios, which the we can control in the editor. It allows up to change any element based on menus, and the logo to sit on top of the background, and still be dynamically driven.
Phase 2
The next step we introduced some of the slightly more advanced elements.
The intention with these slightly more advanced elements was that the priorities were to be clean and simple, and fallback cleanly so for example this includes variants on the standard two column.
I like to work from the angle of progressive enhancement with email. The aim with all of the slightly more enhanced elements is that they should fallback to something close as possible to the ‘Standard Two Column’ where functionality isn’t supported
Galleries
I’ve never been a fan of image galleries in email, in fact if there weren’t more important things in the world I would actively lobby against them. So here’s my take when used at the correct time, in the correct email, with the correct planning and content for a purpose they can be. So it’s good to have one up your sleeve.
Here we have two options:
1) A simple gallery where the ‘tab-image’ is being pulled from the main image used. Which keeps things simple in the studio, and keep it’s speedy.
2) A option using icons instead, where the tabs are completely editable to the content.
A key thing to note here is that the content is entirely single column which helps keep the code weight in something like this down.
Ordinarily I feel this something like this would then fallback (where interactive emails are not supported) into 3 individual pieces on content, which I feel makes an email too long.
So the fallback here would be the 3 tab images showing as normal images (no green overlay as per the image below), and then a focus on provided more of a generic text applicable to all three images.
And what I like most about this is, we’re able to toggle between them in the editor itself. So I coded it in a way we could switch between both versions with one switch (to an extent).
Phase 3
Here i began to look at animation, and exploring the brand elements such as these. Where I made an attempt to make a nod to the animated element of the new brand where content flies in from the left, and either stops or flies out to the right.
The first place was adding simple animation to the logos, to slide in to the email. The key being that it would be barely noticeable and subtle.
And I applied an animation to this heading image as option to use.
So where supported the content flies in behind/after their own animated colour/angle fly in and out. Leaving the content behind.
I then expanded on this and applied it to a gallery. This also fallback to one static single image. I thought this might be good to use for a new series, or characters, or a box-set for example.
Of course once it’s built we have testing, client test, further reviews, adjustments, and ongoing support, I created a guide to support them through.
Overall
The template is significantly cleaner, simpler, and more consistent across the board.
The key parts for all emails (in my opinion) is:
1) Good/Relevant content
2) Simplicity for any recipient of that email to engage with the content.
The important thing for any template is:
1) User/marketeer can create good content, quickly and easily without difficulty or having second guess themselves.
2) Flexible to allow for creativity, and to empower the user, without them needing to be a developer or designer.
Email Studio on the Taxi platform allows to do that as developers and provide quality modern email templates for clients, who (if they want to) can start to push boundaries in a responsible way.
I keep saying “i” but it’s very much a team effort from everyone from the team at CACI and the team at Channel 4, and communication and flexibility is a big part of what makes projects go smoothly. In my experience there is no template for that as each client and relationship is different.
So that’s about it from me… longer than I thought it would be.
Anyone still there?
If you want to talk more about this sort of thing, or if we can help with you with email. Get in touch via email — krobinson@caci.co.uk or via linkedin.
I’ll try and do a few more bits and pieces if I get the chance to.
Hope you’re all staying safe.
Kristian Robinson
Email Studio Person
CACI
London
