TD Bank Operational comms
Email Design System
Overview
TD Bank's servicing, transactional, and notification emails are essential touchpoints in the customer journey, delivering important account information, transaction notifications, and account updates. My day to day work focused on transforming a fragmented message and customer experience into a consistent brand and user experience to ensure trust and consistency with TD clients.
Role
Lead designer
Work done
UX Design, UI Design, Design Research
Timeline
3 months
Problem
At the start the project, the banks email ecosystem was extremely fragmented. The bank has 4 primary brands (TD Canada, TD US, MBNA, and Wealth/Premium Clients) each with multiple sub-brands and products. Multiple departments would send communications with inconsistent styles, formatting, and different brand voices and tone - which didn’t reflect the banks global brand guidelines.
This led to customer confusion, a lack of legitimacy, and inefficiencies in producing consistent and working email content.
- various emails being sent out across the bank
Proposed Solution
A multi-brand email design system that would serve as the foundation for all TD Bank's email communications, based on the same foundational layouts
Modular email components
We created a library of reusable email components including headers, footers, buttons, and content blocks that could be assembled to create any operational email while maintaining brand consistency.
Standardized Templates
We designed a set of templates for different email types (notifications, statements, alerts, etc.) that followed consistent visual patterns while allowing for content flexibility.
Educational Workshops
We conducted training sessions with content designers, project managers and developers on how to structure emails as part of their working process.
Design Process
Visual Audit
Audited the existing emails across the bank in use to see how emails were being used
Design Foundations
Created a simplified version of the existing TD design system to limit variation seen on email
Templates
Established catchall templates for frequently used and recurring notifications
Test
See where the foundations and templates are working and where the team had gaps
Revisions
Outcomes
As MVP1 - we developed a comprehensive email design system that would serve as the foundation for all TD Bank's email communications.
Email Header
Indicator of which area of the bank the email is coming from
Email Body
Primary area where designers would have control and flexibility. Depending on use-case, message content can include Headlines, Icons, Paragraph copy, Links, Images, Data Tables, CTA Buttons, etc.
Footer Section
Optional footer links to mirror the footer experience seen on each respective footer site
Legal Section
Space for all the extra legal fluff we're legally obligated to add
Fluid design
When updating our email design strategy, we opted for a fluid design approach rather than traditional responsive design. This decision was driven by practical resource constraints and a focus on production efficiency.
Want to learn more?
This showcase only shows the polished end result. I’d love to walk you through the failed prototypes, the stakeholder trade-offs, and how we ended up here. Let me tell you all the details.