Collect & Compare on Mobile

Designing a collect and compare feature and launching it across the entire Amazon Mobile suite of apps.

Project Background & Status

Fling is a useful way to set aside items of interest during a shopping experience without having to stop what you’re doing. Speed is important on mobile. Confined space is a major limitation on mobile. People sip apps on mobile phones for moments at a time. Currently in mobile shopping, customers must tap a product to see a detail page to evaluate it, then tap back and continue reviewing search results.

We’ve currently released Fling on across all tablets. Fling represents functionality to collect items of interest. It fits into a larger conversation Amazon is beginning to have with its customers experiences, which is compare. Compare at Amazon is or has been difficult to do particularly due to the size of its catalog; A billion plus items. The troubles in the meta data. Most of it doesn’t add up. Sure if you’re comparing two camera’s it absolutely might match up, but what about a toaster and a blender? Why would anyone compare those things? We don’t know, but that’s sort of the point. We don’t know. Our customers often teach us what we should be building.

We see current patterns though. You’re comparing two items on Amazon and you bring them up in separate browser tabs side by side. This way you can manually set the scroll where you want it and compare data yourself. You’re obviously capable and it works right? Yep. You start to notice funny things like “Why are the Prime Pantry ads different?” or “This one is $12 more expensive…” or how many more options one has over the other. These are actually pretty critical things to realize which you may not have picked up on by just navigating through Amazon.

Responsive image

Taking a look at this behavior the conversation shifted to… how do we do enable this for our customers so they don’t have to fuss with moving browsers around? Also, let’s do it on mobile first. Of course let’s do it on mobile first, it’s the most difficult! (and rewarding?)

What would a compare experience on mobile have to accomplish? There are two primary activities it breaks down into. The first is collecting items of interest and the second is comparing those items. Fling takes care of the first activity, and the second could be solved in a number of ways.

This is a large problem we’re still trying to solve at Amazon, so while I don’t have a comprehensive answer to what we’re going to do, there has been a lot of exploration of concepts which I will share. We do have some initial steps we are completing now to build the foundation for the complete experience which I will also show.

Responsive image

Project Components

To better understand compare, I broke the project into 5 distinct areas we needed to solve. I will be diving deeper into each segment and showing both higher fidelity mockups and some motion studies. Some of these are things we’re building now. Some are still relatively conceptual and untested. It’s important to note that this entire feature is what we’d consider very advanced. We haven’t released anything this complex on the mobile app to date.

Collect Items of Interest
Customers need to be able to pick and choose the items they’re interested in comparing. So there needs to be some method of collecting those items. Fling is a system already out on Tablets, so we utilized it for mobile.

Simple Comparison
I felt customers needed a quick way to swipe between detail pages of things they collected. As an example, if you read in a customer question that the Tide you’re currently looking at doesn’t offer a fragrance free version, you might want to swipe to the previous item and scroll to the about this item section to find out if it’s fragrance free. The key is allowing flexibility for customers to use the app the way they’d like.

Robust List Management
There are a lot of “stealth” lists at Amazon. People use their cart to save items they might want to buy. They might use the “save for later” list in the cart to move items out of the cart that they’re not ready to buy immediately. They may use a myriad of Wish Lists. Some customers even use scratch paper to make lists at Amazon. You can now save items in the new “shop” experience above the nav. There is no central place to find and interact with all these lists. There should be, and we wanted that to start on Mobile. This portion of the design project is focused on elevating the lists experience at Amazon.

Robust Comparison
So far we’ve been able to collect items and quickly compare items next to each other, but how about when you have a really long list and want item #2 and item #10? There needs to be some way to select a few items regardless of their location and do a specific comparison. This portion of the project enables customers to do just that. It’s accessible from the list area.

Decision Making Ability
Once a customer has evaluated items in the list, they should be able to do something with those items. E.g., add to cart, remove, move to another list. How do we do this in a compelling scalable way? I’ve shown one of my concepts for this segment below.

Collect Items of Interest

