Initial Flow Sketches

Zappos Magic Checkout Project

Warner Onstine
Zappos Engineering
Published in
5 min readDec 8, 2015

--

We love to do interesting things here at Zappos, and we certainly love finding new ways to WOW our customers, whether it’s on the phone, on our web-site or in person. Recently we decided to up our game a bit at the annual Bay To Breakers run. We were a title sponsor of the event this year and we could have done what most sponsors do, splash our name everywhere or give someone a fun Zappos backdrop to take a photo in front of (we did some of that too!). But for this year we wanted to see what else we could do to really WOW our customers and did I mention that we had just 60 days to do it in? So we turned to our awesome San Francisco team for crunch time!

Starting the scan process

How can we WOW?

After brainstorming some possible options, we came up with four problems we could try solving:

  1. “My friends and I can never seem to find each other at the race.”
  2. “I can’t ever seem to get good cell reception at the race.”
  3. “Every year, I put together my costume at the last minute.”
  4. “The expo lines can be 40 minutes long for a water bottle and a shirt.”

We decided to try and tackle number 4 for several reasons:

  • On-the-fly bluetooth mesh networks really require that a lot of people have the app downloaded on their phone to be reliable
  • Really wanted to WOW as many people as possible
  • Long checkout lines are a real pain point
User screen showing a scan in progress

Alright, so now we’ve picked out the problem we’re going to try and solve in our 60 day window. What do we need to do?

First, we needed to figure out how to make checkout faster in the first place, Back To The Future! RFID has been touted for a long time as a way to automatically check someone out at the grocery store (amongst many other things), so maybe we can use that here?

Having no experience with RFID we reached out to a San Francisco startup, Bibs, which helps races to more accurately time race runs. It uses RFID in the runner’s bibs and as they progress through the race their times are tracked until they cross the finish line records their completion. They were able to help us with their expertise on how to implement the Magic Checkout experience.

Possible Concepts

Now what? We needed to sketch out the user experience and see what would work the best.
Concept A:

  • User pre-registers as a Zappos VIP customer (preferred payment method)
  • Gets Magic Bag at Expo
  • Fills it with items
  • Upon exiting she is informed of what she’s purchasing and completes transaction

Concept B:

  • Swipes card to get ‘magic bag’
  • Shops, grabbing RFID-tagged items
  • Gets receipt that confirms her purchases

Concept C:

  • Grabs items
  • While shopping receives custom messages relating to items she’s picked up
  • At checkout items get scanned and she pays for purchases
User screen describing checkout process

Ultimately we went with the third concept as a base since we decided customers would be a little wary about giving their card up front without actually having decided that they were going to purchase, they liked to have the items in hand before deciding to give us their card.

Defining Our Success Metrics

  • Cut wait times in half (20 min or less)
  • Create a fast checkout experience (60 sec or faster per customer)
  • 50% chance of success (so pretty risky!)

Avengers Assemble! (Or something like that ;) )

  • Design Lead
  • Front-end Dev
  • Back-end Dev
  • Project Manager
  • Junior Designer
  • 2 RFID Subject Matter Experts

We now had our team, our concept, and our ultimate goals defined, now it was time to get dirty, so to speak :), and actually do some physical mockups of the space that included the RFID mat, items that had been tagged with RFID chips and a checkout station so we can actually feel what it would be like for a real customer to go through the whole experience. After many walk-throughs and adjustments we had a working prototype of the space that we could build on.

Sketchup Mockup to be sent to vendors to build

This was prototyped in Google Sketchup and sent to vendors to have them start building the physical elements for the checkout station while we got busy building the software that would power it.

Time To Code!

Now that we had the physical space figured out as well as some of the RFID issues identified it was time to code our solution. This required several pieces:

  • iOS app to process payments
  • Node.js Web app

Other technology we used:

  • RFID Antennae — For Bay to Breakers we used 4 mats on the ground, one on each activation
  • RFID Readers — These connect to the antennae and read items as they pass over the mats.
  • External TV — This showed current checkout statistics
  • Magic Mirror — Show related products when customer stands in front using a TV overhead
  • Inventory scanner to determine if items are still in store
  • Mac Minis to serve up Web app

Nitty-gritty

  • Socket.io was used for real-time communication between the Web app and the iOS app
  • Node.js app written using the Express web framework
  • Square API used for payments
Trying to make it the fastest checkout possible!

Tricky bits and challenges

  • We had to individually tag and catalog all the items with RFID chips (A small team stepped up to help tag over 70,000 items!)
  • Had to shield the checkout area so it didn’t accidentally read any additional items and add them to the customer’s “cart”
  • Physical build out that we didn’t have a lot of control over
  • This was our first hardware integration project
  • Timeline (60 days was tough)
Our CEO Tony Hsieh tries out the Magic Checkout experience at the Expo

Final Thoughts

In the end was it successful? Yes, yes it was! We managed to hit all of our success metrics, even though we weren’t 100% sure up until that morning that everything was going to come together.

Our team had a lot of fun doing this, but if we’d had more time we definitely would have done some potential customer interviews to determine which of the concepts to go with initially. Additionally once we had settled on a specific concept we would have liked to do more user testing and walkthroughs to narrow down the specifics of the concept rather than relying on our own internal dialogs about it.

--

--