Amazon

Discipline | UI, Motion

Duration | 10 Weeks

Introduction

Context

These interactions were created to enable the primary function of the site, which is online shopping, but able to function across all three platforms.

Challenge

Make interations that are instantly
recognizable for both their function and the Amazon brand while still being engaging and excitable.

Goals

To create a number of micro-interactions with the intent to create joy and eye candy, to pull the user in, without distracting the them.

Product Purchase

For the product puchase experience, I created an "add to cart" button that evokes a playful, tactile physical button: dark when innactive; lights up when active; shines when you hover; pushes in then pops back out with a click and release; and returns to the active state after "added to cart" is displayed.

When a selection between two alternatives is required I designed a toggle function where only one option can be active at any time, indicated by the Amazon yellow half circle strip, which rotates a half turn to indicate the chosen option.

Product Selection

When a number of choices is availible (for example: color, style, size) an easy way to scroll between choices was needed. I developed a multi-mode selector that highlihts each option as you rotate through the possibilities. The solution created a colorful background shape which animates for a playful, bouncy experience.

When a sequential decision process is required, a slider provides the appropriate user expirence. I designed the slider to communicate with the user through a combination of an animated sliding bubble and that grow when active.

Multiple Selection

For a microinteraction where a single, final choice is desired (for example: shipping address or method of payment) I opted for a solution that uses radio buttons that can be selected or deselected an unlimited number of times until the continue button is pressed, finalizing the decision.

For decisions where one or more selections may be made, I designed a stack of checkboxes that can be selected or deselected independently until the user is satisfied with the final combination and selects continue. The checkboxes are animated to grow
on hover, contract on click, and add color when selected, and do the reverse on deselection.