Credit Card Personalization
I created a feature on a credit union’s online banking platform that allows users to personalize the background of their credit or debit card with an image of their choice.
Overview
You may have one in your wallet already. If not, you have likely seen others with their own personalized credit or debit card. People love to put photos of their loving pets, smiling family, or muscle cars on their cards. I didn’t realize how popular of a feature it would be in the online banking system until I built it for a credit union.
Features
Single Sign On
Integrates with the online banking system through a single sign on process. When the user clicks on a menu item in online banking, the server sends an API request to a website I created and passes it the account number and other account details. Then my API validates the account and sends back a token that the user’s browser can load with a URL to authenticate the user.
SymXchange Integration
To communicate with the Symitar core server, my code uses a SymXchange API to get a user’s account details including the credit and debit cards on the user’s account.
Credit/Debit Card Selection
A user can have more than one credit or debit card on their account. I created a page that displays all of the cards on the user’s account. The user can then choose which card they would like to customize.
Image Upload
Once the user has selected the card they would like to personalize, the system allows the user to select an image from their computer (if they are using the website) or phone (if they are using the mobile app). If they are on the mobile app, they can pick a picture from their photo gallery or they can use the phone’s camera to take a picture.
After an image is selected, the browser uses some Javascript to resize the image to make upload as fast as possible. Then it sends the image to the server for processing.
After the image is received on the server, it verifies the image size and stores it on the server. Then it resizes the image in memory to a preview size and overlays a Visa logo, branding, fake card number, and fake expiration date. Then it sends that image back to the web browser to show the user what a printed card would look like.
At that point, the user can upload another image or accept the image as it is and complete the order.
Card Production
When the order is complete, the system generates an email to a few people in the Operations department at the credit union. The email contains an attachment with the image in the correct size for printing and another attachment with the preview image that the user saw when they placed the order.
An employee then reviews the image to make sure it follows the Visa guidelines. If the image is acceptable, they send the image to a specialized credit card printer (Matica) for production.
The user can then pick up the card at a credit union branch.
My Involvement
I was the only developer on this project. I created the module in the online banking system that performs the single sign on. I created the entire website that authenticates the user with the token from the single sign on and guides the user through the process of accepting terms, uploading an image, and completing the order. I also created the email process that sends the image to an employee for production.
A project manager created the specifications for the product and I worked with him to make sure the system met those specifications. I also worked with another credit union employee to ensure that the images created by the system met the specifications for the credit card printer.
I worked with other employees who tested the system after it was released to a staging environment and then to production.
I created the DNS entries for the website and set up the websites and web services on the Windows servers in both staging and production environments.
Results
The system has been very successful. The credit union averages over 150 orders per month.
If I were to able to have more say in the project, I would expand some of the features to allow users to view the status of their order after it was placed, to select the branch they would like to pick up their card at, and to cancel the order if they changed their mind. I would also automate some of the emails that the Operations department sends out to the customer to make the product less labor intensive.