Jason Goldstein
UX/UI Designer

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).

Free and Discounted Accessories
Free and Discounted Accessories
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.



Free and Discounted Accessories
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.
Free and Discounted Accessories

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.


Free and Discounted Accessories

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.

Free and Discounted Accessories
Free and Discounted Accessories


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

Free and Discounted Accessories


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

Free and Discounted Accessories

While a discounted accessory defaults to not being selected. 

Wireframes

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

Free and Discounted Accessories

Result 

Stakeholders were very happy with the result.