Email Design System — Refresh.

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.

  1. Current system modules — what works, likes, dislikes, used, less-used.
  2. The new brand, visuals, wants, needs.
Existing template review sketches and notes.

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;

  1. 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.
Visuals of key elements
Quick scamp ideas for new additions to template
Specific Focussed ideas for new modules.

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.

  1. On/Off switch for Braze rulesets for a variety of pre-set dynamic elements
  2. Font-sizes and different web font options.
  3. 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.
  4. A standard pre-stacked 2 column option (image, text, button), that I was surprised wasn’t already part of their templates
  5. 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.
Header Module with 2 examples of the pre-set images ratio menu
2 column ‘card-based’ variants
Gallery Fallback — Editor example
This fallbacks to simply an static image as you would normally see.
Fallback for this gallery is a single header image.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kristian Robinson

Kristian Robinson

Email Person, writing scruffy, grammatically poor blogs every now and again if I have something to say.