Checkout Improvements

ChowNow

Checkout Improvements

ChowNow

Checkout Improvements

ChowNow

Details

Timeline

Two - four weeks

Timeline

Two - four weeks

Role

Primary IC, Lead designer

Team

With a product manager, engineer

Product

E-Commerce Web Service

The Brief

Create improvements on the diner-facing checkout page to improve conversion rates, reduce time to checkout, and mitigate errors.

Original Interface

The following image shows the original checkout page. I'll describe the problems we aimed to solve for the checkout flow.

The Brief

Create various improvements on the diner-facing checkout page to improve conversion rates, reduce time to checkout, and mitigate errors.

Payment Error Redesign

Problems to be solved:


  • Credit cards that require CVV re-entry are marked as “Invalid” and the process to re-enter CVV has unneeded friction. ChowNow invalidates CVVs for several reasons to help control fraud, including when a user adds a new delivery address, every 180 days and soon whenever a user logs in (web users are automatically logged out if they don’t start a session over a rolling 30-day period).

  • Saved credit cards that require CVV re-entry are marked as “Invalid” within the payment method selector, a label that doesn’t explicitly let the user know why or what is wrong with the card.

  • When re-entering a CVV, users must enter in all of their credit card information again, including the number, expiration date, CVV and zip code, when all that’s really needed is the CVV.



Solution:


After researching best practices and looking at competitor checkout flows, I proposed:

  • Highlight or single out the CVV prompt

  • Let users know that this is a security measure for their benefit, but with the least amount of text possible.

  • If the user doesn’t have their card on hand, they may want to use another option, like Paypal. Make it easy for them to switch payment option if they don’t want to re-enter their CVV.

  • Detect card type and use appropriate security code acronym or ask for a “Security Code” instead. This can help a user know what’s being asked for and how to find it.

  • Credit card numbers are created in a consistent way. American Express cards start with either 34 or 37. Mastercard numbers begin with 51–55. Visa cards start with 4. And so on. This information can be used to detect what type of credit card someone is using simply by looking at their credit card number.

I shared my design iterations with my product managers and engineers via Slack or Zoom to find out what was feasible


The following design helped decrease declined card/payment failure rates by ~60%.

Payment Error Redesign

Credit cards that require CVV re-entry are marked as “Invalid” and the process to re-enter CVV has unneeded friction. ChowNow invalidates CVVs for several reasons to help control fraud, including when a user adds a new delivery address, every 180 days and soon whenever a user logs in (web users are automatically logged out if they don’t start a session over a rolling 30-day period).
Saved credit cards that require CVV re-entry are marked as “Invalid” within the payment method selector, a label that doesn’t explicitly let the user know why or what is wrong with the card.

When re-entering a CVV, users must enter in all of their credit card information again, including the number, expiration date, CVV and zip code, when all that’s really needed is the CVV.


After researching best practices and looking at competitor checkout flows, I proposed:

  • Highlight or single out the CVV prompt

  • Let users know that this is a security measure for their benefit, but with the least amount of text possible.

  • If the user doesn’t have their card on hand, they may want to use another option, like Paypal. Make it easy for them to switch payment option if they don’t want to re-enter their CVV.

  • Detect card type and use appropriate security code acronym or ask for a “Security Code” instead. This can help a user know what’s being asked for and how to find it.

  • Credit card numbers are created in a consistent way. American Express cards start with either 34 or 37. Mastercard numbers begin with 51–55. Visa cards start with 4. And so on. This information can be used to detect what type of credit card someone is using simply by looking at their credit card number.


The design helped decrease declined card/payment failure rates by ~60%.

Process

I aimed to improve the user experience of the checkout process and increase our conversion rates by addressing these problems:

  • There is no way for new or unauthorized users to know that they have multiple and social pay options until they open the payment method modal by selecting the “Edit” icon.

  • If authenticated users have an issue with their saved card, they’ll have to go into the modal to switch to another pay option.



  • More saved cards create more technical burden. We want to encourage users to use fewer cards.

  • Improve the UX of payment in general.

Solution

  • More saved cards create more technical burden. We want to encourage users to use fewer cards.

  • Login requirement was one of the top reasons users cited for abandoning their orders, and we wanted to design multiple payments with guest checkout in mind for the future.

  • Redesign payment modal to make switching between options easier.

This design is in development.

Multiple Payments

I aimed to improve the user experience of the checkout process and increase our conversion rates by addressing these problems:

  • There is no way for new or unauthorized users to know that they have multiple and social pay options until they open the payment method modal by selecting the “Edit” icon.

  • If authenticated users have an issue with their saved card, they’ll have to go into the modal to switch to another pay option.



  • More saved cards create more technical burden. We want to encourage users to use fewer cards.

  • Improve the UX of payment in general.

Solution

  • More saved cards create more technical burden. We want to encourage users to use fewer cards.

  • Login requirement was one of the top reasons users cited for abandoning their orders, and we wanted to design multiple payments with guest checkout in mind for the future.

  • Redesign payment modal to make switching between options easier.

This design is in development.