Amazon Hands-free Shopping Experience
A new wave of in-store shopping experience with Amazon Pay and seamless online/offline store experience
Project Type
Amazon Store launch
Duration
June, 2015 - March, 2017
Iterate work process
Tools
Sketch
Invision
Proto.Io
Balsamiq
Photoshop
Illustrator
Omnigraffle
My Role
User interview
User journey mapping
Create customer scenarios
Ideation
Low/high-fidelity mockups
Interactive prototypes
Visual design
Test in offline store
OVERVIEW
Background
Amazon describes its Amazon stores as "a new kind of store with no checkout required". That means, when you shop at Amazon Go, Amazon Books, and Amazon Popup, you'll never have to wait in line. The store ultimately works with the Amazon store application - for example, you enter Amazon Go, take the products you want and, thanks to the app, just leave again. We launched the first Amazon Go which is basically a small grocery store (convenience store) with roughly 1,800 square feet of retail space, 2018 and other Amazon stores bring the same technology continuously.
Shopping Experience in Store
A new kind of store with no checkout required
Store experience with new seamless check-in and check-out (payment) technology in Amazon stores including Amazon Go, Amazon Pop-up and Amazon Bookstore:
Recognized Amazon customers at offline store locations enjoy benefits such as archived purchases via order history, registered devices by location, the ability to use their online Amazon gift card balance and receive emailed receipts of their in-store purchases. Recognized customers will also enjoy additional exclusive benefits based on their customer profile.
UX Challenge
My Role/Design Mission
Project Process/
What I worked on
How to make a better shopping experience in online and offline store eco-system?
How will the hands-free experience change shoppers' experience in a store?
I was the first UX designer on the Amazon Go and Connected Commerce Team (formerly known as In-store Experience). As the lead UX designer, I helped invent a hands-free payment system and experience at Amazon. Recently the team was renamed as Amazon Go and Connected Commerce. In this project, I was responsible for end to end design of the system. My duties included: user research, scenario development, hypothesis and synthesis, experience modeling, prototypes, design language, mockups, and redlines.
I created a prototype to check technical feasibility and transfer the technology to design implementation.
June, 2015
Understand
User interview
New concept research
Competitive store analysis
Define Experience
Project scope
Persona
Ideate Store UX
Model persona base scenario
Sketch System Flow
Draw system flow
Technical feasibility
API
Prototype
Test
Wireframe
Low/High-fidelity mocks
Mobile Interaction prototype
Prototype test
User test
Final Deliverable UX
Final mocks
Visual design
Launch Store 1 Prep.
Launch Amazon Go
Sketch System Flow 2
Test
Draw system flow
Technical feasibility
API
Prototype test
User test
Final Deliverable UX
Final mocks
Visual design
Launch Store 2
Launch Amazon Pop-Up
October, 2016
Sketch System Flow 3
Prototype/Test
Draw system flow
Technical feasibility
API
High-fidelity mocks
Mobile interaction prototype
Prototype test
User test
Final Deliverable UX
Final mocks
Visual design
Launch Store 3 app.
Launch Amazon Books Checkout
RESEARCH
User Interview
To better understand potential users, I interviewed about 30 individuals who have Amazon accounts and actively shop in stores. Part of questions asked during the interview were open-ended, just to encourage people to think outside the box and to share more details on their shopping habits and check-out experiences.
Persona-Base Scenarios
The project goal is to make a better shopping experience in online and offline store eco-systems. At the beginning of the design process, I explored different technical approaches to payment without boundaries and proposed user scenarios through storytelling for a new seamless check-out experience. One of the scenarios is shown in this page as an example.
Amazon Books Checkout Experience using QR codes
ITERATION WORK
Ideation and Sketch
Understanding System Flow
Object Model:
This object model shows the process of interaction between merchant systems and Amazon Pay from check-in to check-out and post-check-out. Amazon works as a bridge between merchants and external customers. Data transaction and synchronization occur between Amazon and merchants and also between Amazon and customers.
System flow from Login with Amazon through checkout confirmation notification
Picture 1. Moda Operandi store checkin and out experience with Amazon Pay
Use case example:
Connect to 3rd party store POS and its customers mobile via Amazon Pay
Idea of Embedded Payment System
Idea 1.
Hands-free Check Out with Amazon Pay
QR use case 1: At the store entrance, customers scan a secured QR code that appears on their mobile application to the scanner (Picture 1).
QR use case 2: In Amazon Books stores, customers scan a QR code displayed at the check-out station using Amazon app. A personal QR code is generated and shown on customers mobile to use at check-out (Picture 2).
Picture 1. Amazon Books QR
Picture 2. Generate personal QR at store
Picture 3. Amazon Go QR
Beacon use case: The next generation hands-free check-out system uses beacons installed in Amazon Pop-up stores. When customers are checked in, they receive a notification from Amazon Pay. Once the payment consent is agreed to, the customers mobile device presents an instruction for the check-out process (picture 4).
Picture 4. Amazon Pop-up hands-free checkout instruction
Idea 2.
Personalized and Secured Code
This QR code is personalized and secured. Once you leave or check out from a store, the QR code disappears (see Picture 4.) and you will receive a receipt. When you revisit the store, a new QR will be generated on your mobile app. The QR code is one-time use to ensure security.
Amazon Go: to get started with Amazon Go, you need an Amazon account, a supported smartphone and the free Amazon Go app.
You scan the app as you enter the store to get through a turnstile. You then put away your phone and began shopping.- picking up items, putting them in a basket or in bags (without needing to scan each item).
You can then just walk out when you're finished. You don't need to check out and you can replace items at any time.
The Amazon Go app has a navigation bar at the bottom with tabs for four screens: "Key", "Receipts", "About", and "More". The Key screen seems to bring up the QR code that the store's turnstiles scan to let you in, while the Receipts screen shows what you bought after you've left.
Picture 4. Amazon Go QR and receipt
Idea 3.
Smart Shopping Experience Assistance
Connection between in-store associate's tablet in store and customer's mobile device: Amazon Pay connects your secured account information to a store and when you check out, the associate lets you know that Amazon already sent your payment information (see Picture 5.) and completes the payment process with hands-free system. Also, to increase sales, we designed a method for Amazon Pay to suggest products or services based on your shopping preferences as soon as you check in to the store. (see Picture 6 and 7).
Picture 5. Amazon Pop-up and future store tablet for associates (prototype)
Picture 6. Scenario shows shopping assistance on mobile
Picture 7. Notification when checked in at Amazon Books (prototype)
LAUNCH PLAN
Flow on Mobile
Happy Path
99% users have used their default payment.
September 2017
Setup test version Amazon Go in
Amazon company, Seattle
January 2018
Launch Amazon Go with Amazon Pay, Seattle
March 2018
Launch Amazon Books with Amazon Pay, Seattle
May 2018
Launch Amazon Pop-up with Amazon Pay, Seattle/San Francisco
Make sure that users focus on their primary task which is shopping.
I received user feedbacks/data from our research team to confirm user’s expected behavior at checkout moment. And I received a great resource that 99% users have used their default payment. I designed accordingly in such a way that the payment page is only with default payment method as shown in use case A. And other payment options are in detail page. I wanted to make sure that users focus on their primary task which is shopping. And that was made possible by reducing checkout run-time
Unhappy Path
In this unhappy path, based on user behavior research, I found that customers do not want to make an extra action such as adding a new payment method: they just want to make a payment in the quickest and most efficient way possible.
Based on this finding, I didn't include the unhappy path of 'adding a new payment method' in the user flow.
User Journey
Challenges on the user interactions
-
Will various ingress points accelerate customer’s participants? Yes. The only remaining question is how we make sure that all Ingress points are for the same internal function and not for different tasks eventually.
-
What is a default UI on QR page? The QR page only shows a secured QR code and default payment method.
-
How do we leverage quicker checkout times and how does it affect in-store payment? There is no ingress point to add a new payment in the store payment system. However, users can go to the homepage of the Amazon app and add a new payment method there prior to checkout.
Provide User Guideline
When users visit the store for the first time, intructions are provided through the mobile app.
This first time messaging cannot be skipped because we want to give customers an understanding of this new shopping experience. Below is an illustration of how a customer shops at the store.
Visual Design/Illustration
In this project, I designed all elements of the interface shown below, including UX writing, store names, illustration and dynamic contents customized to users.
Color decision
NEXT STEPS
Connect to Merchants
Amazon Pay provides Amazon customers with a secure, trusted, and convenient way to sign in and pay for their purchases on merchant sites. Customers use Login-with-Amazon to share their profile and shipping addresses and payment methods stored in their Amazon account to complete purchases.
With automatic payment features, customers can pre-authorize payments for future purchases. This enables merchants to charge the customer's Amazon account on a regular basis for subscriptions and usage-based billing without requiring the customer to authorize payment each time. Our next step is to embed the Amazon Pay pre-authorizing checkout system to external merchant stores and connect their customers to Amazon Pay on a regular basis.
