Projects

Amazon

Amazon Bestselling Book Map

Goals

Develop an interactive site component that highlights Amazon’s bestselling books of 2020.

Context

Amazon had a great year in book sales in 2020, and to get in even more on the action they came up with the idea to drive additional book sales by showing customers the most-loved books in their area.

The Problem

Amazon wanted to highlight its bestselling books of 2020 in a way that felt engaging and relevant to customers across the United States. Simply listing popular titles would not capture the regional differences in reading trends or encourage users to explore beyond their own preferences.

The challenge was designing a component that could clearly visualize this data while remaining flexible enough to live across different areas of the Amazon ecosystem. The experience needed to quickly communicate which books were popular in each state while keeping the interaction simple and easy to understand.

What we designed and why

We designed a interactive map component that could be used anywhere within the amazon site ecosystem. In order to do this we had to ask ourselves a question. How do we design a component that can blend seamlessly within any page.

To do this, I initially explored creative with heavy use of Amazon’s color palette. But in the end a more straightforward approach took shape. Most of Amazon’s website is on a white background especially on product pages and even in articles.

So in the end, I went in that direction, still exploring things such as whether or not the books should be visible. But since we wanted the user to focus on their state and the book secondarily, the map became the primary visual element.

Challenges

Solutions

How will the map work on mobile devices since the states would be too small to click on?

In order for the experience to work on mobile, I had to rethink it slightly. Instead of clicking on the map, the user would use a dropdown menu to select their state first and that would reveal the book.

Development constraints due to Ceros caused issues building a native dropdown menu for mobile.

Manually create the lists of states by creating a component that felt like a dropdown but really wasn’t.