Xpel
- Creative Direction
- E-commerce
- UX Design
- UI Design
- Custom Workshops
Headless E-Commerce Replatform & Redesign
XPEL offers a comprehensive array of protection films and coatings for automotive, watercraft, home, and office. The company sells products through independent installers, dealerships, OEMs, and DTC channels. They partnered with ZaneRay while seeking to modernize their tech stack and create a scalable platform that could support future international expansions while delivering a seamless, optimized user experience. The previous site struggled to effectively engage their broad B2B and DTC audiences.
A central focus of the replatform was to increase leads for the installer network, driving product sales and boosting demand for installations. Additionally, XPEL sought to raise brand awareness among consumers across new sectors, including marine and architectural applications, to encourage the adoption of XPEL solutions. As Creative Director, I worked with ZaneRay’s design and development teams to deliver a cutting-edge, headless e-commerce platform that addresses the needs of XPEL’s diverse customer base.
Discovery Led Strategy
My involvement in the project began with an in-depth discovery phase, where I led in-person workshops at XPEL’s headquarters to define project goals and align complex stakeholder priorities. After in-person workshops, the discovery effort between XPEL and ZaneRay’s design, development, and engineering teams continued and resulted in a clear roadmap, with a well-defined information architecture, content strategy, and technical requirements that guided the successful execution of the website.
An Architecture Optimized for Diverse Audiences
The old website blurred the lines between content for DTC and B2B audiences, making it challenging for users to find relevant information. A new information architecture and navigation experience were created that addresses this by clearly separating the shopping journey for consumer products from the content aimed at independent installers, dealerships, OEMs, and consumers seeking to learn about professional installation services. This streamlined approach ensures that each audience can easily locate and access content that serves their needs.
Installer Locator
The installer locator is the primary source of customer leads for the installation of XPELs protection product lines across automotive, marine, home, and aircraft. The previous installer locator was an uninspired list of installers by location and did not allow users to understand what coverage type each installer specialized in.
An elevated map-based experience was created that allows users to search for installers by location, see the distance from their location, and filter by products and coverage type. This map experience enables users to pan or zoom the map to see installers worldwide while maintaining the ability to filter by location if desired. In collaboration with XPEL's DAP engineering team, their internal API was leveraged to integrate installer data into a custom Google map.
Showcasing Xpel Products with Clarity
A challenge to overcome in the site redesign was effectively showcasing XPEL’s clear protection products in a digital format. To address this, we reimagined the product pages for professional installation of XPEL’s entire protection line, including protection films, window films, and ceramic coatings. These pages utilize the component library to create a media-rich experience featuring product benefits, educational content, and related aftercare products from the online store. Integrating video content was essential for demonstrating installation, explaining benefits, and showcasing the applied products across various coverage types.
Targeted Content for Professional Sectors
Targeted lead generation landing pages were developed for each of XPEL’s distinct B2B audiences, segmented by coverage type—automotive, marine, and home and office. Since XPEL’s protection products offer specialized benefits and training programs for each application, it was important to tailor the content to meet the specific needs of each professional.
Improved Product Merchandising
Product listing pages were introduced with a well-structured category taxonomy and robust filtering optimized for mobile, making it easy for users to browse products by size and coverage application. The product detail pages allow sections from the component library to be added, providing opportunities to showcase branded content, specifications and technical details, and product education.
A Platform for Brand Engagement and Education
The reimagined blog serves as an elevated platform for the brand to share community events coverage, product education, and company updates. These pages offer a flexible framework to highlight photography and products along with storytelling content.
