Overview

TD was updating and re-designing the mobile UI interface for its First Class Travel Visa Infinite. Based on latest research data conducted, many users were unable to reach their goals finding answers or were simply unaware of the many functionalities the app provided. There was pain points across the whole process and TD wanted to amend the negative experience to make it a more delightful one, considering that there was more than 8 Million TD customers in Canada only using the actual mobile app.

11M

My design reached an estimated audience of 11 Million TD First Class Travel Visa Infinite cardmembers.

My Role

Senior Visual Designer

Team: TD Agile Team

Software: Figma

About the project

I was transferred to the Mobile Pod at TD, and joined an agile team which consisted of developers and UX designers. I was tasked to run several visuals audits on the existing mobile app and see how to improve the whole experience making it more accessible and engaging to the users, eliminating many pain points and streamlining the whole process. I was also involved with re-designing TD's own Design System which was named "TD Diamond Design System". I focused on re-usable design tokens and visual components with Typography and Iconography. Conducted several user research on site at TD with groups of customers who were invited at the bank to create user stories and unique persona's and retrieve more information and insights from each one of them, information that would be used to better enhance the experience.

Research and Iteration Process

My research focused on improving the experience by first running a visual audit of what was available and making a list of design tokens and components to improve and upgrade, then used all the gathered information from the user research I did with the customers at the bank to define profile and persona's. Added the new requirements the bank was looking and worked together with B.A's " Business Administrators" to define the end goal which was to delight and assist the users in their quest. After all these were laid out, I started the wireframe and iteration process, until we got to the final high fidelity prototype which were animated and presented to the stakeholders for approval.

Visual Audits

Below are screens from the Visual Audits I ran on each section of the mobile app to identify key problems and find solutions to make the experience delightful for the user at the same time to eliminate all pain points. The audits were conducted on both IOS and Android.

Design Highlights

As I was the lead designer on the project, I used my illustrative skills to generate a series of sleek characters from scratch and injected TD's green color branding into each one of them. The illustrations were all stylish, trendy and had a modern look and feel. When combined with the bank data such as Current balance and Pending transactions, the pages look very streamlined and modern and was a delight for the users. At the same time optimization was the key word. All the visuals went through intense optimization and compression to reduce file sizes for quick loading. All illustrations were handled in Figma.

Illustration created entirely in Figma, using pen tool and bezier nodes, injected with company branding color & ready for Micro-animations and deployment on mobile platforms.

Transferring the skills acquired from Adobe Illustrator over the years to more recent software like Figma was an easy process. Figma is a robust platform that has a wealth of tools and streamlined exclusively for User Experience Design. Its closest competitor is Adobe XD.

Responsive design for Desktop and Tablet

Below is the desktop/laptop version, completely responsive. The white space around the design helps with the TD green color contrast and keep the whole design balanced, not cluttered with data and make for a more dynamic and user friendly look. The many biometric features added withiapp also provides for an element of trust.

Page breakpoints

Here are the breakpoints applied to desktop, tablet and mobile. I personally wanted the experience to be seamless whatever platform the users may be using. It took me a great deal of time to perfect the breakpoints. After the design I worked very closely and pushed hard with the team of developers to get everything pixel perfect right as I'm a very detail oriented person. The 2 key words here is " a seamless experience" and "pixel perfect layout"

Smooth, sleek and optimised page breakpoints for multiple mobile devices.

Final Results

The app was then extended to other platforms and I worked on all the breaking points for each devices, Mobile, Tablet and Desktop. The whole design, wireframe and prototyping process was done within Figma, for some coloring sequences and image editing, Photoshop was used.