Book Shopping Cards
Create once render everywhere
Company
Amazon
Role
Product Designer
Year
2022
About the project
The Amazon Books Shopping team owned dozens of pages across seven surfaces in fourteen market places, adding up to hundreds of customer facing end points.
The primary objectives were to minimize the inconsistency across card patterns used on these pages by designing reusable components and establishing a framework called “Create once, render everywhere” that will effortlessly scale card patterns for all surfaces with a single click.
Thank you page
Books landing page
Discovery
The discovery phase started with an audit of the existing strategies for Amazon’s books shopping cards such as “Recommended for you”, “This week’s best-seller”, “Next in series”. Following that, an ideation session was facilitated to define a set of card patterns that could seamlessly cover for 80% of the current strategies. The outcome of this collaborative effort resulted in an initial set of card patterns.
Ideation session
Initial set of card patterns
Reason, Entity and Action
The cards were intentionally designed to align with common business goals, metrics, use-cases and customer expectations. Considering that the cards were going to be used by multiple teams, we created a framework called "Reason, Entity, and Action" to assist in governing the card pattern.
“Reason” is the reason why a strategy was created, “Entity” could be a book, author, an offer or an article and “Action” was the end goal of the card and how the success was going to be measured.
When an interaction solves a user pain point, identifying design solutions that work universally becomes crucial.
Challenges
The most compelling interaction patterns only worked on some surfaces where native features are available, and accessibility was always a challenge when images and text were not displayed on load.
If the right solution was a progressive reveal of meta-data to achieve the right density, we chose the right interaction mechanism that is best for each surface.
Reason, Entity, Action
Card interaction x Volume of metadata
Surfaces
Desktop
Tablet
Mobile (iOS, Android)
eReader
Email
Outcome
Five distinct card patterns capable of scaling to 6 surfaces showcasing 3 content types (book, author, article) were delivered.
Card patterns:
Shoveler
Hero
Standard
4-Pack
List
Full set of card patterns
Design annotations
A shoveler card scaling to various surfaces
Impact
The investment in time, effort, and number of team members dedicated to a single card pattern decreased significantly
Design system documentation played a pivotal role in reducing the number of meetings and Slack discussions
The new book shopping card patterns coincided with Kindle Vella's successful launch
Thank you page (before)
Thank you page (after)
Kindle Vella