How can I improve customer's post-purchase email experience while reducing maintenance costs?

Post-purchase emails on KKday have the highest open rates, averaging 20%, and are crucial for shaping the user's experience.

These emails share fixed copy and dynamic strings with user or product information. Thus, a standardized structure and consistent content logic are ideal.

I defined the project scope from over 30 emails, focusing on those triggered by customer purchase behavior. The ideal strategy is to develop the emails with the highest open rates first and then apply their custom settings to others iteratively.

So...what problems are we facing exactly now?
‍

🎯 Unclear ownership

Our emails are managed by different departments, leading to inconsistencies in sending logic, code maintenance, structure, and UI styles. The lack of clear ownership has made addressing these issues challenging.

🎯 Lack of mobile-first experience for the majority of users

Most of our users access emails on mobile devices, but we don't provide a satisfactory experience in our responsive web design (RWD) environment. The current emails lack proper layouts for mobile viewing, making them cumbersome to view on different devices.

‍
🎯 Inconsistent alignment with Design System

Since email is an extension of KKday's product, aligning its experience with the main product and leveraging shared Design System resources, including colors, fonts, and tokens, is crucial for ensuring a consistent user experience and supporting our development.‍

I tried to figure out all the potential types of content we would want to see in those emails.
‍

1. Determine potential types of content

I reviewed the triggering conditions of the emails and compared them with the order page in the app to prioritize the details users are most interested in.

‍

2. Use Atomic methodology to build components

To satisfy the logic of component development and enhance reusability, I followed the principles of Atomic Methodology. I started by assembling the smallest units, or atoms, and gradually built up to the final email system. Additionally, I defined the usage scenarios and user contexts for each block.
‍

‍

Challenges: Key Information Users Need in Order Emails

We needed to identify the most critical information users want when they open emails and what will prompt them to return to the app via the CTA.

I broke down the order details page on the app. During travel, users need time-sensitive information, such as redemption details, voucher instructions, and customer service contacts. Therefore, I prioritized this information in the email.

3. Define email modules with developers

I collaborated with the developer to ensure components could be implemented in the new framework. We focused on meeting responsive design (RWD) requirements and ensuring the RD team's components were reusable.

Consistent and streamline components for both code and design.

In Figma, I categorized components as required, optional, and atomic, and showcased styles for emails on mobile and PC, making it easier for the design team to collaboratively maintain the modules.

‍
The developer displays all the developed reusable components online, making the library accessible for designers.

‍
We also created a demo page, which allows real-time viewing of all email styles in seven languages. This website facilitates direct showcasing of the final appearance of emails when communicating with cross-functional team.
‍

The modular email system has generated numerous emails and significantly reduced manual efforts. Furthermore, the implementation of a new email architecture has improved the legibility of the emails and increased the open rate.

✅ Implement

After producing the modular system, it has been applied to the maintenance of 27 emails.
‍

✅ Speed

Compared to before modularization, the manpower cost of letter development and design is reduced by approximately 33%.
‍

✅ Brand consistency

By redesigning and implementing a Design system, we aim to enhance the consistency of the user experience between emails and our website.
‍

✅ Flexibility & Scalability

By utilizing modular components, we can make adjustments to elements with minimal cost, whether in response to new email requirements or changes in the email structure.