Building a better kiosk purchase flow with content strategy-led design

I don’t believe that you can design a meaningful product or service unless you start with messaging and content hierarchy; but, quite often, these are tacked on at the end.

If you want to see what happens when messaging and design are not considered together, have a look at the payment kiosk in Argos stores.

If you’re not familiar with Argos they’re a major homeware, electronics and toy retailer in the UK and Ireland. Each quarter they release a phonebook-sized catalogue of products, each with a six digit product code. To buy a product you either order it via their site, or in one of their retail stores using the product code.

In-store you can either jot down the number and bring it to a cashier, or type the number into a kiosk and complete your order that way. But for a retailer that depends on digital to make sales, their kiosks exhibit many of the mistakes that come from ill-considered messaging and interaction design.

To show you what this looks like, I’m going to break down their kiosks’ purchase flow.

Screen 1: Product selection screen

OK, it’s a bit ugly but it does the job. A few questions though — why are the delete and clear buttons the same size and prominence as the ‘enter’ button? The ‘enter’ button should be the primary CTA, and the ‘delete’ and ‘clear’ buttons should be secondary.

Screen 2: Product quantity and confirmation screen

So this screen asks two questions: is this what you want, and how many do you need?

Because this screen lacks a clear visual and content hierarchy it’s far more confusing than it should be. Let’s break it down,

1. Red Section: ‘product info’
   This CTA is unnecessary. For the user to get the product number they had to research the product on the Argos site, or look it up in the catalogue, or find it in the separate product selection kiosks in store. Either way the user should already know what product they’ve selected, and so the addition of this CTA just adds to the confusing design.
2. Orange Section: ‘I don’t want this’
   This button cancels the purchase, yet it’s arguably the most prominent (owing to its position) button on the page. But why is this button actually here? The orange section’s content (‘quantity in stock’) doesn’t match the call to action (‘I don’t want this’). Arguably this section is here to prevent users from buying a product that isn’t in stock: fair enough, but this could (and should) be done on the previous screen, when the user enters the product code.
3. Green Section: ‘I want this’
   The green section asks users to select the number of products they want, yet this is separated from the product itself — there is no clear relationship between the product and the quantity. For clarity I’d move the quantity selection to be beside the product image, creating a clearer relationship.
   But there’s a bigger issue here, the ‘I want this’ button applies to the product, and not the quantity, so this should be moved out of the green section and placed closer to the product image, reinforcing that relationship.

Overall, with three CTAs and no single clear path, the user has to spend longer than necessary parsing the screen to figure out how to progress.

Screen 3: Upsell

The good, the product quantity and price are clear at the top (but why not show the product name?).

The bad: there’s a bit of dark UX going on here — the upsell CTA is more prominent, shown in green, and placed where the user would expect the see the ‘Next’ button, but the ‘dismiss’ button is placed above the offer content and rendered in the same colour as the product information banner in red — the user must select the red (negative) button to proceed.

Screen 4: Further upsell

Why is this upsell not included in the last screen? Why is another step placed between the user and the purchase?

The addition of the product image and details is nice, but it repeats much of the information in the red banner. This is a waste of space.

The biggest issue here are the three CTAs. Again, there’s some dark UX going on — the ‘More information’ CTA is most prominent. The button to add the service to your purchase, ‘protect this’ is rendered in green (yet is placed on the bottom left, like a back button). If the user doesn’t want to buy the service they must select the red button labeled ‘don’t protect’, suggesting they’re making a mistake. The label text is passive aggressive and should be changed.

There’s also no clear order to the placement of the CTAs on screen. The user must look around the find the correct button to proceed.

Screen 5: Confirm sale

This should be a simple screen, but there are six calls to action…6!

Let’s go through them

1. ‘add another item’ and ‘add a reservation’- these should be included on screen 2, not screen 5
2. ‘Pay now’ — well, at least it’s large. It’s somewhat drowned out by the two other buttons.
3. ‘i’ — why is this here — having gone through 5 screens, do you really need to see the product details again? High-level details should be shown at the top of the screen.
4. ‘Remove item’ — again, why is this here? Sure, if I had multiple items I might want to remove one, but since I’ve only 1, and there is already a ‘cancel’ button do I really need this?

The ‘Pay’ button should be the largest and most prominent CTA on screen. Everything else should be removed or demoted in size and prominence.

Screen 6: Select bags

A few things: the ‘+’ and ‘-’ are on the wrong sides ‘-’. In the UK and Ireland it’s more usual to place ‘+’ on the right and ‘-’ on the left. But, more importantly, the green state of the ‘-’ button suggests I can select minus 1 bag. This should be rendered disabled until the I’ve selected 1 or more bags.

At least the main CTA is obvious.

Perhaps a better version of this screen would first ask the user if they need a carrier bag (if ‘yes’ then ask how many, if ‘no’ proceed to next screen)

Screen 7: Payment instructions

Right, this is clear enough.

Screen 8: Confirmation

The confirmation screen should be a straightforward process — the kiosk prints off the receipt and you collect your product. The problem with this screen is that it doesn’t provide a clear end to the transaction. The ‘shop again’ CTA is unnecessary, the user has already been given number of chances to add other products to their basket. If we use online shopping as the metaphor, the presence of the CTA suggests that the user’s session is still open.

I have observed a number of people wait at this screen until it changes back to screen 1, in the same way that some people at ATMs wait until the final ‘Thank you’ screen changes back to first screen, so they can be certain that no further transactions can be made on their card.

Apart from that, since the user needs the product code to make another purchase, and since they’ve already been given a few options add products to their baskets the ‘shop again’ button is unnecessary.

It would be clearer to show the user a ‘Thank you’ message along with a ‘Close’ button, to give them the assurance that the purchase is complete.