twice as nice

Client:  TD Bank - US       Project Date:  2016
About the Project
TD Bank reached out to us to build a responsive calculator to showcase their suite of credit cards. Everyone else in market had separate tools for comparing products and calculating rewards, so we thought - why not save our users some work and combine the two into one All-In-One experience.
My Role
UX / UI 
I worked as the lead UX/UI designer for project. This project was also one of the first to be created in TD's new web standards - "Emerald". Because Emerald was still being defined at the time of this project, our tool helped refine some of its components.
About the Project

TD Bank reached out to us to build a responsive calculator to showcase their suite of credit cards. Everyone else in market had separate tools for comparing products and calculating rewards, so we thought - why not save our users some work and combine the two into one All-In-One experience.

My Role

UX / UI   
I worked as the lead UX/UI designer for project. This project was also one of the first to be created in TD's new web standards - "Emerald". Because Emerald was still being defined at the time of this project, our tool helped refine some of its components. View the live calculator here

the emerald standard

We designed the tool to reflect "Emerald" – TD's updated responsive web standards. Below is a quick snapshot of the tool at 3 breakpoints.

Tablet

how to tool works

The goal of the tool is to educate the user on TD's credit card products, and showcase the rewards that they could earn based on their monthly spending. By seeing how easy it is to earn cash back and rewards, the user could then apply for a card at the click of a button.

The user can add monthly spend value in increments of $50 by tapping on the + button

If the user travels with Air Canada, or has Business Expenses, they could expand these categories to add spending here.

cash vs. points

Although the user collects "points or miles" for every credit card purchase they make, these rewards are easily converted to cash. We had the calculator default to show the cash value of rewards earned because we felt it was more impactful.

However, the user can choose to toggle between viewing cash back or rewards

two ways to compare

The user can compare the card products by swiping through them on mobile, or using the circular arrow buttons on desktop. Alternatively, they can use the dropdown menu beside each credit card name to select between the different card products.

the ameritrade advantage

Users interested in the Ameritrade credit card can earn an extra 10% cash back. TD wanted us to highlight this advantage, so we choose to showcase it in a slide-up panel that's activated on tap.

As the user scrolls down the page to read through the credit card feature table, an anchored header and footer appear. This allows the user to always know what credit card product they're viewing, and enables them to apply at the touch of a button.

related works

Want to see more?  Let’s go back to my  Portfolio