Fling on Tablets

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

Responsive image

Project Background & Status

Fling allows customers to quickly save items by taking product images and flinging to the bottom screen. Once in the tray at the bottom, a customer can simply tap on each item to view its detail page. Each item is automatically added to a private “save and compare” Wish List which they can find on any device or pc across amazon.

Prior to Fling, customers had to tap on an item to go visit the detail page, and then tap the back button to return, a cycle we call ping ponging. This cumbersome method of evaluation was not optimal. We invented Fling as a new UX method to enable fast evaluation. We’ve made more improvements adding a swipe-able header with search results on the detail page, but it’s far from being able to collect and compare items you’re interested in.

Responsive image

Fling has been an inflight project under development and release for 2 years now. I have been the sole designer / concept owner of Fling for the projects entirety. Fling is currently in the process of being patented. Fling has launched 3 versions on the Kindle Fire line and was recently released for iPad. This feature is widely loved by the millions of customers who use it.

Because there is so much history on the project, and for the sake of brevity, I will cover the following:

  • What were our goals?
  • What were our constraints?
  • What do customers need to be able to do?
  • What mistakes did we make / how did we make it better?
  • What’s currently released today?
  • How do we know this works and that customers like it?

What are our goals?

  • Allow customers to set aside any product they see in the Amazon shop app.
  • Integrate more touch centric behavior into our tablet app giving customers more reason to use the app vs. the webstore.
  • Allow customers to access that list of items from anywhere.
  • Allow customers to easily remove items they were no longer interested in.
  • Allow customers to move that item into cart once evaluation was complete.
  • Make this system discoverable.

What are our constraints?

  • A big consideration is Amazon’s liberal use of horizontal shovelers within its pages. Horizontal shovelers are layers in the stack that allow users to swipe left and right to see more products which are off screen. A common place we use these are on the detail page with product images, and lower sections which have “Customers who looked at this also looked at” or “Other items we think you might like”.
  • Left hand navigation panels (bezel swipe)
  • Lower panels like settings or platform app switcher (on Kindle Fire)
  • Upper panels like notifications pull down
  • Don’t make every side a panel (ergo, we can’t use the right side to bezel swipe)
  • Must be able to minimize and close the system
  • Must be accessible from everywhere
  • Can’t interfere or modify the experience of any current major amazon shop app system (e.g., the home page, search results, detail page, check out…) (Why? Independent teams control each of these and it’s next to impossible to get on their roadmaps, also every detail of their experiences are tested and micro-refined ).
  • Can’t interfere with vertical scrolling
  • Must be easily discoverable
  • Must be easy to pick up and remember
Responsive image

Goal: Allow customers to set aside any product they see in the Amazon shop app.

Swipe products left or right to compare.

Our first idea was largely around swiping the item to the left or right to set it aside. This didn’t work because we ran into all kinds of anomalies within the app that broke the model, chiefly horizontal shovelers. We weren’t ready to battle it out on getting rid of them, in order to make a better experience. (Not because we didn’t want to, more because, there wasn’t enough forward momentum at the time across Amazon to make this big a change for something that is nascent and unproven). So we scrapped this idea.

Responsive image

Add buttons to all products to compare.

A second idea that came up was to add a button somewhere that people could tap to add it to the fling tray. The primary pro of this concept being that it’s easily discoverable. The cons being that we’re adding more UI to an already cluttered experience AND we break constraints (Can’t interfere or modify current major systems). I was not a fan of this idea, as it seems a step backwards to me. Why? It’s pushing 1990’s PC UX behavior back onto a touch device, for the sake of discoverability. I think this is an advanced feature, and not everyone needs to use it. I am ok with making it a little less discoverable, if the benefit is we don’t add to the mess.

Responsive image

Press and hold on items to compare.

We went through a few more ideas and ultimately came to Press and Hold. This gesture wasn’t taken on our app, and allowed us to instantly make any product in the app interactive. It could exist as a layer on top of everything else (meeting a constraint) and met a number of our goals. What’s the trade off? Hard to discover unless you’re told about it. Needless to say, we went with this approach.

