Video Workshop: eCommerce Checkout Teardown

A review of the Photobox checkout UX and customer journey

In this video teardown of Photobox's checkout UU3's Abi Hough and Zuko's Adam Winsland take a look at the good and the bad elements in the journey, providing advice and thoughts on how it could be improved. The points they analyse include:

• Should you use guest checkouts
• How best to present promo codes
• Accessibility
• Field layout: single column vs. multicolumn
• How to ask for an address
• Using copy around sensitive fields
• Streamlining by removing unnecessary fields
• Error messages - how to make them useful
• CTA placement

‍

For more tips on checkout improvement read our Big Guide to Form Optimization & Analytics.

‍

Form Teardown Transcript: Photobox Checkout

Setting the scene

00:00
Speaker 1: Here we are — we’re in a basket with a very exciting piece of artwork. Got to get the branding in there. I mean, this is the most stunning example of branding I’ve ever seen.

00:12
Speaker 2: Are you going to hang it on your wall?

00:15
Speaker 1: Oh yeah — my wall. We got it for our office. It’s lovely.

00:30
Speaker 1: Anyway, I’ve added it. So… first thing: guest checkout. I think I mentioned this on a previous teardown iteration.

Guest checkout vs forced account creation

00:37
Speaker 1: I can’t get to checkout without creating an account. What are your thoughts on that?

00:46
Speaker 2: For anyone who doesn’t know Photobox, we should probably explain what it is. It’s one of those services where you can create your own photo canvas, photo print, or something similar, and get it delivered to you.

01:12
Speaker 2: The issue I have with this is that it feels like a “once in a blue moon” product. It’s not like doing your weekly Tesco shop. It’s something you do for a gift or a one-off occasion.

So it would make far more sense to have a guest checkout, with the option to create an account at the end — rather than forcing account creation upfront. I suspect they’re losing people at this stage.

01:57
Speaker 1: Yeah, I’m guessing they are. I’ve used similar services before (not Photobox specifically), and if you have to go through the whole process — email, password, confirm password, phone number, confirm this, confirm that — it’s too much.

I just want to buy the product.

02:31
Speaker 2: Guest checkout is a pretty standard feature. Most companies have realised that forcing account creation creates friction and becomes a barrier to completing the purchase.

My first recommendation would be: test guest checkout. But I’d love to see the data — how many people abandon on that page would be interesting.

03:00
Speaker 1: That’s exactly the first thing I’d check: how many people are being lost there.

Promo code box: useful option, poor implementation

03:13
Speaker 1: Despite the forced account creation, here we are. Now we’ve got this big “Add your promo code” box.

It’s not a bad thing to allow promo codes — you shouldn’t remove the option — but how you present it is crucial.

03:34
Speaker 2: Exactly. There are loads of approaches. You can minimise it so it’s visible, but lower in the hierarchy. People who have a code can still find it, but it doesn’t dominate the page.

Here, it takes up a lot of space. And at first glance, it looks like the promo code doesn’t work because the button is disabled.

04:32
Speaker 2: And you’ve just triggered an error:
“The promotion code you entered doesn’t exist. Please double check the code.”

Now the user thinks: Oh — I need a code. I want a discount. I’m going to go find one.

And that’s exactly what you don’t want to encourage.

04:54
Speaker 2: You’re basically signposting people away from the checkout. They go down the rabbit hole, hunt for discount codes, get disappointed when none work, and their momentum to purchase drops.

Instead of thinking about the product, they’re now thinking:
“Am I paying too much?”

05:57
Speaker 1: It’s like going into Tesco without your Clubcard. Suddenly everything feels twice the price.

06:29
Speaker 2: The worst thing would be hiding the promo code entirely. But another approach is to pre-fill a code — even a small one like 5% — so the user feels rewarded without having to go hunting.

That reduces friction and removes the urge to bargain-hunt elsewhere.

07:10
Speaker 2: This big banner approach (“Use this promo code!”) can work too — but honestly, if you can pre-fill the code, it’s even better.

What analytics shows: promo code hunting behaviour

07:32
Speaker 2: In Zuko, we see this pattern all the time: users bounce between fields.

They’ll type a few characters into the promo code box, submit, go back, try another code, submit again — and repeat. You might see three, four, five cycles.

08:11
Speaker 2: That creates abandonment. People drop off, go to Google to find codes, and they may or may not come back.

If you have screen recording enabled, you can literally watch the lost conversion happen.

