Following reports of user error when selecting a payment during checkout, I worked with a business-to-business company to create re-designed functionality when paying with a credit card. In addition, the existing credit card information was relocated from the general "Settings" page to a new "Payment Profile" page to increase ease-of-use.
Aiming for simplification with increased functionality, the new design spans over three pages on two websites, including both desktop and mobile versions.
Research
I began the discovery process by utilizing interviews with current customers to define the problem statement.
Once initial prototypes were created, I then tested them with users to verify the functionality and further discover user preferences.
Checkout and Invoice Payment Pages
Checkout Interactive Prototype (Click HERE for highlighted clickable hotspots)
Mobile Checkout Prototype (Click HERE for highlighted clickable hotspots).
Invoice Page Prototype (Click HERE for highlighted clickable hotspots).
Mobile Invoice Page Prototype (Click HERE for highlighted clickable hotspots).
Payment Profile Page
Previously, customers' payment information was located under a general "Settings" page. As users expressed difficulty locating it, I created a new payment profile page, housing all information regarding payment types.
Payment Profile Prototype (Click HERE for highlighted clickable hotspots).
Mobile Payment Profile Prototype (Click HERE for highlighted clickable hotspots).
Mexico Version
The Uline.mx website features an additional payment method—bank transfers. The payment method was added on both the checkout/invoice payment pages and the payment profile page.
