Skip to main content

Making our emails modular and more personalised

By Stina Slingo, Senior Creative Designer

Mar 4th 2022

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.

Built from a need

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.

Creating a design system

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.

Exploration, exploration, exploration

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.

Building modular

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.

Always evolving

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.

We're on a mission to help everyone move their finances forward and gain financial momentum.

TotallyMoney is an independent credit broker, not a lender. Our comparison service works with most leading lenders, covering the majority of the market. Though we may be paid a fee by lenders or brokers this never influences how our products are ranked.

We don't provide financial advice. Product information is obtained from independent sources and rates displayed may vary depending on your personal circumstances. While we make every effort to ensure that information is up to date, you should always confirm the terms of the offer with the product provider.

TotallyMoney is owned and operated by TotallyMoney Limited which is registered in England and Wales (Company Registration Number 06205695). TotallyMoney Limited is an Appointed Representative of TM Connect Limited, which is registered in England and Wales (Company Registration Number 06967012) and authorised and regulated by the Financial Conduct Authority in respect of consumer credit related activities (FCA FRN: 511936). Trading Address and Registered Office: Chapter House, 16 Brunswick Place, London N1 6DZ. Credit is available, subject to status, only to UK residents aged 18 or over.

We use cookies as described in our Cookie Policy. Continue browsing or click to accept.