Casper, Case Study

Project Overview
Casper is an ecommerce platform that offers various lifestyle products related to sleep. Casper uses cross selling as a way to give users quick access to products related to their online purchases. One of the ways cross sell is displayed on-site is within the shopping cart. As a designer I was tasked with redesigning cross sell to help drive conversion and improve overall user experience.

Cross sell before a design update; displayed as a carousel of auto-rotating products on desktop and mobile. 

Cross sell before a design update; displayed as a carousel of auto-rotating products on desktop and mobile. 

In this iteration of cross sell (above), three products are displayed within an auto-rotating carousel at the bottom of the shopping cart. Products are displayed based on the size of an item already added to cart by the user. This iteration of cross sell underperforms. There are a couple hypotheses as to why:

Hypotheses
1. The auto-rotating carousel is moving too quickly.
2. Users can't find an easy way to move between slides (the dragging interaction is strange on mobile).
3. Users aren't noticing cross sell in its current design treatment.

Design Objectives
1. Add arrows to carousel so it's clear to the user that they can move between products easily.
2. Provide supporting copy to give users context as to why the product they're viewing is relevant to them.
3. Make cross sell section more prominent and inviting to the user through stylistic element changes and user interaction.

1/2/3 A sampling of different design iterations throughout the process of the project.

1/2/3 A sampling of different design iterations throughout the process of the project.

An 'add to cart' CTA makes it explicitly clear to the user what action is to take place (1). Directional left/right arrows make clear to the user how to cycle through the cross sell product offerings with ease (1). The carousel is given color to help make it more visually prominent.

Final design for desktop and mobile.

Final design for desktop and mobile.

The final design incorporates a conversational headline to clarify to the user why the product they're seeing is relevant to them. The calm blue is more inviting and allows product photography to stand out. The card-like layout declutters the visual complexity of the layout allowing the user to focus on the larger 'add to cart' CTA and directional left/right arrow buttons. 

Results
Overall, the cross sell carousel was very successful. It increased attachment rate on all three products significantly. This increase was consistent on desktop and mobile devices. Additionally, the test did not cause people to abandon orders in their cart.


For this project I collaborated directly with a product design lead, program manager, web developer, data and analytics team members and a copywriter. Result data was gathered over a two week period of A/B testing.