Readability issues: font size and contrast

08:40
Speaker 1: Another issue: I don’t like that delivery date text being stuck there. It’s hard to read.

I’m starting to need reading glasses.

09:00
Speaker 2: Honestly, from about 35+ your eyesight starts to decline — it’s just part of aging. And there are a lot of small fonts on this page. I’m also guessing the contrast levels aren’t great in the lower section.

Some of the text is italic too — which just makes it harder to read.

10:00
Speaker 2: Just keep it simple:

• make text bigger
• improve contrast
• keep a consistent style
• use clear hierarchy with headings and subheadings

Is this a test? (Photobox checkout V2)

10:34
Speaker 1: We should give a shout-out to Chris — he noticed this is V2. We don’t know if Photobox has just switched to this new version, or if they’re A/B testing it.

Hopefully they’re testing it, and hopefully that test ends soon.

11:10
Speaker 2: To be fair, it might perform better on mobile. On desktop it looks pretty bad, but on mobile the layout is stacked so it might not feel as chaotic.

Desktop vs mobile behaviour

11:42
Speaker 2: I don’t know if it’s just me, but there are some things I’ll purchase on mobile — but most purchases I do on a computer. I want screen space, especially for something like Photobox where you’re uploading and editing an image.

12:46
Speaker 1: That said, if your photo is on your phone, it might be easier to start the process on mobile.

What would be interesting is the omnichannel experience: can users upload a photo on mobile, then send themselves a link to continue on desktop?

Redeeming qualities (begrudgingly)

14:32
Speaker 1: Okay — redeeming quality: there’s a progress bar, which is always helpful on checkout. But are the steps clickable? Can you go backwards easily?

Often checkouts fail because users can’t navigate properly. If you rely on browser back, you can get thrown back to basket unexpectedly.

15:25
Speaker 1: Another positive: they have a phone number for support. Brownie points for that.

15:55
Speaker 2: I’d rather have a phone number than a chatbot. Chatbots usually force you to fight your way to “speak to a human.”

Basket summary: discount reminder (again)

16:34
Speaker 1: I’m starting on the right side. They’ve got “Your basket” and a backlink — it takes you back to the basket.

And look underneath… they’re rubbing it in:
“I don’t have a discount code.”

It’s like they’re saying:
“This is your last chance to go and find one.”

That’s ridiculous.

Country dropdown: good idea, missing search

17:59
Speaker 1: Redeeming feature number two: the country dropdown puts the UK at the top, which is helpful.

But if you’re not in the UK, you’ve got to scroll through a massive list. These dropdowns should have a search so users can type and jump straight to the right country.

19:06
Speaker 2: Exactly — like a Select2-style dropdown. It’s not a big ask.

Address form layout: bad breakpoint behaviour

20:11
Speaker 1: Now we get to the fun bit. Where do you even start?

20:18
Speaker 2: Why is this horizontal layout used for address fields? Address line 1, address line 2, postcode… it goes against convention. Addresses should be entered vertically, line by line.

This looks like someone hasn’t set the desktop breakpoint properly. They’ve built it for mobile and forgotten desktop.

Missing postcode lookup

23:53
Speaker 2: My biggest issue here is: there’s no address finder. No postcode lookup.

That would have been genuinely helpful.

24:18
Speaker 1: Something interesting happens though — when I typed “123 Fake Street” the field went green. It’s like it’s validating, but not very intelligently.

24:57
Speaker 2: And it’s shouting errors too early — before you’ve even finished filling the form in. That’s a common issue: forms that display errors when users haven’t even tried yet.

Validation feedback: colour alone isn’t enough

25:44
Speaker 2: They use green to indicate success, which is fine — but there are several issues:

• it may not meet contrast guidelines
• it relies on colour alone (bad for colour-blind users)
• it’s subtle enough that some users won’t notice

A tick icon would be better.

Postcode validation: weak logic

26:46
Speaker 1: Postcode… it accepted a valid one. But does it reject invalid ones?

27:07
Speaker 2: It doesn’t seem to. It’s likely only checking the pattern, not whether the postcode is real.

Personal details: unnecessary “Title” field

28:14
Speaker 2: Now we’re on personal details. Oh no.

Title (Mr/Mrs/Miss) is completely unnecessary for an e-commerce form. It’s a wasted field.

And why is it a dropdown? For three options?

Every field is an obstacle. If it’s not essential, it shouldn’t be there.

“Prefix” field: confusing and unnecessary

