Overview

MBNA Canada is the largest MasterCard issuer and the fourth largest credit card issuer in Canada offering both MBNA branded and Co-branded credit card products. MBNA serves many customers in Ottawa and Toronto. MBNA is a division of TD (The Toronto-Dominion Bank.) and have a total of approximately 5.8 million active accounts.

5.8M

My design reached an estimated audience of 5.8 Million MBNA Mastercard cardmembers.

My Role

Senior Visual Designer

Team: UGO/TD Agile Team

Software: Figma

About the project

A team of dedicated and talented professionals was set up to tackle the project which would span on several months. The task was to redesign the user interface to make it more engaging and add new features that would increase conversion. I joined and integrated an agile team of developers and hit the road running, creating visual components and design tokens that would then be integrated and deployed within MBNA mainframe.

High -Fidelity Prototype

Snapshot & Activity tabs

Using metaphor as a technique for illustrating the "Page not found" on the third screen below. The snapping kite string represent a broken connection. All visuals and illustration were done in Figma.

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 infuse 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 deadlines.

My Accounts, Menu Options, Updated Security

Accounts Balance & Page not Found

Design Highlights

My research consisted of learning about the company, learning about the brand, knowing the users and looking what was already out there on mobile devices. I then collected all the requirements that the BA's "business administrators" were looking to add within the app. Using an 8 grid pixel for sharp and clean responsive layout and MBNA color palettes, I started to work on several iterations which were reviewed and scrutinized by the team for approval. All the wireframes and prototyping were developed in Figma which was then sent straight to developers for final integration and deployment. The agile team kept a steady pace delivering the project by having several meetings during the day ensuring that all project scope and user stories were covered and on track.

Balance Transfer, Switch to Paperless and Login

Amount Transferable, Two step verification and Security Options

Settings and New Password

Final Results

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