Overview

MBNA Mastercard is a huge win for TD. A significant impact on the overall customer experience while addressing the number one requirement for MBNA's transformation to a digital first brand. Prioritizing existing customer communications and minimal paid marketing, it has generated over 26M downloads to date and have seen an increase in Balance Transfers, Credit Limit Increases, and e-Statements that has led to app generated revenue of over $5.16 million.

2.5M

My design reached an estimated audience of 2.5 Million new MBNA Mastercard onboarders.

My Role

Senior Visual Designer

Team: UGO/TD Agile Team

Software: Figma

About the Project

This project was recognized as a personal banking challenge winner for the second time by TD. A large team of agile developers together with UI and UX designers was setup to tackle this huge project. Daily agile meetings and schedules was done to align with the deliveries of components and visual assets. More budgets was allocated to hire Product Designers and Delivery managers. The project was scheduled to span on an average of 14 months time with possibility of extension.

Research and Iteration Process

Research and planning was done by a dedicated team of UX Designers, who compiled all data available and shared it to the team through low-fidelity wireframe and sketches. I initially launched the research and visual audits on already available MBNA Mastercard and infused the data collected into the company branding from which I generated a color palette, typographic styles and iconography. Using UI/UX best practices, I worked on several iterations of the design stages, submitting to the team each week for approval and final design. The whole process was well defined and regulated so as to stay on track due to time constraint.

Design Highlights

I designed and animated all the micro-animation mainly on each screens. I initially prototype the animation within Figma and sent for approval, once it was approved, I handed the original source file to the development teams so that they can retrieved the codes which they would use to build the app. The animation layers had several which was assigned to an easing value to render the movement flawless and smooth.

Launch and Setup Screen flow

Add Authorized Users, Security Information Updates and Welcome screens

Balance Transfer, Setup Card and Create New Password.

Security Email, Reset Password and 2 Steps Verification

Account Setup landing screens

Confirmation for Paperless Statements

Final Results

Streamlined and revamped an aging MBNA Mastercard user interface and modernized it to be trendy, efficient and engaging providing full accessibility features within the design itself to provide a better experience to the users. Based form user feedback, the mobile app redesign was very welcomed and rate conversion went up. MBNA was happy with the direction taken and extended for projects spanning several months.