31:33
Speaker 1: What does “Prefix” even mean here? Middle name? Middle initial?

32:58
Speaker 2: It’s optional — and if it’s optional, the question is: why is it here at all?

This is perfect for an A/B test. Remove optional fields and see what happens.

Phone number: good intention, terrible execution

36:47
Speaker 1: Phone number… and the placeholder says:
“We’ll only call if there’s a problem with your…”

The message is cut off.

37:28
Speaker 2: They’ve tried to add reassurance, which is good. Phone number is a sensitive field.

But the implementation is awful. Crucial information should never be hidden inside placeholder text.

That message should sit below the field label, in plain readable copy — not hidden in an icon or placeholder.

Tooltips and icons: hiding important info creates friction

38:46
Speaker 2: If information is important enough to include, it’s important enough to show openly. Don’t hide it behind an icon.

This is especially bad on mobile. Users have to tap a tiny icon, the tooltip disappears, and now they can’t fill the field properly.

Error messages: be specific

42:22
Speaker 2: Error messages should match the nature of the error. A good message is specific.

Bad messages are vague, like:

• “Please correct this field”
• “Please enter valid input”
• “This field is mandatory”

If there are multiple possible errors, the message should guide the user clearly.

Terms & conditions: hard to see, poor layout

44:07
Speaker 1: If you hit review and pay, it triggers all the errors.

There’s an auto-scroll, which is actually decent.

45:10
Speaker 2: But the terms and conditions box is tiny. It’s far too small — especially on mobile.

And it’s placed under the basket summary on the right-hand side. That forces users to scan left-right-left-right constantly. It would be better inside the main form column.

If the page is full-width on a large screen, it becomes like playing tennis with your head.

Mobile QA warning: DevTools isn’t real mobile

49:51
Speaker 2: This is a big point: developers often check mobile using Chrome DevTools. But that’s not real mobile usability — you’re still using a cursor.

You need to test on physical devices, with fingers, in real conditions.

Even BrowserStack isn’t the same — you’re still controlling the phone with a mouse.

You should test on as many real devices as possible.

Asking for feedback mid-checkout is a bad idea

52:42
Speaker 1: Now it’s asking for feedback:
“How would you rate your experience today?”

I’m in the middle of a purchase. Am I really going to give feedback? No.

53:35
Speaker 2: There’s a time and a place to ask for feedback — checkout isn’t it, unless there’s a strong reason you can’t solve through analytics.

Overall conclusion: too much friction, not hard to fix

54:41
Speaker 2: None of what we’ve talked about is complicated to fix. It could be improved within an afternoon.

What’s more complicated is the messy design they’ve created.

55:36
Speaker 1: The payment information is also too far down the page. Users want to know how they can pay before they get to the bottom.

And the reassurance copy at the bottom is mostly waffle:

• “Customer satisfaction guaranteed”
• “Payments are completely safe”
• “We take privacy seriously”

A real guarantee is: If you don’t like it, we’ll refund you.

Final rating (and why users abandon)

57:18
Speaker 2: The overall summary is simple: if we can pull this much apart in an hour, it’s just a lack of attention and care. It needs TLC.

It’s not the worst checkout ever — but it’s definitely not good.

57:54
Speaker 1: I’d give it a three out of ten.

58:41
Speaker 1: And I’m not going to complete the purchase. The phone number field put me off — because I don’t understand why they want it.

59:09
Speaker 2: Phone number can actually be useful, but you need to explain the value to the user. For example:
“The courier may need to contact you if they can’t find your address.”

That frames it as a benefit for the customer, not a marketing grab.

01:01:26
Speaker 1: Exactly. You have to communicate perceived value. People see phone number as sacred information — and they assume it’s for spam unless you reassure them.

Closing thoughts

01:02:26
Speaker 2: This stuff isn’t fun or shiny, but it’s basic usability. And usability drives conversion.

01:02:42
Speaker 1: I’ll be kinder — I’ll give it four out of ten. You can tell some thought has gone into things like progress indicators and validation.

The thought is there. The execution isn’t.

01:03:33
Speaker 1: Chris, never send me anything like this again.

01:03:40
Speaker 2: If anyone has a form they think deserves a 10/10 — or something so awful it deserves minus thumbs — send it in. We’ll review it.

01:04:45
Speaker 1: The prize? If it’s good, we won’t roast it on LinkedIn.

01:05:01
Speaker 2: Harsh but fair. Tough love.

‍