Tempo Email Design System
2021
When I first joined the team, Tempo’s emails were being designed on an ad-hoc basis. Each email was built as a separate project and design varied wildly from designer to designer. Because we lacked a concrete system of communication between designers, marketing managers, and engineers, coded emails did not visually match the final design file.
Over two weeks, I created the CRM Design Guidelines and Source of Truth, which included visual guidelines, 70+ components adjustable for mobile and desktop, pre-built email templates, a process framework deck, and project markers for best file practices.
The Design Guidelines cut design time by over 50%, allowed for marketing managers to easily utilize templates, increased the ratio of live text in each email from under 20% to over 90%, and cemented a consistent brand visual language.
Over two weeks, I created the CRM Design Guidelines and Source of Truth, which included visual guidelines, 70+ components adjustable for mobile and desktop, pre-built email templates, a process framework deck, and project markers for best file practices.
The Design Guidelines cut design time by over 50%, allowed for marketing managers to easily utilize templates, increased the ratio of live text in each email from under 20% to over 90%, and cemented a consistent brand visual language.
![](https://freight.cargo.site/t/original/i/c459650381348f4535fb04d4484f79be82163f17faddaf01ad79f2b581576563/Components.png)
![](https://freight.cargo.site/t/original/i/e5844677d539c7a8a0a8281ba1ecd825a05581c72a660e4661c5ab9a7cc64f76/Email-4.png)
![](https://freight.cargo.site/t/original/i/6ddeaf08c6794d820cc5e0cc7d600c7acad44971542e58c4337c27a0ccec7148/Email-5.png)
![](https://freight.cargo.site/t/original/i/4edd5d3533374b7c9bdb4334af1f52cc6d2f29eba1d34e9ee7a7b068f849ba7b/Email-6.png)
![](https://freight.cargo.site/t/original/i/c62a57eda1d534a51867c3a3b08a9263c0a93e540761e597d9bfd830ef2ea486/Email-7.png)
![](https://freight.cargo.site/t/original/i/2790dba34afb0b209f065253d93d2fdf201c87a3edb7be3102b1d319289b5851/Email-8.png)