Test
.png)
Role: UX Designer
Project Length: 2 months. Implemented July 2022
Type: Website enhancement (Checkout Process)
Business Impact: Annualized $2M in incremental revenue
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 (5,900+ 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.
.png)
.png)
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.
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.
.png)
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.
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.
.png)
Exploring how Pay In Store and Gift Card might be available after selecting the "More Options" payment method.
.png)
.png)
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.
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.
.png)
.png){kind=small}