Work Inquiries
work@ohio.clbthemes.com
Ph: +1.831.306.6725

Transforming Digital Customer Experience

In my role as a product designer and UX researcher for NAPAOnline and NAPA PROLink, I embarked on a comprehensive project to enhance user experiences across these critical platforms.

Task

E-commerce Replatform

  • Role

    UX Researcher, Product Designer

  • Methods

    Contextual Inquiries, Interaction Design, UX Strategy

  • Product Types

    B2B, B2C, Ecommerce

  • Tools

    Figma, Mouseflow,

Through a comprehensive approach to enhancing user experience on NAPAOnline and NAPA PROLink, involving intentional ux design and research decisions, significant contributions were made to the digital success of Genuine Parts Company.

⬤ 01. Background

Improving customer experience by increasing digital capabilities

Genuine Parts Company (GPC) is a leading automotive parts distributor in North America, with a strong U.S. presence through the NAPA Auto Parts network. While B2C platforms were being modernized, B2B products such as NAPA PROLink suffered from inconsistent UI patterns due to the lack of a shared design system, resulting in a fragmented user experience and inefficiencies for development teams.

I also helped drive the creation of a centralized design system to standardize components, patterns, and interaction guidelines across platforms. I partnered with product, engineering, and research to align the system with real user needs through journey mapping and UX research. This work embedded UX standards into the development workflow and supported scalable, consistent product delivery.

The visuals on this page were tweaked due to confidentiality.

⬤ 02. UX Goals

Top UX Goals for Ecommerce Modernization

1. Improve Search Experience: Enhance the search functionality to provide faster, more accurate, and user-friendly results, ensuring customers can easily find the products they need.

2. Digital Transformation: Modernize the ecommerce platform to leverage the latest technologies, improving overall user experience and operational efficiency.

3. Enable Efficiency at Scale: Standardize UI components and workflows to streamline design and development, while creating a scalable foundation for future growth.

4. Drive Conversion : Improve search usability so customers can find products faster, engage more easily, and complete purchases with less friction.

⬤ 03. Methods + Insights

360 Experience Transformation and Redesign

NAPAOnline(B2C) & ProLink(B2B) Key Highlight:

  • Faceted Navigation: Enhanced the faceted navigation to highlight specific filters, improving user ease in finding parts.
Refine Search Suggestion
Product Listing Page
Guaranteed Fit Filter
  • Search Experience: Refined the search experience by understanding user tasks and scenarios, working closely with technical and product teams.
Enter Car Info
Enter Year Made
Enter Search Term
Product Listing Page
  • Design Systems: Developed design systems that ensured consistency across platforms. Impact: These improvements enhanced user experience, significantly contributing to sales growth.
Product Listing Page - Desktop View
Product Listing Page - Tablet View
Product Listing Page - Mobile VIew

Design System
See the Result Live

Step 1.

Initial Research

Focused on identifying UI inconsistencies and alignment gaps across ProLink to inform a unified design system.

• UI Inventory & Competitive Review
Audited existing components and patterns across products and compared them with industry-standard B2B platforms to identify duplication, gaps, and best practices.

• Stakeholder Interviews
Interviewed designers, engineers, and product managers to surface shared pain points, including unclear standards and duplicated effort.

• Heuristic Evaluation
Evaluated interfaces against usability principles to identify friction, accessibility gaps, and non-conformance.

Step 2.

Design System Definition & Build

Focused on defining the visual foundations and building a scalable, production-ready design system aligned with ProLink’s needs.

• Visual Language
Defined an accessible color palette, typographic hierarchy, and spacing system to establish a consistent visual foundation.

• Component Library
Built a flexible, extensible component library in Figma using atomic design principles.
o Leveraged IBM’s Carbon Design System as a starting point to accelerate consistency
o Recreated and extended the existing Sketch library in Figma
o Defined robust component variants and states (e.g., button types, form validation states) to support multiple use cases while preserving system integrity.

• Interaction & Pattern Guidelines
Documented core interaction patterns such as navigation, search, and recommendations, along with animation and transition guidelines. All documentation lived in Figma to support collaboration, demos, and developer handoff.

Step 3.

Testing & Implementation

Focused on validating the design system with real users and ensuring smooth adoption during development.

• Testing & Refinement
Conducted A/B testing on key user flows to measure task success and completion time, then refined the design system to address edge cases and real-world usage.

• Engineering Collaboration
Partnered closely with engineers to provide timely design guidance, streamline communication, and support the full development lifecycle, including collaboration with offshore teams.

• Implementation & QA
Used Rally to manage UX work within the SDLC, addressed UX issues during build, and established a regular UX QA rhythm to review implementations and resolve design-related stories.

  • UX Research: Conducted user interviews to understand workflows for the PROLink Estimator. Discovered that non-mechanics needed guidance in selecting parts and estimating labor costs, leading to the addition of workflows and approval processes to boost user confidence.
  • UX Strategy: Acted as the liaison for product ideation, partnering closely with engineering and product teams during agile activities, including backlog grooming and refinement. Facilitated design reviews, user interviews, QA testing, demos, and dev handoff, ensuring seamless transitions and alignment with business goals. Impact: Digitalization of the PROLink platform modernized the user experience and aligned with competitive standards, contributing to sales growth. Ensured a consistent user experience across NAPAOnline, PROLink, and other internal platforms, reducing confusion and simplifying development and training processes.
⬤ 04. Impacts

Through a comprehensive approach to enhancing user experience on NAPAOnline and NAPA PROLink, involving thoughtful design and rigorous user research, significant contributions were made to the digital success of Genuine Parts Company.

Digital Transformation

Both B2Band B2C platforms underwent significant digital transformation, enhancing user experience.

Consistency

Provided a consistent user experience across platforms, reducing confusion and easing development and training processes.

Sales Growth

Digital efforts resulted in 14% increased sales, enhancing overall business performance.

Back