Email Modularization

KKday tackled issues with inconsistent and mobile-unfriendly emails managed by different departments, leading to problems with uniformity and efficiency. I modularized emails to improve user experience and reduce development costs. The result was a 6% increase in order confirmation email open rates and a one-third reduction in development and design workload for each email.

Duration
1 month (2021)
What I did
Research, UI design, prototyping, co-ordinating with Developers and Product Manager

Overview

looks_one
Objectives

Improve the email experience across different devices, ensuring consistency and minimizing development and maintenance costs.

looks_two
Role & Deliverables

Collaborated with Product Management and Development teams on end-to-end UI/UX design, from problem definition to final delivery.

looks_3
Challenges

Working within an outdated email development environment that lacked support for advanced technologies, limiting design options.

looks_4
Outcome and Impact

Developed a modular email system that increased order confirmation open rates by 6% and reduced development and design effort by 35% per email.

Design Process

Background

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

KKday's post-purchase emails have the highest open rates (20% average) and significantly impact user experience. These emails contain both fixed copy and dynamic user/product information, making them ideal candidates for standardization. From over 30 emails, I prioritized those triggered by purchase behavior, focusing first on high-open-rate communications.

Problem

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

🎯 Fragmented Ownership

Emails managed across different departments created inconsistencies in sending logic, code maintenance, structure, and UI styles, with no clear ownership for resolving issues.

‍

🎯 Poor Mobile Experience

Despite most users accessing emails on mobile devices, our emails lacked proper responsive design, creating a suboptimal viewing experience across different screen sizes.

‍
🎯 Design System Misalignment

Email communications weren't aligned with KKday's main product design system, missing opportunities to leverage shared resources (colors, fonts, tokens) and deliver a consistent brand experience.‍

Design Approach

I approached this challenge systematically:
‍

1. Content Hierarchy Analysis

Reviewed email triggers and compared with app order pages to identify critical information users seek most, prioritizing time-sensitive details like redemption instructions, vouchers, and support contacts.
‍

‍
2. Atomic Design Implementation

Built a component library following Atomic Design methodology, starting with fundamental elements (atoms) and progressively building larger structures, while defining usage scenarios for each block.
‍

3. Developer Collaboration

Partnered with developers to ensure components could be implemented in the framework, focusing on responsive design requirements and component reusability.

Solution

Created a comprehensive email component system with:

✅ Hierarchical Component Structure: Categorized as required, optional, and atomic components

‍
✅ Cross-Device Optimization: Mobile and desktop specific styles

✅ Developer-Friendly Implementation: Online component library accessible for the whole team

‍
✅ Multi-Language Support: Demo page allowing real-time preview in seven languages
‍

Impact


✅ Scale

Successfully applied to 27 different email templates
‍

✅ Efficiency

Reduced email development and design costs by approximately 33%
‍

✅ Consistency

Enhanced brand coherence between emails and website
‍

✅ Adaptability

Created flexible components that can be adjusted with minimal cost for new requirements
‍

The modular system improved email legibility and increased open rates by 6%, demonstrating both technical efficiency and positive user engagement outcomes.

View previous
arrow_back
Citibank Redemption
Feel free to reach out  💬
Email →
Resume →
LinkedIn →