Amazon Checkout Redesign Exercise — Part II: Shopping Cart
Please, note: this is an exercise. Its purpose is not to create business solutions, but to practice creating them in a simulated environment. The power of guessing is applied to form business goals and metrics.
You will find links to the prototypes and other parts of the exercise at the end of this article.
The input
Let’s take a quick look at how shopping cart view currently looks and functions at Amazon.com:
Well, it works, but let’s see if we can find some room for improvement. In this exercise, we’ll design a prototype in three steps. First, we’ll set the layout and put some brains into cart items. Second, we’ll add a feature to ease decision making for impulsive buyers. And finally, even more logic will be implemented together with a better layout, some smaller features and animation.
Last time we left off with two versions of navigation. This exercise is based on the checkout-centric one (A1). Later it will make sense to apply same changes to step-based navigation too, so both variants can be tested within the overall experience. For now, let’s focus on the shopping cart.
Step 1. Cleaning up, putting brains
Let’s start with some basic stuff: cleaning up the layout, and putting some brains into the prototype.
Current shopping cart view looks like a victim of multiple business goals, that came disconnected in time and nature, gradually cluterring the UI. Let’s try to create clear visual and logical groups of information to simplify the understanding of the view.
Also, current version of the prototype isn’t too smart: it should at least let testers add items, change their quantity, and remove them from the cart.
Seems like a good set of requirements to start with:
With a solid ground set, it’s time to introduce some major updates to the UX.
Step 2. Quick preview
By design the view is full of elements that don’t exactly belong to the state of our shopping cart. Amazon definitely wants to up-sell, which is why smart algorithms and lists show relevant content all over the page. But the question is: how likely are you to make a decision to press “Add to cart” button based on a small photo and title of the item? You’ve got to be really familiar with the product, otherwise you will have to leave the cart and study the details on a different page. Let’s introduce quick preview, that allows us to see product details without leaving the cart.
There are plenty of ways to implement this, and it can be a subject to a separate prototyping session. Also, there are some great implementations that can serve as a source of inspiration: macOS and iOS allow to preview content with force-/3d-touch, Dropbox Paper shows a preview of the document when hovering over a link to it, to name a few.
Now, for the details.
Step 3. Small touches
With basic logic, layout and Quick Preview implemented, it’s time to take a closer look at some smaller details:
- Save for later. This is an important feature worth including into this prototype. If the subtotal amount of dollars is an unpleasant surprise for a user when she opens the shopping cart, she’ll start removing items from it.
- Emphasis. Even though styling is out of the scope for this prototype, we want to create a well-prioritized composition using white space, fonts, and basic colors.
- Animation. A small, yet powerful touch, that complements the compositions and help users understand what goes where after interacting with the UI
At this point, if we had real business goals, we would be implementing a billion of other details and interactions to innovate, test and analyze each one of them.
Conclusion
Another part of the checkout experience is done, leaving many decisions to test, and many gaps to fill with great ideas. Go ahead and give prototypes a try and hit me up with your thoughts on Twitter. We’ll be updating all parts in the last episode, so your ideas have a decent chance of making it into the final iteration!
You can find the prototypes here:
Don’t forget to subscribe and I’ll see you in Part III: Shipping and Payment Details Redesign.
