UI/UX • First Performance • Fintech

The Card-on-File (COF) product is one of the first major projects I handled at First Performance. Its primary purpose is to inform cardholders which merchants are storing their card information. The initial goal for COF is to deploy it as an add-on feature on our existing mobile app. Later it was developed into a product of its own.

The first phase of the project includes project discussion with the PM. Those discussions revolve around the following:

  • Identifying key persons I will be working with
  • Clarifying user stories, project brief, and requirements
  • Identifying timelines and schedule

After the initial discussions, I went straight ahead to do my research. I dug around for whatever information I could find about the card-on-file strategy of various card companies and competitors. After I have gathered enough information and I have familiarised myself with the concept and idea, I started the initial user flows.

Next up was to do sketches to flush out ideas and concepts. Low-fidelity mockups help me try out ideas quickly.

After flushing out all ideas through the use of low-fidelity mockups, I then started work on the mid-fidelity designs for initial review and feedback.

The mid-fidelity round was spent on simplifying the screens and the interaction between the cardholder and COF. One additional feature that was added was to use COF to improve the merchant information. This will be accomplished by gathering feedback from the cardholders, asking them to validate if the merchant information is correct or not.

Once the mid-fidelity designs have been finalized we opted to do an internal usability test using First Performance employees. The mobile developer assigned to our team started work on a prototype. Below is an example of the prototype I presented to the PM and mobile developer.

Before the usability test can begin, I created a survey in order for us to determine and recruit the correct participants within First Performance employees.

I then created the questions that will help us validate the COF product and the testing guidelines on working with the participants. These questions and guidelines were created and refined with the help of the PM. Because I work remotely, I gave advice to the PM on how to properly set up the testing environment and what tools to use.

Once all of that was done, the PM handled the scheduling of the participants, the location, and the setup. Guidance and explanation was handled by the PM and another team member. My task was to observe the participants through remote video conferencing and write down my notes and observations.

The initial flow for identifying if a transaction is storing a cardholder’s card information is via the transaction history. The idea is that when a cardholder clicks on an e-commerce transaction and it’s their first time to use COF, an automatic alert will be shown to the cardholder. This alert will ask the cardholder to identify if the transaction is storing their card information. The transaction that was reported will be marked as COF.

Once the cardholder has answered the question, a new modal will appear which instructs them on how to report e-commerce transactions.

On our usability test, this initial flow and concept have confused our participants:

  • Upon visiting an already reported e-commerce transaction, some were looking for the same alert experience shown to first time users.
  • Participants could not clearly identify which transactions are e-commerce and which are not.
  • The report icon was barely noticeable.

However, usability testing feedback on the main COF screen was mostly positive. Most Tasked were easily completed with the exception of the following:

  • Participants were having difficulty grouping duplicate merchants.
  • Participants could not identify out-of-place transactions in the history section.

At the end of each usability test, we discuss our observations and findings. When all the testing was complete, I documented all our notes and identified problem areas, gave possible solutions and then created my final report and recommendations for approval to the PM.

With the results gathered on our initial usability test, I proceeded to create the high-fidelity version of the design using the insights we gathered from the test.

We then set out to do another round of usability tests, this time recruiting real-world participants. The response have been mostly positive but the issue of grouping duplicate merchants still remained. Participants could not seem to understand how to do it. Due to time constraints and availability, the idea of grouping duplicate merchants was abandoned.

The finalized design is the result of the feedback and insights we gathered on internal and real-world participants. I cannot stress enough the value of conducting a usability test. It has helped us determine the direction of COF, it has helped us validate/invalidate our assumptions and it has helped us understand that what’s obvious to us might not be obvious to the participant.