Making our emails modular and more personalised

One of our core values at TotallyMoney is ‘build, measure, learn’. This means we’re constantly assessing and measuring our performance, to learn about what we could do better. That way, we can help even more people move their finances forward.

As part of this, we’ve scaled our email funnel significantly, particularly our reactive emails, which are sent to customers based on their interactions within the app. This has required us to add new templates to our CRM library, thereby increasing the size and complexity of the CRM design system.

Initially, our library grew organically, with new templates and emails added as and when they were needed by the wider CRM and marketing teams.

However, as we’ve scaled our email journeys, with our emails getting increasingly personalised to individual customers, the content needed to be re-thought to allow for more flexibility. 

We came to the conclusion that the best way to achieve this was to rebuild our emails using modular blocks. This would allow our content to be combined in multiple ways, while retaining a cohesive look and feel and accommodating mobile-first design. This means the emails are designed for mobile, as that’s how the majority of customers view our emails but also scale up to tablet and desktop.

With all this in mind, the decision was made to create a new CRM design system, which was a whole other challenge.

Our design apps, Figma and ZeroHeight, have functionality which allow us to develop a design system, ensuring ultimate consistency across our native mobile app, web app, and emails.

We started by making sure all the different teams who would use the design system — creative design, product, social, and CRM — were aligned on the objectives and purpose of the design system.

As a senior creative designer, I was responsible for setting up and building out the CRM design library. Meanwhile, two of our other designers, Harshil Varsani and Charlie Lewis, contributed new patterns and highlighted areas to improve it. That work then fed into the CRM design system, with added documentation on how to use them.

In order to get the right balance, I started by transforming our existing email templates to new, modular, block-based emails. This meant I could make sure the structure and hierarchy were correct, before I did anything else, which helped when designing the blocks for other email templates.

Because the email blocks were intended to be dropped into any email, they needed to all work well with each other. They could then be combined together for various different types of content, depending on the email.

As each block only uses one codebase, which would then scale up or down based on screen size, this meant we had a few things to consider when designing.

For one, it was crucial each block had a consistent look and feel. This is where the work-in-progress design system came in, helping to coordinate everything across the various blocks. At the same time, it was important one block didn’t cause layout issues with another, meaning we had to test each block with every other block, from both a design and code side.

The new library has been designed to allow for more freedom for both the CRM team responsible for sending the emails, and the copy team. It means individual blocks can be switched ‘on’ or ‘off’ depending on the content and who the email is being sent to.

And it makes maintaining and updating the email library is much easier, plus ensures consistency across all the blocks.

As with anything, the CRM design system will evolve and expand over time. It’s hard to fully see all of the ways that the designs might be used in the future, but if you build flexibility into them from the start, this will allow them to stretch more when in use.