How do you make mobile payment process smoother?

10 Jan

We all deal with payments regularly and many of us may get accustomed to do mobile payments, at least I am. I use Citi and Chase mobile apps regularly. Here I think the contrast between them is not as strong as BAD and GOOD, but more like OK and MUCH BETTER.

i took some screenshots of the two apps’ payment process, after comparison, you will see one is clearly superior than the other.

1. Process a payment on Citi’s mobile app:

cii_mobile_payment

If you view the 1st image, which is citi’s mobile payment process, you can tell it’s nice and clean, quite simple to understand. Red circles are the buttons you are supposed to press if you want to move to the next step. However, when I came across page 3,  for at least twice when I used this version of their app, I tried to click the yellow circled area. I can see that now they had improved their UI design, in previous version the yellow circled area says “Make a payment”, and the background color was in either blue or green. After 2 errors, I started to question myself, but then quickly realized it’s not my fault, it was the design.

Let’s look at Chase’s design for compare.

2. Process a payment on Chase’s mobile app:

chase_mobile payment process

Again, red circled areas are the areas you should press to continue. Comparing to Citi’s design, it looks quite similar, but I have not errored once. Why? The action buttons are consistent. From the very beginning, its UI style is a block of square with white font, so easy to learn and get used to. Your eye just look for the blue block naturally. And the position of these buttons stay around the same area, strengthening your belief that they belong to the same group.

Now if we look at Citi’s design again. You all of a sudden realize where the problem is. The first button “Make a Payment” uses the UI style of bright block color, then once you enter this feature, the action/next buttons became thin charaters in blue color infront of white background. The thing you just learned had to be unlearned. What makes it worse was that they throw out this purple block color area to confuse you. Bad bad designers aren’t they!

Lastly, if we compare the overall layout of the two designs. you see Citi has a more complicated menu layout, on page 1, main menu bar is on the bottom, on page 2 3 4, the menu goes up. Chase is more consistent, having a hamburger menu button on the left upper corner, and states your current status on the top bar, with action buttons on the lower bottom.

Overall, I think citi app is still functional and sleek looking, but chase has a much better interaction design and layout. From this comparison, we learned how to create a smoother and more efficient flow for users.

Leave a Reply

Your email address will not be published. Required fields are marked *