Online Powersports Vehicle Marketplace for Polaris Xchange

Project Overview

Looking to have a unified marketplace where customers could shop for powersports vehicles online, Polaris partnered with Joydrive to build out a robust suite of tools to manage both the marketplace and dealer inventory.

This was a large endeavor with many collaborators working to deliver multiple products for Polaris. My contributions to this project included:

• Working with the brand team at Polaris to execute their vision for the brand while integrating it with Joydrive's technology
• Leading major product design initiatives for the wholesale auction system, authentication, demo rides, and dealer tools
• Collaborating on designs for marketing pages, the checkout process, saved search, and a number of smaller features
• Expanding Joydrive's multi-brand theme support to allow for custom fonts and varying styles across a number of components
• Implementing designs, components, and interactions in Elixir and Phoenix, and pairing with back-end developers for more complex features
• Spearheading multiple accessibility audits with a goal of achieving WCAG 2.1 compliance across five product verticals
• Creating and managing the Content Security Policy for SOC 2 compliance
• Building custom HTML email templates and testing across a number of email clients

Powersports Marketplace

The powersports marketplace is powered by Joydrive's technology, but it was imperative that everything align with Polaris' brand strategy and be tailored for powersports vehicles, which have different needs than automotive vehicles. Our design team worked closely with Polaris to design custom marketing pages and provide a strategy for how the search, vehicle detail, and checkout pages would adapt. From there, we collaborated with our team's Elixir developers to integrate the designs, apply conditional logic to shared templates, and build out powersports-focused features. This was an extremely iterative process leading up to launch, as we needed to achieve approval from both Joydrive and Polaris stakeholders.

The site was built with Elixir and Phoenix, and we made use of Phoenix LiveView for dynamic interactions. The marketplace features saved search capabilities, multi-level filtering, vehicle condition reports, demo rides, a favoriting system, guest checkout flow, customizable payment options, and instant pre-qualification with multiple lender integrations.

Dealer Tools

In addition to the marketplace, our team also built a number of dealer tools to handle inventory management, access lead information, and manage transactions. We also created a B2B wholesale auction system from the ground up, including robust auction management and live bidding.

I led product design initiatives for the auction system and multiple dealer tools, including an accessibility retooling of data visualizations. My overarching goals for these products were to create intuitive user experiences and reduce information density without sacrificing critical details.

Due to the nature of this work, additional details about dealer tools and the wholesale auction can only be provided upon request. Send me an email if you want to learn more.

Accessibility Compliance

A critical piece of building the product suite for Polaris was ensuring accessibility compliance, specifically achieving WCAG 2.1 compliance. I led these efforts across five product verticals, including creating auditing checklists for each product, performing the audits against the W3C's guidelines, creating tickets for failing items, and collaborating on the improvements to fix problematic areas.

Since the design team was not involved in every piece of work, I also put together guidelines for developers on things they should be keeping in mind when building out new features or updating pages. Some of these guidelines included:

• Making sure heading tags are in sequential order
• How to manage visible focus for LiveView events, which dynamically update the page
• Using accessible color combinations and how to check color contrast in browser developer tools
• Ensuring all form fields have associated labels, help text, and error messages by using our form components
• Avoiding wrapping complex components in button or label tags to prevent invalid child elements

This is an ongoing effort at Joydrive, to ensure features both old and new are properly accessible.

Challenges

One of the main challenges of this work overall was creating a strategy and systems to handle a new brand built with Joydrive's technology that needed far more customization than what we had previously offered with our digital retailing tools. It wasn't enough to change some colors and a logo; we needed tighter control over the designs and content.

We accomplished this on the design and CSS fronts by extending our design system to make use of layered design tokens, and revising the Sass to allow significantly more overrides for theming. Check out the case study on multi-brand theme support for more details.

Another challenge came in the form of ensuring the wholesale auction system met accessibility requirements. These auctions included a number of complex features such as live bidding, listing management, and drag-and-drop features. I iterated through solutions for these challenges, including designing alternative controls for drag-and-drop functionality and handling aria-live announcements for visual changes as auctions receive new bids or other status changes.

Outcome

Polaris Xchange was launched in 2023 and has an ongoing feature development partnership with Joydrive. The partnership has allowed Polaris to offload the building and maintenance of the technology side, while still having an experience tailored to powersports vehicles. The launch was a success and inventory has continued to move through both the customer-facing marketplace and the dealer-focused wholesale auction.

View live site