Native App Behavior for the Web – Credit Card Processing for Dunkin Donuts

Greatly improve the UX of forms by diminishing correction frustration.

Goal: to design a usable and trustworthy checkout experience for a mobile app. In this example I create an easy card entry process that reduces unnecessary steps and corrections.
Solution: If a credit card entry process is too complicated customers may abandon the cart. All I did to improve the payment experience is to reduce the number of steps required in a transaction and reduce possibility of errors. My research indicated that native app behavior greatly improved the UX by diminishing correction frustration.  Now, online payments are faster and easier for this retailer’s customers.
I want to give a massive thank you to Zachary Forrest for putting together such a great script.
John Holt

Input Masks Design

Input masks integrate formatting cues directly into an input field to help signal how to correctly answer a question. These formatting instructions are automatically included in an input and cannot be removed by a user. More importantly, a user cannot enter other non-valid characters into the input field. Check out the demo at Masked Input Plugin (video below).