TD Bank

TEAM:

1 Project Manager, 3 UI/System Designers, 5 Developers

PROJECT TYPE:

CMS Migration Project
(2 years)

MY ROLE:

UI/System Designer

OUTPUT:

Live website

TAGS: Systems design, UI design, quality assurance, migration, Adobe Experience Manager, front-end development, usability testing

OVERVIEW

As a designer on TD Bank's DCX (Digital Customer Experience) team, I helped migrate 4 websites to a new CMS platform. This project established design standards for large-scale management, enhanced UX, and ensured WCAG compliance. We created a shared component library and standardized UI elements in Figma, achieving visual consistency across desktop, tablet, and mobile devices.

This project is confidential and certain details are hidden to respect the client's privacy.

OVERVIEW

Project Goal

We were tasked to migrate TD Bank’s national websites from Tridion to Adobe Experience Manager while preserving the existing content + brand.

Style Guide

We leveraged the existing TD brand system to create a cohesive experience during migration.

Component Library

Upon auditing the existing components on the previous CMS, we developed a new system that included accessibility criteria.

UX Testing

I tested components on web, tablet, mobile devices while flagging usability issues to resolve with developers in JIRA.

Result

Successfully migrated websites: TD Bank (Personal Banking), TD Wealth, TD Investing, TD Asset Management

Project Goal

The project's primary challenge was to migrate TD Bank’s national websites with over 15 million users onto a new CMS platform, Adobe Experience Manager, while:

  • preserving the company's established visual design system across all devices

  • maintaining content integrity and consistency during the transfer

  • ensuring responsive UX for seamless experiences across desktop, tablet, and mobile devices

  • upholding strict accessibility standards to maintain WCAG compliance.

Style Guide

During this project, we ensured that our new components aligned with TD’s brand identity by carefully adhering to their existing style guide. By doing so, we preserved the brand's integrity and created a cohesive and recognizable user experience across all touchpoints. This included maintaining consistency with the bank’s established:

  • Colors

  • Typography

  • Iconography

  • Button styles

  • Logos

  • Overall visual treatment

Component Library

Our team implemented a shared component library of to improve efficiency and consistency across cross-functional teams including developers, content strategists, and stakeholders. Our component library included individual Figma files where we outlined the following:

  • Usage Guidelines (with live examples)

  • Component Anatomy + Specifications

  • Spacing/Margins

  • Variations

  • Accessibility Criteria

  • Documentation for Developers

UX Component Testing

Throughout the migration process, quality assurance testing was crucial. To ensure a positive user experience, we focused on issues that could hinder user satisfaction such as technical errors, visual inconsistencies, and usability challenges. I identified and resolved more than 300 interface issues in JIRA, collaborating closely with developers and stakeholders to ensure design standards and WCAG compliance across devices was maintained.

By considering user interactions, I tested various scenarios and flows across devices to ensure everything functioned correctly without bugs or technical errors. Our approach included testing technical scenarios such as input validation, error handling, and system performance under different conditions. We conducted these tests at various stages to catch and fix bugs early, ensuring the product remained stable and reliable.

Interested in learning more?

Please contact me privately if you'd like an in-depth walkthrough of this project.