Optimizing Payment Methods for NAPA Online

NAPA Online website

Background

NAPA Online is the e-commerce website for NAPA’s consumer business (aftermarket auto parts). It has approximately 7.2M monthly visits, and generates millions of dollars in revenue per month. For this project, the NAPA Online team wanted to phase out an outdated payment method and optimize the Check Out process.

This payment method allows the customer to place their order online and pay for it at a NAPA store (6,000+ locations nationwide). Our hypothesis was that NAPA was losing potential sales as customers reserved online, but did not pick up their order and complete payment.
‍

Example of the "Pay In Store" method selected in the previous layout.

A simplified diagram of the customer's purchase journey. During the checkout process, customers can choose to either ship to a residential address, or pick up at a nearby NAPA store. The option to Pay in Store is only offered if the customer chooses to pick up their order at a store.

By phasing this payment method out, the hope was to direct customers to other fulfillment methods with higher conversion rates, capture payment upfront, and help improve the overall Pickup rate. Additionally, Afterpay was being introduced as a new payment method.


As an initial test, the Product team hid the Pay In Store payment method over 2 months in specific store regions to observe customer engagement and any negative impacts. No negative impacts on sales were observed with the test, and Pickup Rate actually increased by 8% with net positive sales.

Research Call Outs

Competitive analysis focused on the payment methods in the Checkout experiences of direct competitors and other retailers. I also looked extensively at Baymard for examples of payment method approaches.

  • Quantitative research was limited, because I did not have access to analytics from tools such as Adobe Analytics or Fullstory at the time. Our UX Research team was also being built up, so there were no researchers I could team up with.
  • Looking back, I would have gathered more web analytics data and observed user sessions around the Checkout experience if Fullstory had been available earlier. Additionally, I would have liked to do unmoderated user testing with a platform such as UserZoom and iterate based on these findings.
  • If a customer research panel had been available, I would have conducted user interviews them on payment methods and dig into why certain customers might want to Pay In Store.

Research Observations

  • The option to Pay In Store was not offered by direct competitors. NAPA also offers more payment methods than direct competitors (which typically had 1-2 payment methods of a Credit Card and a third party such as PayPal)
  • Payment methods were primarily organized as radio buttons or tiles.
  • Carparts and Walmart had notable examples of folding other payment methods within another one.

Audit of existing user flows

In addition to competitive analysis and secondary research, I needed to better understand the existing Checkout flow for NAPA Online, particularly for scenarios where the customer wanted to Pay In Store. I also went through the same step by step process of analyzing user flows on competitor websites on both desktop and mobile.

Ideation

I designed several concepts and met with Product and Engineering stakeholders frequently to get their feedback on feasibility. Especially for mobile views, we had to think around limited space limitations and additional touch interactions.

The team went through several design reviews to refine concepts into high fidelity wireframes. From February to April, this project was placed on hold several times due to complications with the Afterpay integration and higher priority items.


Exploring how Pay In Store and Gift Card might be available after selecting the "More Options" payment method.

Feedback and Reviews

High fidelity designs were reviewed with the Product team several times. Each session highlighted changes from feedback that was shared during the previous reviews as we iterated on approaches.

Some topics of discussion included visual treatment of selected states, mobile layouts, messaging to the customer, and how to handle edge case scenarios or situations where certain payment methods were not available.

Final Designs

Notable challenges included a lack of visibility into web analytics data, limited ability to test prototypes with users, and no standardized design system to use for desktop and mobile layouts (visual design and development consistency).

However, it provided significant business value (annualized $2M in incremental revenue) and demonstrated how UX Design can make a positive impact. This project also provided a good opportunity to reflect on how I might have approached it differently, with the different resources and knowing what I know now.

Below are screenshots of the implemented design, currently live on the website. Currently the only option available under the "More Options" payment method is Pay In Store, but the team is planning to add Gift Card as another payment method.

Back to Top