Email 2.0

Legos. The simple building blocks from my childhood inspired an approach to a complex problem.

Design system
project management
visual design
TL;DR: The design of this unified system reduced email development time from 2 weeks to less than 2 days per email, resulting in an annual decrease of time spent on emails from 23,360 hours to 876 hours (-96%), or what is equivalent to $2 million in labor cost annually. Through my role as a creator, designer, and the project manager at Mercari, Inc., I designed this efficient system which has come to be known as Email 2.0.
-96%

Hours Reduced

$2 Million

Costs Saved Yearly

2 Days

Shortened From 2 Weeks

The Problem

A Broken System
That Was On The Merge Of Collapsing

A task as simple as sending emails to our users became a burden to all who were involved in the process. The existing system was draining unnecessary time and effort across multiple teams that could have otherwise been used to focus on less mundane tasks and on more impactful projects.

We send hundreds of emails
to millions of customers.

But each time we created an email, we were essentially creating it from scratch (or reusing an old template).
‍
Demanding a lot of resources (160 hours per campaign) and leading to a lot of design inconsistencies.

We send hundreds of emails
to millions of customers.

But each time we created an email, we were essentially creating it from scratch (or reusing an old template).
‍
Demanding a lot of resources (160 hours per campaign) and leading to a lot of design inconsistencies.

Inefficiency & Inconsistency;
The 2 Problems That We Were Facing

Inefficient email communication can lead to significant delays, taking up to 2 weeks to address time-sensitive matters due to multiple iterations between designers, engineers, and PMs.

Additionally, inconsistency in email content across multiple teams can cause confusion among end users and hinder brand recognition for newly established brand.

The Solution

Simple: Lego Blocks Inspired Design Approach

By adopting a LEGO blocks approach, you only need a limited set of components, yet what you can create with them is bound only by your imagination. Remember how you could build castles and airplanes with just a few LEGO pieces? This system works the same way, offering endless possibilities with a small, versatile set of building blocks.

Streamlining Efficiency Inspired by Childhood Legos

Rather than using a single email template, we can break emails into flexible blocks, akin to building with Legos. This approach enables instant customization and adaptation of emails, ensuring each message aligns perfectly with its content, rather than forcing content to fit a fixed template.
consistency
Ensuring a universal feel in our emails enhances user experience by maintaining consistency and preventing the perception of spam, thereby preserving user trust.
Efficiency
Ready-made components give designers more time to focus on visual aspects rather than spending time on building templates. It also eliminates the need for engineers to recreate emails each time.
Scalability
Effortless updates for all components ensure no individual email revisiting. The system's scalability accommodates new components without rendering existing ones obsolete.

One System
To Build Them All

The Process

Behind the Scenes: Crafting an Email Design System

Step Inside as I Share the Journey of Building This System, Detailing Every Stage of the Process in a Comprehensive Walkthrough

01.

Gathering & Grouping

The first step involves collecting all existing outgoing and previously sent emails into a centralized repository, providing a comprehensive overview of our email communications. Next, we categorize these emails into levels, with L0 representing a broad category and L2 being the specific email. This categorization enhances our ability to group and understand the various types of emails we're sending out.

02.

Slicing & Categorizing

We begin by dissecting emails into their individual components, identifying recurring elements shared across various messages. Once these components are confirmed, they are categorized and color-coded for organizational clarity, facilitating the creation of component buckets for future use. Subsequently, we reconstruct emails using these identified components to gain a deeper understanding of their structure.

03.

Establish A Design System

To ensure consistent and visually coherent email communications, it's imperative to establish a comprehensive design system for the email components. This system will define guidelines for typography, color schemes, spacing, and overall layout. By adhering to these design standards, emails can maintain a unified and professional appearance, regardless of who is creating them.

04.

Buidling the Components

The next crucial step in the process involves assembling these components systematically. This involves not only crafting emails from the identified building blocks but also creating comprehensive design specification sheets for engineers. These sheets serve as a detailed blueprint, outlining the exact positioning, styling, and functionality of each component.

05.

Create A Component Libabry

Creating a comprehensive component library is like establishing a one-stop shop for crafting emails with efficiency and consistency. It's a centralized resource housing all the verified and categorized email components, simplifying the email creation process.

The Result

When we compared with the old approach, the results surpassed everyone's expectations.

-96%

Hours Reduced

$2 Million

Costs Saved Yearly

2 Days

Shortened From 2 Weeks

View My Work On Figma

Next Project

Branding

Brand Guideline

Arrow up icon
Let's Collaborate

Designing dreams into reality

let's talk
LinkedIn

Design & Developed by Abdullah Alkhatib