Designing a flexible app-focused email templating solution: Case Study

Let me take you through my process of designing and developing Senderplate, a customizable email templating solution designed for apps and developers.

Introduction

My background

Hey there, I am an open source loving multi-disciplinary Product Designer, based in Brooklyn, New York. I’ve devoted my professional career to unraveling complex design challenges with meticulous and integrated strategies, ensuring each solution is both beautifully polished and imbued with purpose.

The intention behind this case study is to document and showcase my design journey and thought process for potential clients who may be interested in using Senderplate or working with me.

About Senderplate

Senderplate is a fully customizable flexible email template specifically designed for apps and developers built on the powerful technology of MJML.

Project Background

Understanding the problem

Email templating can be challenging to develop for due to the legacy compatibility and standards. As a fast operating app developer or SaaS business, implementing professional-quality email templates can be time consuming, taking up valuable resource.

This was an opportunity to develop a highly customizable suite of ready-to-use email templates that utilized modern technologies and design standards, each accompanied with an editable Figma template for the designers to customize.

• Client Compatibility Issues: Ensuring emails look consistent across various platforms, including notorious ones like Outlook, often requires deep knowledge of HTML and CSS, along with numerous workarounds.
• Complexity in Design and Deployment: Creating responsive, visually appealing email templates demands significant time and effort, detracting from development resources that could be better used elsewhere.
• Lack of Accessible, Quality Templates: While some resources exist, finding high-quality, customizable templates that meet specific needs without extensive modification is challenging.

Discovery & Research

Evaluating existing solutions

As part of the foundational work for developing Senderplate, our team evaluated existing email templating solutions available in the market. This investigation aimed to understand the landscape of current offerings, both free and paid, to identify gaps and opportunities for Senderplate to fill. What we discovered was enlightening and instrumental in shaping the development direction of Senderplate.

Analysis of Current Market Offerings:

• Inconsistent Design Quality: One of the first things we noticed was the inconsistent design quality across the board. Many templates, even within the same tool or resource, varied significantly in terms of design principles, responsiveness, and usability, leading to a disjointed experience for end-users.
• Limited Scenario Coverage: Another significant gap identified was the lack of comprehensive scenario coverage. Most existing templates were heavily skewed towards marketing and newsletter purposes, leaving app developers without specialized templates for common app-related communications like account verification, password resets, or transactional notifications.
• Lack of MJML Utilization: MJML (Mailjet Markup Language) offers a streamlined approach to creating responsive email templates, but we found that its adoption was surprisingly limited among the existing solutions. This oversight meant that developers were missing out on the benefits of MJML’s efficiency and cross-client compatibility.
• Tool-Specific Design Limitations: Many templates were designed with a particular marketing automation tool in mind, which greatly limited their usability across different platforms. This not only restricted the choice of tools for developers but also added unnecessary complexity in adapting templates for different environments.

Defining the key templates

To create a solution that truly met developers’ needs, research was conducted with startup SaaS and ecommerce businesses to understand the specific pain points and requirements for an ideal email template management system. This involved:

• Surveys and Interviews: Engaging with developers through surveys and one-on-one interviews to gather insights on their experiences and frustrations with existing email template solutions.
• Market Analysis: Reviewing existing solutions and identifying gaps in the market, particularly in terms of usability, customization, and integration capabilities.
• Prototype Testing: Early prototypes of Senderplate were shared with select developers to obtain preliminary feedback on the concept and usability.

Prototyping & Design

Crafting the templates to support a wide range of use cases

We wanted Senderplate library to include templates for every conceivable app workflow communication, making it an indispensable tool for modern startups.

From transactional emails like shopping receipts and password resets to engagement-driving communications like app rating prompts and marketing newsletters, we initially identified and sketched out all the versatile foundation that startups can rely on. This comprehensive suite ensures that startups can maintain a cohesive, professional appearance in their customer communications, enhancing brand perception and user experience.

The design and prototyping phase of Senderplate was focused on creating a a vast set of modular template sections that could be mixed and matched to support a wide range of use cases.

• Simplicity First: The primary goal was to demystify the process of creating and managing email templates. This led to designing a clean, intuitive user interface that minimized complexity and made navigation straightforward for users of all experience levels.
• Responsive by Default: Leveraging MJML under the hood, we ensured that all templates were responsive by default.
• Rapid Prototyping Tools: Early-stage prototypes were developed using tools like Sketch and Figma, combined with interactive mockups. This allowed for quick iteration based on internal reviews and user feedback sessions.
• User Flow Visualization: Key user flows, such as selecting a template, customizing it, and integrating the final product into an email system, were mapped out and prototyped. This helped identify potential friction points and opportunities to streamline the user experience.

User Testing

Design Refinement for Senderplate

Our design iterations were guided by feedback received from our initial sketches and prototypes. We also worked with our developer partners to ensure integration documentation steps for MJML’s more advanced features were clear and well communicated in the product.

• Shared initial prototypes with a select group of developer partners and product managers for early feedback.
• Focused on enhancing template usability, streamlining the customization process, and clarifying template integration steps.
• Introduced easy-to-use integration guides and code snippets for a variety of email sending services, accessible directly within Senderplate.

Final Result

Streamlining email development

The rigorous process of design, user testing, and iterative refinement culminated in the successful launch of Senderplate, a transformative tool for developers managing HTML email templates.

In conclusion, Senderplate represents a significant leap forward in HTML email template creation for developers and marketing automation, addressing and solving many of the long-standing challenges faced by developers.

Widespread Adoption and Positive Reception:

• Achieved rapid adoption among developers, becoming a go-to solution for managing HTML email templates.
• Garnered positive feedback for its user-friendly interface and the efficiency it brings to email template management.
• Streamlined Email Template Creation and Management:
• Simplified the process of creating responsive, client-compatible email templates, reducing operational overhead for developers.
• Enabled developers to focus more on core product development by minimizing the time spent on email template design and integration.

By prioritizing user experience, simplicity, and functionality, we have not only enhanced the workflow for developers but also opened up new possibilities for creating beautifully brand consistent email communications.