Visa Checkout was introduced to simplify and streamline online payments for retailers and their consumers. With a strict focus on creating a seamless core experience, it has helped online merchants decrease cart abandonment by over 30%.

Visa Checkout was introduced to simplify and streamline online payments for retailers and their consumers. With a strict focus on creating a seamless core experience, it has helped online merchants decrease cart abandonment by over 30%.

Visa Checkout was introduced to simplify and streamline online payments for retailers and their consumers. With a strict focus on creating a seamless core experience, it has helped online merchants decrease cart abandonment by over 30%.

Visa Checkout was introduced to simplify and streamline online payments for retailers and their consumers. With a strict focus on creating a seamless core experience, it has helped online merchants decrease cart abandonment by over 30%.

Visa Checkout was introduced to simplify and streamline online payments for retailers and their consumers. With a strict focus on creating a seamless core experience, it has helped online merchants decrease cart abandonment by over 30%.

Visa Checkout Collage

As a result of Visa Checkout's rapid growth from 4m users in 2014 to 16m with 100's thousands of merchants in 25 countries users in 2016, the design team's continuous focus was to build upon and refine the primary web experience. The lack of attention, unfortunately, left the iOS and Android SDKs a bit antiquated. Especially in comparison to the drastic changes we were making for the web version. However, on the bright side, we were able to hit the ground running due to all of the knowledge we had gained while validating the web experience. The previous research ultimately expedited the discovery process by removing the initial hunches and presumptions of what makes an effective checkout experience. 

In addition to the various types of checkout experiences we had to account for, we also had a slew of business objectives that included the flexibility for merchants customizations. Such as the ability to enable a "guest" (disabled Visa Checkout sign up) flow and creating a semi white-labeled solution that allowed merchants to inject their brand in specific areas. At the time, these types of customizations were one of the key features that differentiated us from our competitors. So there were critical considerations as the design team crafted the experience.

Regardless of the readiness of our initial discovery, we still needed to evaluate how our applied findings worked within the context of mobile merchant apps. To do this, we partnered with GFK and performed a series of RITE testing sessions in their UX lab based in Chicago. Contrary to our habits of typically testing in San Francisco, we wanted to validate our experience and previous assumptions in a market that wasn't as submerged in technology as it is in the Bay Area.

On this project, I was responsible for leading a team of designers, researchers, and engineers to create, develop, test, and validate a refined SDK experience in addition to continued explorations of the Visa Checkout button utilized on the merchant's app.

As a result of Visa Checkout's rapid growth from 4m users in 2014 to 16m with 100's thousands of merchants in 25 countries users in 2016, the design team's continuous focus was to build upon and refine the primary web experience. The lack of attention, unfortunately, left the iOS and Android SDKs a bit antiquated. Especially in comparison to the drastic changes we were making for the web version. However, on the bright side, we were able to hit the ground running due to all of the knowledge we had gained while validating the web experience. The previous research ultimately expedited the discovery process by removing the initial hunches and presumptions of what makes an effective checkout experience. 

In addition to the various types of checkout experiences we had to account for, we also had a slew of business objectives that included the flexibility for merchants customizations. Such as the ability to enable a "guest" (disabled Visa Checkout sign up) flow and creating a semi white-labeled solution that allowed merchants to inject their brand in specific areas. At the time, these types of customizations were one of the key features that differentiated us from our competitors. So there were critical considerations as the design team crafted the experience.

Regardless of the readiness of our initial discovery, we still needed to evaluate how our applied findings worked within the context of mobile merchant apps. To do this, we partnered with GFK and performed a series of RITE testing sessions in their UX lab based in Chicago. Contrary to our habits of typically testing in San Francisco, we wanted to validate our experience and previous assumptions in a market that wasn't as submerged in technology as it is in the Bay Area.

On this project, I was responsible for leading a team of designers, researchers, and engineers to create, develop, test, and validate a refined SDK experience in addition to continued explorations of the Visa Checkout button utilized on the merchant's app.

While there was some acknowledgment for use cases involving card on file and digital purchases, the majority of merchants who offer Visa Checkout typically utilize the full checkout experience. This form-frenzy flow includes collecting contact information, delivery information, and a payment method. So as we were developing this solution, we wanted to ensure we could provide users with a delightful experience. I mean, who enjoys filling out all those forms while they're checking out online?

With that said, here are a few of our considerations while creating the new user experience:

  • Create a seamless experience and giving users a feeling that they haven't departed the merchant's app while utilizing Visa Checkout.
  • Simplify and streamline data entry. Repurposing and pre-populating data the user is entering as they proceed throughout the flow and auto-filling addresses with the Google Places API.
  • Breaking up the data input by means of "chunking" and distributing the process into various steps. This would help give users the perception of speed and accomplishment as they proceeded through the sign-up flow. 
  • Aim to test and validate the most complex (contact + billing + delivery+payment/billing) experience while bearing in mind the other checkout use cases.
  • Taking advantage of Visa's library of stored card art. We found in previous studies that surfacing the card art gives the user visual reassurance by representing the physical cards in their hands on screen.
Visa Checkout: New User Enrollment

Above: primary new user flow. 

The primary objective of the returning user experience was to get the customer through the checkout flow as quickly as possible. We also needed to produce a solution that had a scale capable of handling various types of merchant checkout use cases.

The happy path of the full checkout flow allows users to get through the experience with as little as two clicks. This, of course, has a depends on the merchant experience, payment preference, and other checkout preferences. We also took advantage of Visa's card art library to create a sense of familiarity as they proceed through the checkout experience. 

With that said, here are a few of our considerations while creating the returning user experience:

  • Encourage users to utilize biometrics to decrease cognitive effort while signing in. 
  • Remain cognizant of the merchant's flow outside of the Visa Checkout experience.
  • Utilize the card art of participating issuers whenever possible.
  • Give a sense of familiarity by giving users the feeling that they haven't left the mobile app experience.
Visa Checkout: Returning User Flow

Above: primary returning flow. 

Part of Visa's business strategy behind its rapid growth was partially due to sponsored offers with select high-profile merchants. Majority of the time, however, we relied heavily on the merchant on the advertising portion, so the marketing team approached us and asked if we could dest and test a solution that could help with their advertising within the product. 

After a couple of sessions with product and engineering, we were able to develop a design and implementation strategy that had little to no cost to build. Because the merchant accesses the Visa Checkout button assets via the SDK, Visa can control the assets that are displayed explicitly within their checkout flow. The only constraints we had to endure was making sure our solution conformed to the button real estate requirements already in place. We also wanted to ensure the design execution provided some contrast to the other checkout options to intrigue and entice the user.

Results from testing varied from user to user. Some participants viewed the button in a similar vein of a banner ad, but most were intrigued and enticed enough to click it at least. 

Visa Checkout: Full Button
Visa Checkout: POS Button

Above: example animation displaying an offer. 

Based on the testing in Chicago, GFK gave us an average UX score of 5.2 out of 6 by the end a week. Most of the problems needing improvements were secondary and tertiary features such as the scan card feature and addressing the "banner ad" feel of the Visa Checkout button.

Above: the final primary new user flow from testing.