Responsive image

Goal: Allow customers to access that list of items from anywhere.

The next item was where to put the items you were saving to compare. The goal being to provide a static area above the app one level which would remain there through the customers entire journey, making it always accessible.

Tray on the right

Our first idea was tethering the tray to the right side making it swipe open and closed with a small grip. This broke a couple of our constraints which we didn’t really know at the time were even constraints (don’t make every side of the app a panel and can’t interfere with major systems). Why shouldn’t every side be a panel that pulls out with stuff in it? Well, it increases the cognitive load of every customer who uses an app and begins to look really messy; Layers upon layers upon layers.

We’re heading towards a place at Amazon where the product is the stage itself, and we only show you things you need to see when you see them. Otherwise, we remove all the UI and cruft. Other issues this brought up were that the grip would interfere with key systems like covering the buy buttons or making it difficult to open and close around something like a color selection drop down. I also felt that it would just be too much work over all, constantly opening and closing this thing.

Responsive image

Tray on the bottom

We went through a few more ideas and ultimately ended up with a tray at the bottom of the screen which would open automatically when you performed the fling action. This allowed us to neatly organize your items and not cover any key shopping systems. I ultimately decided against any swipe open / close gesture because it would interfere with both vertical scrolling as well as any of the drawers on the bottom of the screen.

Responsive image
Does "anywhere" mean in app? Or does it mean anywhere a customer interacts with Amazon in general?

The answer to both is yes.

So how then to make all these items available to customers anywhere they interact with Amazon? Lists at Amazon is this constantly reinvented concept that takes on new forms and ultimately end up in one place. Wish List.

Wish List is a proven program at Amazon and is completely extensible. Building that infrastructure a second time just for the sake of having it be independent didn’t make sense from a resources stand point. I also think it’s important to utilize systems that users are already familiar with. We don’t want to fight two up hill battles. One being, learning how to invoke and use the new system, and then learning another list system to manage it with. So we ended up using Wish List as our infrastructure.

When you fling something, we automatically generate a private “Save and Compare” Wish List for you and add the item to it. You can then find that Wish List anywhere across Amazon.

Responsive image

Goal: Allow customers to easily remove items they were no longer interested in.

Next on the list was to allow customers to remove items they were no longer interested in. We had a bunch of idea’s but ultimate narrowed it down to two options.

iOS delete app

Our first option was to follow the iPhone model of invoking a delete mode with X’s in the corner and having the chips shake a bit. The pro’s of this concept are that it’s a pattern people recognize and pretty straight forward and quick to dismiss multiple items. My biggest issue was that it would exist as an external system, in addition to others, making more cognitive load. It wasn’t scalable. Meaning, we couldn’t replicate that same pattern and add more options to it. It could only exist to serve as one interaction.

Responsive image

Press, hold, and drag to delete

Our next option was to allow customers to press and hold on items in the tray and drag them to a target which would appear onscreen. I felt this was a great way to utilize a pattern which we had already taught our users to do, and would be easily scalable to enable users to perform lots of action. We eventually built this out and included delete item and move item. We’re working on bringing an add to cart and share options to this as well.

Responsive image

Goal: Make this system discoverable.

The Kindle Fire has this tutorial system called “just in time” which basically takes over your screen and forces you to go through a tutorial. On the Kindle, where the UI is primarily dark, the assets and look for the Just In Time tutorial were also dark. Because we sacrificed discoverability, we realized we’d need to launch a tutorial system which taught the gesture to people. We were required to utilize the Just In Time tutorial style within the shop app which is primarily white. After a customer performed a search, this thing would launch after about a second. It would take over the whole screen and force the customer through a 4 step learning process about fling. I was not a fan of this approach, but we made it work.

