Streamlining Transactional Emails for a Seamless Ride

Project Overview

I was tasked with designing the first version of transactional emails for 24MX.

This included:

Order Confirmation Email: Sent after a user completes a purchase.
Reset Password Email: Sent when a user requests to reset their account password.

The goal was to ensure these emails were visually aligned with the Order Confirmation Page on the 24MX checkout, creating a consistent and seamless user experience.

Problem & Challenges

The challenge was to design transactional emails for 24MX, specifically the Order Confirmation and Reset Password emails, while ensuring they align visually with the Order Confirmation Page from the checkout process. Additionally, I needed to:

Collaborate with the marketing team to create two versions of the email header — one for transactional emails and another for newsletters and marketing emails.
Ensure the designs adhered to industry standards, such as email width, height, and font choices, including fallback web-safe fonts for consistent rendering across devices.
Complex Delivery Scenarios:
24MX operates with multiple fulfillment methods, and the email design had to account for the following scenarios:
- Scenario 1: Items available in the warehouse are shipped together in one parcel.
- Scenario 2: Items from partners not stocked in the warehouse are first sent to the warehouse before being delivered to the customer, which may take longer. The estimated delivery date is shown to users at the time of ordering.
- Scenario 3: Dropshipping items are sent directly from the dropshipping seller.
- Scenario 4: Mixed orders (warehouse and dropshipping items) are sent in separate parcels and can be tracked via the website’s live order status. Emails must provide clear details for such cases.

The goal was to create emails that are visually cohesive, functional, and adaptable for multiple purposes.

Research and Insights

Here are a few highlights from my research and findings that informed the design decisions:

Email Width and Size:
- The optimal width for emails is a maximum of 800px, with text content staying within 600px to ensure compatibility with all email providers.
- While there is no height limit, email size must not exceed 100KB, as some email providers clip larger emails.
- This was an important insight for the marketing team, as many of their emails were being clipped due to size issues.

Here are a few highlights from my research and findings that informed the design decisions for mobile.

Email Width and Size:
- The optimal width for emails is a maximum of 800px, with text content staying within 600px to ensure compatibility with all email providers.
- While there is no height limit, email size must not exceed 100KB, as some email providers clip larger emails.
- This was an important insight for the marketing team, as many of their emails were being clipped due to size issues.

Font Usage:

While 24MX uses Montserrat as the primary brand font, emails are designed with Verdana for compatibility. Verdana has proven reliable as a fallback font, so we decided to continue using it for emails.

Font Usage:

While 24MX uses Montserrat as the primary brand font, emails are designed with Verdana for compatibility. Verdana has proven reliable as a fallback font, so we decided to continue using it for emails.

Simplified Navigation:

For the email headers, we decided to include only three main menu options, even though the website has more categories. This was to ensure the design was clean and mobile-friendly.

Design Process

Header Design for Marketing Emails:

Marketing emails required a different header than transactional emails due to size constraints. To address this, I suggested adding a “View in Browser” option in the header. This would allow users to open the email in a browser if it was clipped or displayed incorrectly due to size limitations.

Delivery Chaos Sorted:

Users cared most about knowing when their product would arrive and where it would be delivered. Since 24MX uses different fulfillment methods, these details weren’t displayed upfront but were clearly communicated in the email.

I included the estimated delivery window (from and to dates) along with the delivery address or pick-up point.
For orders with 1 parcel, the email design was simpler and did not mention multiple shipments.
For orders with 2 parcels or more, I included a note in the email informing users that their order might be delivered in multiple shipments. The email also reassured them that updates would be sent as the parcels were dispatched.
Users wanted the ability to track their order status live. To address this, I added a prominent "See Order Status" button, enabling them to track their shipment in real-time with ease.

Additionally, in the greeting, I mentioned that users would receive another email once their package is ready and dispatched, ensuring clear communication throughout the delivery process.

Visual Design

Conclusion and Learnings

This was my first experience designing emails, and it was a significant learning opportunity for me. I discovered that email design requires attention to various technical and design aspects, such as width, height, file size, fonts, font sizes, and ensuring compatibility across email clients.

Initially, I struggled to grasp the complexity of managing orders with multiple parcels, especially understanding the different fulfillment methods. However, with valuable input from the Customer Fulfillment Department, I was able to break down the problem and develop a simple yet effective solution to keep users informed about split shipments.

This project also taught me the importance of collaboration—working with cross-functional teams like marketing and fulfillment helped ensure the emails were not only visually appealing but also practical and user-centric. Additionally, I learned how vital it is to communicate clearly and consistently, as transactional emails play a critical role in the post-purchase user experience.

Overall, this project boosted my confidence in tackling complex design challenges and gave me the skills to handle future email design tasks with greater ease and efficiency.