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.
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
We designed the tool to reflect "Emerald" – TD's updated responsive web standards. Below is a quick snapshot of the tool at 3 breakpoints.
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.
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
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.
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.