Designing a Modal That People Will Actually Read

  • Client

    iQmetrix

  • Role

    Project Lead, UX Researcher, UI Designer

  • Period

    2017 – Ongoing

Interactive retail is an exciting new domain for unique user experiences and interfaces. Endless Aisle is iQmetrix's solution for a specific retail challenge: displaying products that stores didn't have space to stock on shelves. Over time, Endless Aisle grew to provide retailers added value through barcode scanning, checkout processes, and increased customer interactivity.

In 2017, we heard from retail clients that they were seeing a number of abandoned shopping carts on Endless Aisle. In response, we held interviews with customers and store staff that revealed that customers didn't expect to be able to make purchases using Endless Aisle. We needed to find a way to build customer awareness and confidence in using Endless Aisle to complete their purchases.

The Challenge

Based on initial user research, we understood that customers didn’t expect to be able to make purchases using Endless Aisle, due to two major factors:

  1. Based on previous experience with interactive screens in other stores, customers anticipated that Endless Aisle was for locating products or viewing more extensive product information—but not for purchasing products.

  2. The screen is standalone. Customers anticipate that if something can be used to make a purchase, it will look like a typical self-checkout kiosk. At the very least, they would expect to see a payment device (aka “credit card machine”).

Endless Aisle’s offers a unique product purchase flow that provides value to retail customers by integrating quickly and easily into existing store setups. However, this easy integration comes at the cost of a customer experience challenge.

Here’s how the checkout flow in Endless Aisle works:

  1. The customer browses products on Endless Aisle and adds them to their cart.
  2. They tap “Checkout,” enter their name, and send their order to the existing registers.
  3. They go to the register to complete the transaction with a sales representative.

We suspected that customers were abandoning their carts because they didn’t understand this flow. Instead of pushing ahead and hoping they’d figure it out, customers would walk away. Customers have explicit goals in mind: they want to buy something. It’s easier to do the way you already know how.

We needed to quickly validate our hunch and find a solution that would make customers feel confident completing their purchase with Endless Aisle.

Process

I led the design team through two sprints, each consisting of 5 tests.

Sprint 1

The first sprint had a clear goal: validate our theory that people aren’t confident about what happens after they’ve found the product they want to buy on Endless Aisle.

We set up an Endless Aisle prototype on a large format screen and invited two groups of five participants to shop for items based on the scenario of “purchasing a gift.” At predetermined points throughout the test, participants were asked to evaluate their level of confidence and to predict what would happen next.

We anticipated that participants would hit a point of confusion after adding an item to the cart.

We discovered that customer confidence levels dropped when they went to open the cart; we found this was because they couldn’t visualize a next step that matched their mental model of a self-checkout process. Endless Aisle wasn’t a self-checkout, nor was it a website.

Similarly, when participants were in their cart and went to tap “Checkout Now,” they expressed confusion, and their predictions indicated pure speculation.

Our hunch was validated. People are confused about what to expect. It was time to move into the second sprint: how do we prevent people from becoming confused?

Sprint 2

Entering our second sprint, we knew that customers generally land in one of two camps: “Endless Aisle is a self-checkout,” or “Endless Aisle is for looking at product information.”

Can we teach them the “Checkout at Register” flow before they start shopping on Endless Aisle?

We iterated on the design five times, and tested each design on five participants.

The first thing we learned—and learned fast—was that customers don’t read. They have goals in mind and no time for reading. If participants didn’t read messages within this test scenario—with no time or sales pressure—we knew “real” customers wouldn’t, either.

Iterations

1. “Let’s Shop.”

In this iteration, we presented a simple modal with 3 steps written out. To continue, the user taps a call to action button that said “Let’s shop.”

What we discovered:

The moment the modal popped up, participants would tap the button. We didn’t know anyone that could read that fast. Clearly, users weren’t reading the modal.

2. “I Understand.”

For the second iteration, we used the same modal with the same 3 steps, but we replaced the call to action text with the message “I understand.”

I Understand.

What we discovered:

This change slowed everyone down. People would go to tap it and pause. Some voiced, “What am I agreeing to?” They would scan the 3 steps, then proceed with tapping the button.

When they opened the cart and went to hit “Checkout Now,” we asked them what they thought would happen next. Based on what we heard, it appeared as though they skimmed the 3 steps, but it didn’t stick with them.

“Headed towards some payment screen, choose CC/Paypal, enter shipping details”

“I’ll submit this and then it’ll give me shipping options”

3. Three-Step Carousel

We needed to find a way to make the process stick. We split the three steps onto three individual screens. With this new flow, the user would have to navigate through each step before they could proceed. We theorized that slowing the customer down would result in better retention of info.

What we discovered:

When asked what to expect at checkout, it was a mixed bag. A few remembered the odd detail, but the flow itself was still lost on them.

“Will take me to where I have to register, to put in details like home address, create an account, my name, etc”

“I would go to the cart... I would assume I would pay for it and get a receipt that I would take to a sales associate.”

4. Animated modal with three steps

Since splitting the steps into individual screens didn’t improve rentention, we fell back on the initial modal design. For this iteration, we animated each step so the user couldn’t interact until all three steps had appeared. The call to action button didn’t appear until the very end of the animation process.

What we discovered:

This iteration showed real promise. Participants tended to remember the flow. But, they weren’t confident in their recollection.

“It said I could add things to my order and then... I think I can just send this to a cashier to go and pay. maybe it said I could pay, I don’t remember now.”

“Based on what it told me on the initial screen, if I do this checkout the people at the cashier will have what I ordered. I’m going to give them money and pay for this merchandise. But who knows?”

5. Animated modal with 2 steps

Based on our latest iteration, we determined that the copy needed to be skimmable, but it also needed to stick. We cut the messaging down to two steps that focused on the two key points of information: you shop here, you pay there.

What we discovered:

This iteration resulted in a notable jump in confidence levels. Participants correctly predicted their next steps, and didn’t doubt themselves or Endless Aisle.

“If I’m in the store it would print a piece of paper to bring to the checkout so they can get my products. I would expect some level of interaction with employees.”

“Go to cart, press checkout, the thing said I’ll go to the cashier. If I press that it’ll say like “Are you done? Okay, please see us at the counter.”

Finally, the process was concise and clear.

Results

After only a few days of testing, we had a clear and effective solution to a specific user pain point. We refined the messaging for the “Checkout at register” flow to just two concise sentences that customers could skim and understand in a heartbeat. The design team refined the user interface design and rolled it out in the next development sprint.

What else I learned

As UX professionals, we’ve all heard that “People don’t read.” It’s another thing to see the evidence with your own eyes. When people are action-oriented, they will dismiss anything that gets in their way. Even if the user is stuck on a screen long enough to read it, we can’t anticipate that they will remember what they saw.