Getting it right:

When I joined Visa,

I knew I was in for a challenge. After designing for checkout experiences for years, and doing numerous user testing and A/B testing on different checkout experiences, I knew the checkout solution I inherited here needed more than just a little TLC. It was clear there were several areas we could improve by providing:

  • Better user guidance
  • Less confusing navigation
  • A simplified UI framework

The overall experience wasn’t seamless, and it didn’t align to core checkout principles that are key in creating an effective and efficient experience. It was a classic case study of what not to do.

THE PROCESS

Having worked on checkout experiences in the past, I was well aware of which features spelled success. To create a functional solution that still “delights” requires meeting certain criteria, and any product, business, or design decisions should align to these core checkout principles I created. In my mind, there are no negotiations—the checkout experience has to be:

  • Fast, safe, and predictable
  • Seamless and transparent
  • Must move to a model of confirmations only. Any decisions are exceptions.
  • Above all, don’t make our users think.

This was the foundation for our entire redesign.

I think the reason for the initial misdirection was a lack of understanding about how to really integrate a design-driven experience.

To make these changes, we partnered closely with our product and development teams to come up with a process that got everyone on the same page. We had several all-day working sessions and broke down all the use cases and requirements necessary for the experience to be designed and built. Based on the findings, both the design and development team could scope out estimates and come up with a timeline of deliverables.

As a devotee of human centered design, I needed to figure out exactly what made users tick.

It’s all about the users

Quite simply, the interface needed to help customers navigate the app from point A to point B without confusion. After all, the goal is to make Visa Checkout as easy and hassle-free as possible. With that in mind, we created or leveraged:

  • Google Maps API to auto-fill addresses
  • Input masking to help users understand the data format
  • Fun animation and page transitions to increase speed
  • A guest checkout solution that didn’t require an account
  • Smarter error handling for rapid password recovery
  • An improved “Create Password” experience

After many inter-departmental discussions, the magic came down to improving the functionality of the button. The newly designed, robust and dynamic Visa Checkout button is more interactive, animated, enables customers to easily review payment information and designate or add a different card.

perfecting via iteration

The redesign took about six months for the development team to build. The design team iterated and evolved the design over the course of about eight months. We did multiple prototypes on both desktop and mobile, and socialized the idea and the experience to get folks excited about the product. To help validate the design and experience, we put it through two different rounds of user testing that helped push the experience to be even better. The final design was launched externally on August 18, 2015.

In my opinion, our redesigned experience is vastly different from anything right now in the market. We now have improved conversion rates at checkout and I hope it will continue to rise far beyond our expectations.