In our first few rounds of customer testing, it became immediately obvious that the biggest point of dismay with the user experience of Fling was the tutorial. Customers complained that they were in the middle of performing a search task and the forced interruption felt very disorienting. It felt to them like they were being pulled out of the shop app. Most customers in the tests, tried to quickly dismiss the series and get back to what they were doing. A failed attempt at teaching.

Responsive image

With this customer evidence in hand, I set out to develop a new way to introduce interactive patterns to customers, which would be much less invasive and more to the point. I wrote an entire white paper on the subject which you can find here. Ultimately I set out to create videos showing someone performing the gestures.

Human beings have more experience using their hands to accomplish tasks than they do pointing a mouse to click a button. Imitation is an advanced behavior whereby an individual observes and replicates another’s behavior. Imitation is also a form of social learning that leads to development of traditions and ultimately culture. Humans are actually wired to imitate. There are physical sections of the brain devoted to this. We have a mirror neuron system which allows us to observe and recreate the actions of others. It is the quickest and simplest way to learn how to replicate some physical action. It is what I call “apples to apples interactive learning”. Seeing a video of how to do something is absolute in its ability to teach.

When you utilize words and symbols as tutorials in place of real video to describe gestures, you instantly complicate comprehension. Words and symbols mean different things to different people. Even the clearest copy leaves too many interpretive gaps to be a successful means of teaching interactive patterns. If we embrace nascent interactive patterns in our CX, we need to teach. We should employ and take advantage of already optimized human neural systems to accomplish this. Translation: Video teaches gestures better than any other format.

In the end, I advocated and convinced multiple departments to abandon the Just In Time tutorial within the shop app and go with an opt in video tutorial series showing customers exactly what to do. We ultimately decided to do just that. I drove an initiative to have professional videos recorded and created the new designs which we’ve just finished building and are now launched on both Kindle and iPad.

Responsive image

What mistakes did we make / how did we make it better?

The short answer is a lot. We tried a lot of different visual designs and each presented it’s own issues. Because there is 2 full years of history and releases I am not going to get into the specifics. But before each release I would map out the entire flow of the current design and we’d notate with red post its where improvements needed to be made as well as all the feedback we’d received. This helped me to ensure the product being shipped out on device met a high bar of excellence. We’d repeat this process and check the production build against this map before release to ensure nothing slipped the cracks.

Responsive image

What’s currently released today?

We’re in our 3rd release version and it’s out on all Kindle HD devices as well as iPad and Android in the Amazon Shop app. All you need to do is open the shop app, press and hold on any picture you see, and drag it to the bottom of the screen.

How do we know this works and that customers like it?

We’ve conducted 4 user studies in house with about 40 customers. We’ve wired up Fling to show us all kinds of data about how different components are performing. So we’re always analyzing how we’re doing and what needs improvement. But I think this is always summarized in the words of customers who use it themselves.

Just before Christmas, we launched a weblab to test Fling on iPad. Most customers had it on their device. We had to take it down due to some anomalous bug we couldn’t reproduce or solve. Shortly after removing the system, we received this review in the Apple iPad App store:

Carlin writes:

Me and apparently a great many others (judging by the amount of liken reviews) grew quite attached to the easy tap and drag method Amazon had developed for viewing/adding items to wish lists.. It made it very simple to add an item by just flicking it toward the desired wish list and viewing and selecting items already on a wish list was even easier, all one had to do was scroll through the sub-menu on the bottom of the page and tap on the item to open it.

The only complaint I could envision one having would be that the wish list sub-menu may obstruct the view of the items being viewed.. Guess what? There's a minimize button! So realistically, Amazon could even have had this system completely replace the "Wish List" tab altogether.

Now? Well now this whole tap and drag system of viewing wish lists/adding items is quite simply no longer there, it just vanished with the update.. Are we moving backwards, Amazon? Shouldn't the goal of adding new updates be to improve efficiency, eliminate middleman processes and make things simpler for the user?! It was a brilliant tool! Bring it back and you will have plenty more of the 4/5 star reviews you had prior to the update that got rid of this simple system.