Challenge

Improving the grocery shopping experience for Amazon Prime members using the Amazon app

Solution

Create a streamlined flow to make repeat purchases easy, design within the existing design language of Amazon Fresh

My Role

User experience designer, a frequent Whole Foods Market customer and an Amazon Prime member, wanting to improve the shopping experience

 
 

Project Background

As a Whole Foods customer with an Amazon Prime membership, I have been wondering about how to take advantage of the Prime benefits. After talking to the cashier, I thought there might be more than what I know about Amazon grocery services. I got curious if other people are wondering about the same things and what difficulties they may have in-stores and online.

IMG_5549.JPG
IMG_5548.JPG
 

Secondary Research

After doing some research about Amazon grocery services, I realized that there are many grocery shopping-related properties offered by Amazon. From online reviews, I noticed that customers were unaware or unclear about different value propositions. Also, the statistics indicated the rise of online grocery shopping and its huge potential.

  • Groceries are Amazon's Fastest-Growing Category (eMarketer)

  • 60% of US digital grocery buyers had bought from Amazon and Amazon Fresh (Supermarket News)

  • Around 75% of Whole Foods shoppers are Amazon Prime members (CNBC)

 

Primary Research

My goals for primary research was to validate problems and identify pain points grocery shoppers have. Since I’ll be redesigning part of the Amazon grocery shopping experience, I decided to visit Whole Foods as ethnographic research and talk to cashiers to ask questions and observe the check-out process.

Part 1: Ethnographic Research

In-store Observations

There are Prime signs everywhere but you can still miss them, especially if you are not aware of the Amazon-Whole Foods connection. When I scan my Amazon Prime barcode at the check-out counter, I initially didn’t see any indicator that I scanned it. It turned out to be a tiny green icon on the top of the screen facing me.

The Prime member discounts signs are everywhere but you can still miss them

The Prime member discounts signs are everywhere but you can still miss them

When you scan the Prime membership QR code under the scanner, a tiny green icon appears on the top of the screen facing me, which is barely visible

When you scan the Prime membership QR code under the scanner, a tiny green icon appears on the top of the screen facing me, which is barely visible

Contextual Inquiries (with cashers)

At three different occasions, I had conversations with cashiers at the counter. They said most people use the app to scan the QR code, which is more convenient for them than typing a 10-digit phone number. But interestingly, when a customer scans the QR code in the middle of scanning items, it resets the casher’s interface, which is disruptive for the checkout flow.

Key insights from the site visits:

  • The Amazon-Whole Foods connection is unclear, especially to customers who are unaware of the merger

  • Because of that reason, even if you are an Amazon Prime member, it’s not very obvious how to get discounts initially if you don’t happen to talk to a cashier

  • The barcode system works but it’s clunky and the flow and the interface can improve vastly for both customers and cashiers

Part 2: Customer Interviews

The second part of the primary research was the interview. I interviewed 8 people who are active Prime members or had the membership at one point who also shop at Whole Foods.

These people were selected with the typical Whole Foods shopper demographics in mind, which is the age between 25 and 44 who are health-conscious living in California with the yearly income over $125,000. (Numerator, Factual)

Credit: Numerator

Credit: Numerator

Key insights from the interviews:

  • People use their phone the most in general (Mobile: 58%, Computer: 36%, Tablet: 6%)

  • People shop differently: For logistics (only shop in-store, shop 100% online, and hybrid), For items (prefer to pick up produce in-store but order other items online)

  • Most people were Whole Foods customers for 5+ years and Prime customers for 3+ years

  • Prime discounts are so little, people don’t care much about picking up sales items

  • Many people shared the Amazon Prime account with their family member(s)

  • People buy 90% of the same items and only about 10% of new items

  • Trader Joe’s was the number one alternative store

 

Part 3: Competitive Analysis (including Amazon apps)

I also looked at other Amazon properties like Prime Now, Whole Foods, and Amazon Go, as well as competitive apps, such as Instacart and Shipt.


IMG_5627.PNG
IMG_5628.PNG

Whole Foods

From the observation and interviews, it was evident that the Whole Foods app is nothing more than a QR code carrier and a simple catalog. I could see that Amazon can eventually deprecate it or change it into a completely different app to service existing Whole Foods customers.


IMG_5629.PNG
IMG_5633.PNG

Prime Now

Prime Now seems like a promising proposition in the beginning. But after going through a purchase flow, I realized that the shipping fees are separate for the three stores, Whole Foods, Amazon, and Pet Food Express, which made me question if it’s really useful for customers.


IMG_5634.PNG
IMG_5635.PNG

Amazon Go

Amazon Go is different than the rest of the apps since it requires to be at a physical store located in different areas. Nonetheless, I could see that skipping the checkout process entirely could be the future of physical grocery shopping experience.


IMG_5638.PNG
IMG_5641.PNG

Instacart

Instacart had the best reputation and has been a long-time favorite for many online grocery shoppers. As expected, it had features that Amazon app isn’t addressing, such as providing special instructions for individual items. It also had a cleaner, more intuitive checkout flow compared to the other apps.


IMG_5642.PNG
IMG_5645.PNG

Shipt

