Loading...

Overview

Organization: AmazonSmile, Amazon
Role: Only designer (UX + Visual)
Problem: Not all customers who selected a charity to support later returned to shop at smile.amazon.com
Measures for success: Increase in direct traffic to smile.amazon.com


Problem definition

One of our hypotheses for why some customers weren't returning to smile.amazon.com was that they didn't realize when they were at www.amazon.com instead of smile.amazon.com. The most important moments of the experience to notice this is when you first land at smile.amazon.com, because that's when you made the intentional decision to shop in support of your charity, and when you make your purchase, since that's the moment you actually generate a donation for your charity.


Process

Much of this process is confidential so this part will be intentionally brief. Initially we were going to incorporate the charity needs into another, already-existing system at Amazon. Soon after we started the project, we realized that building on top of this system would not only be a worse experience for the charity administrators, but also technically harder, than building our own system from scratch. This presented many challenges and opportunities to build an entire Amazon site from the ground up and involved creating several new experiences that hadn’t been done at Amazon before. Without something to leverage from elsewhere in the Amazon ecosystem, I had to invent as I went.

Ideally, I would have started with researching charity administrators directly, who were the target customer, but with the nature of the level of confidentiality for the project, that was not possible. Instead, I researched as much as I could through discussions with friends who worked at non-profits (without revealing confidential information,) and searching the web.


www.amazon.com top navigation

Showing what www.amazon.com looked like at the time for comparison


smile.amazon.com top navigation (before)

Showing what smile.amazon.com top nav looked like before, demonstrating that the only differences are the logo and a subtle line of text about the charity you're supporting


smile.amazon.com thank you page (before)

Showing the smile.amazon.com thank you page experience prior, featuring a very subtle banner featuring text that does not meet contrast ratio minimums across the top that differentiates it from the www.amazon.com version


Solution

To help make the difference more clear, we launched a test to add more visual differentiation between the two experiences. The first rollout of this test featured an auto-expanded popover when you landed at smile.amazon.com to reinforce the good choice you just made, and a more prominent thank you when you placed your purchase. The hope was that these feel-good messages would be missed if the customer shopped at www.amazon.com instead. While specific metrics are confidential, we saw a significant increase in direct transits for those customers who were in the testing group, and decided to roll the experiment out as a feature to all customers.


smile.amazon.com top navigation (after)

Showing a giant, and illustrated tool tip extending down from the top nav when you land at smile.amazon.com to differentiate it stronger and delightful illustrations


smile.amazon.com thank you page (after)

Showing a much taller, more prominent banner that calls out louder that you made a difference, with better contrast and clearer calls to action

2020 © Deana Jirak. Customizations & photography by Deana Jirak.    |    2018 © Elvish. Original template by ThemesBoss.