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.
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.
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.