TD Canada Trust
UX Design + HTML Email Development
Working with a team of designers, developers and strategists, we created a cohesive 1:1 (CRM) Email design system for the Canadian and US markets. With a defined series of communication templates from transactional to offer-based, we transformed our process into a seamless, drag and drop, modular system, allowing our team to reduce risk and increase speed-to-market.
DESIGN SYSTEM
To bring the email design system to life, we created a series of pre-defined email templates along with a library of corresponding content modules. We implemented a single column, fully responsive design to simplify content, streamline development and create a more consistent experience across platforms.
EMAIL AUTHORING TOOL
This tool was built for both developers and non-developers alike. We wanted to create a simple drag and drop tool to build out html email templates with a series of pre-defined modules that could be easily pulled in and re-ordered, integrating collapsible or repeatable components within each module. Beginning with an MVP version, we worked through the stages of sketching, wire-framing, prototyping and usability testing to create an interface that would allow for a significant reduction in development and QA time.
With our MVP version in place, we proposed simple updates to the user interface that would create a more intuitive and user-friendly experience. These recommendations included consolidating the drag and drop components in a wider frame to reduce scrolling, defining clear page sections, and creating a consistent treatment for fields, labels and buttons.
HTML, CSS + AMPscript
Based on the creative design system, we built out a series of HTML modules with consistent layout, styling and functionality, which would serve as a library to be pulled from for the development of each campaign. Each template incorporates AMPscript logic to allow for highly personalized and dynamic content. This library of templates and content modules is stored in a GIT repository, allowing the team to easily share code and leverage relevant templates.
