Introduction
As a recent addition to the CleverTap team, I had undertaken the responsibility of this product to facilitate a seamless email experience for anyone who works with emails at CleverTap.
The primary objective of creating an email design system was to enhance brand and messaging governance, by promoting consistency in our email designs across the organisation, and enable smooth collaboration between teams to scale the email production process for maximum efficiency.
Final Results - Before & After Email Redesign
Impact
With an average of 2 million+ emails being sent across 12 categories per month at CleverTap, the design system has proven its scalability and efficiency through rigorous A/B testing. It has led to significant improvements in the below key areas –
Business: By establishing a strong foundation with the design system, less time and effort were spent on fixing visual differences, and a strong brand consistency & increasing familiarity with the product (for the customers) was established.
Quantitative: The design system created reduced the average task completion time for creating new emails from 4 days to 30 minutes. Additionally, adoption rates were high, with almost everyone working with emails at CleverTap, utilising the new system.
Qualitative: I conducted user interviews with stakeholders who were given access to the 1st version of the design system to gain insights on the it’s usage and effectiveness. Findings were categorised based on who would use the design system, how they used it, communicated and checked for new updates.
Overall, the design system proved to be an effective solution that streamlined the email design process and enhanced brand consistency.
Learnings
Start small and involve stakeholders right from the beginning.
Launch the 1st version as early as possible. It helps gain insights into product functionality & usability.
Communicate and Document. Avoid making assumptions about how users will interact with the system and provide clear documentation to guide them through the process. A good documentation helps with implementation.
Challenges Faced
When I joined CleverTap, there wasn’t any process for email design and development. Also, mobile email or dark mode was never really taken into picture. This resulted in inconsistently designed emails that fell apart in many email clients.
For a company that sends more than two million emails in a month, that was a problem.
When you receive a broken email, it can also make you question the attention to detail and professionalism of the sender. It might even make you wonder if other parts of the company are also ‘broken’.
Email was a decentralised discipline at CleverTap and me being the sole designer + project manager for this task meant I had to bring order to the chaos.
Information Gathering
The 1st step was to collect and review all the existing emails present.
Here I approached Product Managers, folks from Engineering and Marketing to collect and review existing emails.
I then interviewed designers, product managers and developers to determine if there are any additional requirements from their end, how can we make it scalable for future and how this design system can improve their workflows.
The core problem highlighted here was lack of shared language which often led to confusion over creating the visual appearance for the emails. This was where the design system would come into place.
Based on Stakeholder interviews I created 4 personas -
Design Approach
Redesigned email example on desktop & mobile
Creating an email design system was a complex factor wherein several factors had to be taken for consideration –
Compatibility: One of the biggest challenges in creating a design system is ensuring that the design is compatible with different email clients. They often have different rendering engines which results in the same email looking different in different email clients.
Responsiveness: Emails also must be designed in such a way that they work on a wide range of devices, from desktop computers to smartphones.
Content Variability: Emails may contain different types of content, such as text, images, so while creating a design system I had to also keep in mind to accommodate different types of content.
To determine how to best approach these issues I conducted competitive analysis and benchmarking of existing SaaS and other relevant emails in the market and then facilitated workshops with the wider design team to define a set of tools and methods that could help us streamline our workflow and developer handover process.
While the concept of Atomic Design was a familiar concept to the design team, I recognised that it could not be applied in a straightforward manner in our Email Design System. Hence, I modified the grouping within the design system placing Typography, Colours within the ‘Style’ atom and grouping all interactive elements such as Buttons, Images and Tables within a single unit – Components. This not only made the Design System more user-friendly but also helped us to establish a more cohesive and consistent approach to our email designs. Also, by leveraging design tokens, I was able to create a highly scalable and consistent visual system for UI development.
As I continued to build the design system and examine our existing emails, I discovered that we could further improve our efficiency and consistency by patternizing our email templates. Accordingly I identified different email types and created corresponding email templates for each type, which were added to a distinct section labelled Templates.
Few email templates created
Guidelines & Documentation
Effective documentation plays a vital role in defining and communicating the design, user experience, and engineering values, as well as ensuring consistent design and development. It enables stakeholders to understand and adopt new designs promoting collaboration and harmony.
It also serves to define and communicate the visual design, user experience and engineering values as well as a consistent design and development. This would allow stakeholders to quickly adopt to the new design and work in harmony.
To ensure comprehensive documentation, I followed some essential practices -
Document as I go – I jotted down everything I explored, including the discussions related to each component, whether or not, it was included in the final product. This approach helped others understand the context of each component and the reasoning behind choosing one over the other.
Centralised Documentation - Using real-time collaboration tools like Google docs offered a single-source of truth for all stakeholders. This approach allowed me to quickly answer any questions or suggestions, update real-time, and keep all stakeholders on the same page.
Way Forward
The email design system is a dynamic and ever-evolving process. In order to ensure that it remains effective, feedback from stakeholders are collected regularly to ensure that the design system remains up-to-date and meets the evolving needs of our users.
