Finnley's Checkout

Interaction Design – Wireframes – Prototype – User Testing

The problem we were solving

Analysis showed too many customers who abandoned their purchase when arriving at the checkout page.

Our job was to find the reason why and come up with a solution.

Close up of Design Team at work
Assembling the Team

We tackled this problem with a small team:

  • The product owner – the owner of Finnley’s,
  • The web developer – hired by the product owner,
  • The UX Designer – that would be me.
Understanding the Problem

We executed a “talk-out-loud” test, followed by an interview.

The talk out loud session was very simple and had only one task:

  • Purchase a single item from the online shop,
    namely the Fresh Pie Chicken & Sweetcorn.

The interview was also kept brief and simple and consisted of the following sections:

  1. Question to establish demographic characteristics,
  2. Questions to establish behavioral characteristics,
  3. Questions about satisfaction and preferences.
Illustration of Online Shopping
Finnley's Checkout Page with focus on the Coupon Code
First Conclusions

Both tests made it clear the discount coupon field was the source of our troubles:

  • Users wondered why they had no coupon code,
  • The position of the field made it hard to overlook and/or ignore,
  • Finnley’s offers non essential food products, which made potential buyers turn away easier.
Looking for Confirmation with an A/B Test
Sketches of both checkouts
Test A - 557 of 765 visitors

Test B - 607 of 786 visitors

Measurable Result

With 72.8% vs. 77.2% we have 6% more customers finishing the checkout without the coupon field present.

This is in line with the design principle that less form fields is better. Whenever we can, we should limit the numbers of distractions we present the customer.

Offering an Alternative to the Client

The client did not want to omit the coupon code field, because it had fundamental functionality.

We therefore presented an alternative layout where the coupon code field could be reached by clicking on a link. This way the functionality was still there, but less obvious and less intrusive for the majority of customers.

Finnleys Checkout Form with a link to the coupon code field