One of the key differences between Fling on tablets and mobile is that people use the devices differently. Mobile tends to be single hand use, where tablets area a two handed affair. It was important incorporate the package of functionality within the range of the thumb. I repositioned the 1st item in the tray to the center to align with the natural resting place of the thumb. On tablets the first chip sits in the far left side of the tray. I also made a change to the UI of the tray. Amazon is beginning to elevate the visual role that products have within the site, removing UI cruft where we can.

Every product Amazon has is shot on a white background. I wanted to create a UI where it looks and feels like you just have a bunch of products you’re interested in sitting on a shelf within reach of your thumb. I also wanted to continue moving the experience away from 2D and towards 3D and interactivity. I like the idea of the mobile shopping application being a place where you can grab anything you see and physically put it into your tray or basket at the bottom of the screen.

Responsive image

Here customers long press on any item they see, and then either fling or drag it to the bottom of the screen. It then let’s you know which list you’ve added the item to. By default we add it to a Save and Compare list automatically. If a customer doesn’t have one, we generate one.

Responsive image

This shows two items in the tray and the various states of selection. So when nothing is selected, (i.e., a customer is searching still) items are full alpha. When an item is tapped to view its detail page, the other items reduce to 0.6 alpha and we underline in Amazon yellow the active item which remains at 1.0 alpha. If a customer navigates away from any of the items detail pages, all items will go back to full alpha.

Simple Comparison

Something that made sense to me was giving customers the ability to compare different sections of each items detail pages. So for instance, if you read in a customer review that the Tide Pods doesn’t come in a fragrance free option, you may want to swipe over to the Liquid Tide to find out if it does in the about this item section.

Responsive image

The key is caching detail pages to remain where you left them. Using a combination of swiping or tapping items in your tray, a customer can quickly move back and forth between detail pages to review information.

Responsive image

Robust List Management

We’re trying to elevate lists at Amazon and I wanted to focus on extending the interactive environment we’re creating on mobile towards list management. It seems obvious to allow customers to collect, evaluate, and make decisions around lists they create in a more physical interactive way. I felt it would be interesting to be able to swipe up the tray and view a list of lists. Each list would have an expanded evaluation view as well as other key actions available (like view in tray and advanced compare).

Responsive image

Why the expanded view?
We received a lot of customer feedback that it was important they be able to see some basic information about the items in their lists like price, stars, and prime (free 2 day shipping).

In collapsed view, to minimize cruft, we only show the three most recent items in your list. When you open the list by tapping the arrow, it shows all items and their meta data and you can horizontally scroll to move back and forth in the list. To view a list in your tray, tap on a collapsed list and the items will animate into your tray.

Responsive image

Robust Comparison

What happens when you want to compare items #2 and #10 in your list of 15? How do you put them together to compare them side by side? Good questions. We always had crafting a better compare experience in mind with this project. One of the obvious answers was to allow two mobile detail pages to be in view side by side in landscape view. Another was to allow customers to choose any list at any time to compare items.

Responsive image

So a customer can simply access the lists view and swipe a list from left to right to initiate an advanced compare of items in that list.

Responsive image Responsive image

Ideally you could select a bunch of items and then swipe between them to compare them all side by side. The system is designed to allow maximum flexibility in selection. Users could scroll both pages in landscape view using two fingers and individual pages with a single finger.

Decision Making Ability

It should be incredibly easy to make a decision at Amazon. Whether that’s tossing all the items back into the ether, moving them into a long term list, or ultimately purchasing, it should be easy to accomplish. We should also continue the physical object pattern we’re utilizing.

Responsive image Responsive image

This concept puts the item center stage as you make a choice. You’ve evaluated the item and are now moving forward with a decision. I like the idea of really focusing attention on the choice, and removing all of the chrome (distraction).

Conclusion

This is an inflight project. We're still considering a number of concepts and options and have yet to put any of this through customer testing. It's a very compelling project and interesting to consider trying to enable a compare system that works for a billion different products. Ultimately I think it will be a combination of approaches.