Notable Challenges
Limited access to web analytics data
Difficulty testing prototypes with users
No standardized design system
Phasing out this payment method aimed to drive customers toward higher-converting fulfillment options, secure payment upfront, and improve the overall Pickup Rate. Additionally, Afterpay was introduced as a new payment option.
Research Call Outs
Competitive analysis of checkout payment methods, including insights from Baymard
Quantitative research was limited due to lack of access to tools like Adobe Analytics and Fullstory. With the UX Research team still being built, there were no researchers to collaborate with.
Looking back, having Fullstory earlier would have allowed for better web analytics and user session observations in Checkout. I also would have conducted unmoderated user testing with UserZoom to refine the experience.
If a customer research panel had been available, I would have conducted user interviews to explore payment preferences and understand why some customers preferred Pay In Store.
Research Observations
Direct competitors did not offer a Pay In Store option. NAPA also provided more payment methods than competitors, who typically only offered a credit card and a third-party option like PayPal.
Payment methods were typically displayed as either radio buttons or tiles.
Competitive analysis of AutoZone
Competitive analysis of Advance Auto Parts
CarParts and Walmart had notable examples of nesting additional payment methods within a primary option.
Example from Walmart online checkout
Example from Carparts online checkout
Audit of existing user flows
Along with competitive analysis and secondary research, I reviewed NAPA Online’s Checkout flow, especially for Pay In Store scenarios. I also analyzed competitor user flows step by step on both desktop and mobile.
Ideation
I designed multiple concepts and regularly collaborated with Product and Engineering to assess feasibility. For mobile, we focused on optimizing for limited space and touch interactions.
The team refined concepts through multiple design reviews, developing high-fidelity wireframes. From February to April, the project faced several delays due to Afterpay integration challenges and higher-priority initiatives.
Feedback and Reviews
High-fidelity designs underwent multiple reviews with the Product team, incorporating feedback from each session to refine and iterate on the approach.
Discussions focused on the visual treatment of selected states, mobile layouts, customer messaging, and handling edge cases where certain payment methods were unavailable.
Final Designs
Key challenges included limited access to web analytics, restrictions on user testing, and the absence of a standardized design system for consistent desktop and mobile experiences.
This project drove significant business value, generating $2M in annual incremental revenue while showcasing the impact of UX design. It also provided valuable lessons on how I might have approached it differently with more resources and insights.
Here are screenshots of the live design currently on the website. Right now, "Pay In Store" is the only option under "More Options," but the team plans to add Gift Cards as another payment method in the future.
