Free and Discounted Accessories

Stakeholder Interviews | Whiteboarding | Wireframing | Annotating

Challenge

For this project, the primary goal of the stakeholders was to increase the number of customers who accept a free accessory when it is offered with the purchase of a new phone.

A secondary goal was to increase the number of customers who purchase a discounted accessory when it is offered with the purchase of a new phone.

Kickoff with Stakeholders

From meetings with stakeholders, I concluded:

1. Different experiences would be required for one accessory vs. multiple accessories.

2. While the primary goal was to increase customers who accepted a free accessory, we could also explore how this experience could be used for discounted accessories.

Whiteboarding

A fellow UX Designer and I debated a couple of ideas (see below).

Overlay

One idea that came out of this session was to use an overlay. I quickly rejected this idea as research had shown that customers generally didn't like overlays on Verizon's site. I felt it could cause friction and prevent customers from completing their purchase.

Carousel

I decided to use a carousel when the customer has a choice of free accessories.

It became clear that in the case of a free accessory, we should default to it being added to cart. This would increase the number of customers taking the free accessory and most importantly make it easy for the customer.

The challenge then became how to handle customers who did not want a free accessory.

Wireframes

In my wireframes I came up with a solution:

I put a carousel in an accordion. The accordion opens/closes based on whether the checkbox is selected.

Offers for free accessories defaulted to the checkbox being selected and the accordion being open.

I created the wireframes in Axure.

Unselecting the checkboxes removes the free accessory and closes the accordion.

Below, the accordion/carousel interaction is shown within the context of the full page of annotated wireframes.

Discounted accessories work the opposite way: they default to closed accordions that the customer must select to choose an item.

In the event a free accessory is offered without a choice of accessories, the one accessory is simply displayed and defaulted to being selected...

While a discounted accessory defaults to not being selected.

Wireframes

With some modifications, I was able to make the experience consistent on mobile.

Result

Stakeholders were very happy with the result.