I accepted the situation: Payment applications have already been launched in the market, and many merchants worldwide are using them. I gathered data from merchants' feedback and the usability testing results conducted by our product team to identify the problems and pain points faced by the users. By analyzing the user testing results, I devised solutions that can improve our customer experiences.

Design Iteration

There was a significant issue with the payment app's card presentation screen on touch-based devices. Consumers were unsure where to insert, swipe, or tap their cards due to unclear icons. As a result, they had to ask merchants for assistance every time they tried to pay with their cards. The icons were supposed to represent inserting a card from the right and swiping it on the top, but they needed to indicate these directions clearly. I reviewed the usability testing results document and found a solution. One UI received a 100% rating for an animation demonstrating how to remove the card. Inspired by these results, I proposed using the animation as an indicator to solve the issue and tested it. The animation idea was a game changer, and I iterated it to ensure it was the best possible option.

1️⃣ Unnecessary Card UI used

2️⃣ Unclear images where and how to insert, swipe, and tap.

3️⃣ Confusing 'Your Payment Method' word

4️⃣ No options to change the payment type, such as a gift card or Alipay, etc. Consumers didn't know which payment types merchants accepted.

5️⃣ Low contrast colors and thin, light color font style not legible for accessible users

1️⃣ Removed the general payment icons from this screen.

2️⃣ Created animation to demonstrate the card slot locations and how to use it.

3️⃣ Simplified text

4️⃣ Added 'Other' option to select other payments. Also, it displayed payment to inform which payment merchants accept.

5️⃣ Applied high contrast colors and bolder text for accessible users.

1️⃣ Number pad buttons are small and do not have enough contrast

2️⃣ Hard to read the text and unnecessary card layout placed

3️⃣ 'Delete' key buttons overused

1️⃣ Redesigned PIN pad screen with bolder, more prominent, and high-contrast number text.

2️⃣ Combined PIN input box and PIN pad screen.

3️⃣ Conducted A/B usability testing. The users were familiar with pressing the 'Delete' key button at the bottom left side of the PIN pad screen more than on the input box. 

1️⃣ Misleading tone caused users to remove the card accidentally.

2️⃣ Long and thin text

1️⃣ Revised the text in a user-friendly and straightforward way.

2️⃣ Simplified the text with a bolder style and spinner to indicate it was processing. 

We conducted a thorough investigation to identify the major problems with the card presentation screen, message screen, and PIN entry screen on our company's products. We used various methods such as usability testing, focus group interviews, paper prototype testing, and A/B testing. We carried out these tests in the office, cafeteria, and actual merchant stores. Based on the results, I made several design iterations to improve the design and provide a better experience to our merchants.

For instance, we conducted focus group interviews to understand the users' needs and feelings before the product redesign and long after its release. The focus groups were not meant to assess design usability but to discover what users want from a product - their thoughts and preferences.