Add-on services component

At Wayfair, many products are eligible for add-on services such as assembly and protection plans. A key KPI is the attachment rate of these services to eligible products. While customers could add services on product detail pages, in the mini cart (desktop), and in the cart, the existing experience was underperforming and not meeting attachment goals.

I led the redesign of the add-on services component, beginning with the product detail page. The updated design simplified the flow, clarified value, and improved visibility across devices, creating a more streamlined experience.

As a result, service attachment rates increased on mobile web, desktop, and app. Additionally, conversion rate of protection-eligible products increased.

Role: Product Designer

Team: Product Manager, Engineers, Analytics

Scope: Web and app

KPI: Add-on services attachment rates

Web component

On web, the existing component required customers to open a dropdown and then select a button to attach services. If they opened the Learn More sheet, they couldn’t add services directly from it. This created unnecessary friction and highlighted an opportunity to simplify the experience.

App component

In the Wayfair app, customers had to open a sheet to attach services, rather than adding them directly on the page. This revealed an opportunity to attach services directly on the product detail page, which would make it a consistent experience with web.

Competitors

To inform the redesign, I conducted a competitive analysis of how other retailers presented add-on services on product detail pages, including Amazon, Walmart, Target, Home Depot, and West Elm.

Takeaways

  • All brands had service prices immediately visible

  • All brands allowed customers to attach services with a single click using a checkbox or radio button, streamlining the selection process

  • Many brands displayed only one protection plan term length, reducing complexity

  • Many kept the section content-light by not displaying detailed value propositions for services

Exploration

Next, I explored new design directions for Wayfair’s add-on services component. My goal was to simplify the experience, show pricing up-front, reduce friction, and make services attachable with a single click.

Phase 1

To budget internal resources effectively and test the component with a subset of eligible products, the release was divided into phases. Phase 1 introduced pricing into the default state on web for assembly-eligible products. The data showed insignificant change in attachment rates as a result of this update.

Phase 2

Phase 2 simplified the component by making services attachable via checkbox and attachable from the informational Details overlays, while also removing value propositions to reduce visual clutter. These updates were rolled out on web product detail pages for assembly-eligible products.

Phase 2 led to significant increase in assembly and protection plan attachment rates and led to increased conversation rate of assembly and protection eligible products. Full results

Phase 3

Phase 3 brought the new experience to the Wayfair app. The new design allowed customers to attach services directly on app product detail pages. This created a consistent and unified flow for customers across both web and app platforms.

Phase 4

Following strong results on product detail pages, the new component was introduced in the cart on web, bringing the team closer to the goal of providing a consistent way to add services across the shopping experience.

Mobile web Prototype

Desktop prototype

Impact

The redesign of the add-on services experience improved the user flow and drove strong business results. Analytics provided data that showed the new design successfully increased attachment rates for both assembly and protection plans directly from the product detail page.

These changes were particularly impactful on mobile web, where we saw the highest lift: the assembly attachment rate increased by 11% and the protection plan attachment rate climbed by nearly 6%.

The improved user experience also positively impacted the conversion rates of service-eligible products. On mobile web, the conversion rate for assembly-eligible items increased by nearly 10% and for protection-eligible items by over 12%.

Through this project, I gained valuable experience designing a flexible component that could be used across multiple parts of the shopping journey. I also learned how to create adaptable design patterns for different service types and how to document components effectively for future reuse.

Documentation

Once the new component was validated with positive results, I collaborated with the engineering team to ensure its successful integration into Wayfair's component libraries. I created detailed documentation in the Figma design library, which allowed our engineers to seamlessly replicate the component in their code library for future use in the mini cart and cart pages, as well as product detail pages for installation-eligible products.

Installation

Installation is offered as an add-on service for many product categories, including appliances. After a successful rollout on assembly-eligible items, the component was expanded to installation-eligible items.

Mini cart

The new component will also be integrated into the desktop mini cart, which opens after a customer adds an item to cart. This will ensure a consistent and unified experience for attaching add-on services, whether on the product page, in the full cart, or within the mini cart.