Pinterest introduced a new design language and sought to update all surfaces, including emails. Over time, they had diverged significantly from a cohesive design system, with different stakeholders building new templates and components, contributing to a subpar user experience.
We recognised an opportunity to build a modular system, reducing tech debt and enabling teams to create emails more consistent with our new design language efficiently. We believed that this would increase open rates and engagement as well, thereby future-proofing our systems.
After conducting an extensive audit, we discovered more than 50 components and templates in circulation respectively, each with different specs and various degrees of optimization for different screen sizes.
Many of the templates were owned by cross-functional teams, so we worked closely with them to reevaluate their specific requirements and were able to reduce the number of templates to just over 20.
By exploring different versions of the various components, we conducted A/B testing to determine which performed best, working down from the highest to the lowest volume templates. After updating each template, the overall impact was measured to ensure optimal performance.
The new modular framework for emails was optimised for all screen sizes, with responsive and streamlined components that also supported interactive features via AMP.
We worked closely with the systems design team to optimise designs for dark mode and make them fully accessible whilst creating a Figma library that enabled designers to quickly build new emails.
As a result of the new modular templates, we were able to substantially increase team efficiency and guarantee a cohesive product quality across the organisation. While we expected metrics to remain relatively flat, we saw a substantial increase in weekly active users as well.
