24MX Post-Checkout Email Experience
Streamlining transactional emails to create a seamless, reassuring post-purchase user journey.
The Context & Problem
After completing a purchase, users need clear, reassuring communication. However, 24MX operates with complex fulfillment methods—including warehouse stock, partner items, and dropshipping. This logistical complexity often resulted in split shipments, leaving customers confused about when their items would arrive. The goal was to design standardized transactional emails (like Order Confirmations) that visually aligned with the checkout experience while clarifying this "delivery chaos"
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.
My Role & Collaboration
I designed the first version of these transactional emails. Recognizing that a great user experience extends beyond the screen into real-world logistics, I collaborated closely with the Customer Fulfillment Department and the marketing team. Together, we mapped out four distinct delivery scenarios to ensure the communication logic always kept the customer informed, regardless of how their order was shipped.
Designing for Technical Constraints
Unlike standard web design, email design is restricted by strict technical limits. I adapted the brand's visual identity to fit within a strict 800px width limit and kept file sizes under 100KB to prevent major email providers from clipping the content. We also implemented web-safe fallback fonts, like Verdana, to ensure cross-device compatibility. To manage split shipments, I introduced a dynamic layout that explicitly informed users if their order would arrive in multiple parcels, paired with a prominent "See Order Status" button for live tracking.
Retrospective
This was my first time designing for the strict technical constraints of email. The most valuable lesson I learned was the power of cross-functional collaboration. Initially overwhelmed by the complex fulfillment methods, leaning on the expertise of the Fulfillment team allowed me to translate backend logistical chaos into a simple, reassuring, and transparent experience for the customer.
This project is designed using Figma.