FlixBus - UX redesign of the "Save credit card" feature

After witnessing a bad experience while purchasing a bus ticket, I decided to offer a solution for the "save credit card" feature inside the FlixBus iOS app.

I conducted research with my coworkers that frequently used the FlixBus app.

Problem

Users forgot that they saved credit card for future buying, and they didn't know which credit card input field to use because there was two of them.

8/10 respondents didn't know until I explained that the first input filed was a previously saved card.

The problem is that feature to keep a card for a future purchase wasn't clear and logical to the end-user.

So the final challenge of reducing the time to purchase tickets with these features has failed.

Users comments

I gave the same task to 10 people, and that was to complete the purchasing process. They have all stopped at the same point, and that is: inserting a card number.

I wrote some of the comments that they said during testing.

Below is a rough sketch of eye movement in the credit card section, which was sketched based on respondents' feedback on which element they are currently paying attention.

Solution

Based on the given feedback, I created two low-fidelity wireframes and tested both on the same group of people.

Six out of ten persons voted for wireframe number two.

Why this kind of layout?

I think that it is more apparent with extra negative space that two other methods of payments are different from the first one, with the user paying more attention to the first one.

I also shrank the CCV input field to match the familiar look of the same input field on different platforms. Users also assumed that because it's a long input field, they need to put in their credit card number because the CCV is a short number. The size of the input field didn't match their expectations in terms of size and familiarity with previous checkout experience.