Shipt is another great app to shop fo household items online. It had a simpler interface than the others. It had some clever interactions for adding items to the cart or the ability to make a special request for items.

 

Affinity Mapping

From primary and secondary research, I’ve gathered quite a bit of information. I chose affinity mapping as a way to synthesize improvements and persona.

Click to enlarge

Sources - Blue: Fact, Green: Observation, Yellow: Interview I also voted with 10 red dots to determine what’s important

 

Feature Prioritization

Based on the affinity mapping results, I created a list of features that are high priorities.

For this project, I decided to improve the repeat purchase flow. I also wanted to focus on the experience for Prime members shopping online using the Amazon main app.

High-priority features synthesized from the affinity mapping

High-priority features synthesized from the affinity mapping

 
 

Persona

The basis of the persona started with the demographic data I gathered from the secondary research. With the information, I added goals and frustrations identified from the interviews. The interview script also included questions about general device usage and favorite brands. The purpose of these questions was to find out what device I needed to target first and preferred aesthetics for the visual design direction.

Click to enlarge

 

Use Cases

With the features and persona, I knew what I needed to design and why, and who I’m designing for. But before I could design actual interfaces, I needed to know how the improved grocery buying process was going to happen step by step. That’s why I wrote the use case for the main task, especially prior to creating task flow and user flow.

Task
Add some of the items in my frequently bought grocery list to the cart and checkout

Precondition
The user is an Amazon Prime member and has been shopping online and in-store at Whole Foods.

Trigger
The user opens the app to get groceries.

Use Case
“Ordering groceries”

  1. The user sees my grocery list with frequently bought items in a highly visible spot.

  2. The user adds some items to the cart

  3. If the user needs new items that are not in the list, adds them by searching and adding to the cart.

  4. The user goes to the cart and edits the items. (remove, adjust quantity)

  5. If any items need special instructions, the user enters them.

  6. The user may add recommended items in suggestions.

  7. If the user is satisfied with the items in the cart, selects to checkout.

  8. The app asks to pick a delivery date and time, as well as address, payment method, etc.

  9. The user provides the necessary information and confirms the payment.

  10. The app displays a confirmation message with a link to review or edit the order.

 

Task Flow & User Flow

Based on the steps defined in the use case, I created task flow and user flow to identify all necessary screens to design and catch any overlooked steps in the process.

Amazon Groceries - Task and User Flows@2x.png
 

Sketching

From the task flow and user flow, I identified the key screens to design as follow:

  • Amazon Grocery Home

  • My Grocery List

  • Cart

  • Review Order

  • Confirmation

For UI design, I decided to not to focus on the conventional steps that aren’t essential to improving repeat orders, such as picking a delivery date & time and providing a new payment method.

On the other hand, I wanted to include a screen for a new “add special instructions” feature, which I identified the need from the interviews in case a customer needs to buy produce online.

IMG_5604_03.png
 

UI Design

Since I was going by the existing Amazon Fresh design, I was able to jump into UI design without doing wireframes. Here are the important screens identified from the task flow and user flow.

 
1 Amazon Groceries Home.png

Groceries Main

I changed the name of this section from Fresh to Groceries in an attempt to show the unified grocery shopping interface.

I placed “My Grocery List” in the most visible area. The insight came from the interviews that people buy 90% of the same items. In the first user testing, I received questions about how the list is populated. Based on the feedback, I added a short description to let the user know it’s automatically populated by the previous purchases made in-stores and online.

 

My Grocery List

The purpose of this screen is to store frequently purchased items. The list gets populated automatically based on history. The user can also see the Prime discounted price next to the regular price.

When the user taps to add an item to the cart, the number inside of the cart icon changes to reflect the updated quantity.

5 Cart.png

Cart

The cart screen shows the sum of total discounts the user can get from the Prime membership. The price for an individual item also reflects the subtotal based on the quantity.

The user can also add special instructions for certain items.

7 Instruction Entered.png

Add Instructions

One of the insights was that people prefer to buy produce in-stores. Also, the app like Instacart is already addressing this issue by offering an option to provide instructions. I added this feature for the Amazon app as well so the user can tell the shopper exactly what they want.

9 Checkout.png

Place Order

This screen got simplified a lot by using the collapsible down arrow for each delivery information field.

The first interaction when the user arrives is to pick a delivery time and date. After that, the rest of the information is stored so it’s ready to proceed unless they decide to change it. I also implemented Apply Pay for easy checkout.

 

Prototyping

Based on the mockups, I created a prototype using Marvel to show the checkout process featuring my grocery list in the center of the shopping experience.

 

Marvel Prototype

Here is the prototype you can interact with. Please free to check them out and leave a comment!

https://marvelapp.com/64iab1g

 

Future Plan

Integrate different grocery services

For this project, I could only superficially address this very important insight. In real-life, there is a desperate need to integrate all these different properties to provide more connected shopping experiences between Amazon and Whole Foods customers, as well as non-customers.

Test with users + Track metrics

I would also track metrics that tied to the company’s overarching goals, such as increasing Prime subscriptions and the volume of online orders. It’d be also essential to build out journey maps for all major personas to stay current on touchpoints and discover new opportunities.