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 mobile web, desktop, and app. Additionally, conversion rate of protection-eligible products increased.

Role: Product Designer

Tools: Figma

Team: Product Manager, Engineers, Analytics

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 and make attachment more accessible.

App component

In the 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 present 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 allow customers to attach services with a single click using a checkbox or radio button, streamlining the selection process

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

  • Many keep 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, 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 of the existing web component on product detail pages for assembly and protection eligible products. Data showed insignificant change in attachment rates as a result of this update.

Phase 2

In Phase 2 simplified the component by making services attachable via checkbox and accessible 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 add-on services experience to the Wayfair app. The new design allows customers to attach services directly on app product detail pages for assembly and protection eligible products. This created a consistent and unified flow for customers across both web and mobile 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 show 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%.

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 on the mini cart and cart pages, as well as when the component would be rolled out on 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. This ensures a consistent and unified experience for attaching add-on services, whether on the product page, in the full cart, or within the mini cart.