BT Date Picker

When we set out to redesign our mobile drop-in product, one of the design goals was improving the accuracy of card data provided by end-users. We reached our goal by providing a "No Error" experience while entering card data.

Instead of displaying lengthy error messages on mobile devices that required users to spend precious time reading, we opted to assist the input of properly formatted data the first time. When considering expiration dates, there were two common practice UI components we considered: select menus and a number input — neither option was good enough.

Select Menus

Pros:
• Allowed users to enter valid dates (not in the past)
• Simple

Cons:
• Scrolling months and years takes a long time
• The input rhythm breaks because everything else is text input

Text Input

Pros:
• Kept the input rhythm

Cons:
• Allowed users to enter invalid dates (in the past) - BIG NO NO
• Technically complex to have the data formatted properly.

...So what now?

Our Solution
Our solution was to create our own input method that in essence was the best of both worlds. Users could ONLY enter valid expiration dates in the present or future and preserved the input rhythm of virtual keyboard taps. As an added bonus, we were able to provide valid data in 2 taps instead of 4-6!

You can learn more about Braintree's mobile drop-in at the following links:

Drop-In for iOS
Drop-In for Android
Mobile Drop-In Update Announcement