ABOUT THE PROJECT
Amerisleep manufactures mattresses, bed bases, and pillows. The company's sells their products exclusively through their website and differentiates themselves by applying the latest technologies and using eco-friendly materials in their products. I designed components of their homepage, product pages, blog, and checkout.
MY ROLE
I was the sole UX Designer on these projects working closely with the engagement manager, client, and developers.
TOOLS
Sketch, Zeplin
YEAR
2017 - 2018
PROJECT: Mobile Promo Banner
HYPOTHESIS
Users who reach the deals page have a higher chance of spending compared to those who do not. On mobile, the percentage of users reaching the deals page is significantly less than the percentage of users reaching the deals page on desktop. Getting more users to the deals page on mobile will increase the amount of purchases made.
DESIGN PROCESS
ORIGINAL
On desktop, the deals page can be accessed through the main menu. However, on mobile, the deals page is hard to find because it isn't displayed on the landing page. The user has to click on the menu to find it listed below the other items.
SOLUTION
Variation B
Variation C
By adding a deals button to the banner, users will see it more easily and the percentage of users reaching the deals page will increase. For Variation C, I also added a close icon to allow to user to close the banner and have a larger viewport.
RESULTS
-
In both Variation B and C, about 6% of all mobile visitors clicked on the banner to get to the see deals page.
-
Add to cart clicks were lower for the 2 variations, but completed checkouts were higher.
-
Variation C showed 18.5% more orders on mobile, 13% increase in revenue. The ability to close the banner helped mobile users complete checkout (10% of Variation C users clicked the X to close the banner). The fact that Variation C showed an increase in sales while Variation B (just the see deals button but no close button) did not, suggests that the ability to close the banner helped mobile users complete checkout.