TAO optimizes payment page by over +6%! TAO optimizes payment page by over +6%!

TAO optimizes payment page by over +6%!

by ,
on 30 May 2016



“After a first and successful experience with optimization of the basket page, the altima optimization team suggested that we rework the payment page. Our goal was two-fold: reassure the user and reduce the friction points tied to ergonomics.” Walerand Dewavrin, Tape à l’Œil e-Commerce Manager


Analytics data revealed a performance loss at this stage of the order tunnel. Overall, the page lacked hierarchy and reassurance although it contains very little information.

Tape à l’Œil original payment page

So what did we test?

  • Affordance and ergonomics: No visual clues let the user know that s/he should click on the logo to select a means of payment. This lack of affordance may be a friction point for some users.
  • Summary of the delivery / billing address: Seeing the delivery and billing information at this stage of the payment process can be reassuring for the user. We added a sidebar that combined the order price with this information.
  • Regroup and order of the payment methods: the different bank card types are presented separately, quite often because of technical constraints. While in reality, the call and technical platform that is called are one in the same. This differentiation increases the number of choices to be made by the user and uselessly overloads the interface. Lastly, payment by bank card is the most frequently used means of payment (by far) but it is listed second. We reversed the order of the payment means to stay coherent with user needs.
  • Gift card: Is this payment means necessary and must it be displayed by default? We decided to mask it by default to test its impact. In fact, for certain brands, we have observed that displaying too many payment means by default is counter-productive

MVT testing was conducted with 6 combinations.


Optimized version of the TAO payment page

The winning version optimized the value of the visit by +6% (revenues/sessions ration) for desktop and tablet!! The test was also run for mobiles and surprisingly, there was no increase with the same components.

The test taught us several interesting lessons:

Regrouping and order of payment means: All the bank cards were grouped in the same area and placed first. These changes boosted conversion by approximately +3.5%. Conversely, masking the gift card by default was slightly counter-productive in this test.

Correct ergonomic issues: Adding a border, a radio button and making the entire zone clickable improved affordance of payment means. These elements may seem like details and yet, it’s this second component which had the greater impact when tested with approximately 2.5%!

Reassure the user: We were not all in agreement on this recommendation within altima but the results are in: the user needs to have access to delivery information (on this site). 


Visual Website Optimizer makes is possible to generate heat maps for each combination tested. In this test, it was interesting to see the change in user behavior on the winning version.

Original version heat map vs winning version

Lack of understanding and non-clickable components: On the left of the original version, the user clicked on the title “Payment with a bank card” several times as well as on the graphic element to the right of the block. This element looked like a tab arrow and one could imagine that new content would be displayed at the click. These 2 details indicate that the choice of payments means was not clear and it disappears on the wining version.

heatmap original version vs winner version

Backtracking: Another interesting item, the breadcrumbs were often clicked on the original version probably to check the delivery information or the basket content. The amount of backtracking is greatly decreased on the winning version with the addition of a sidebar and the delivery information.


By meeting the user’s concerns on delivery and selection of a payment means, we increased TAO’s sales revenues by several thousand euros. We can take this a step further and imagine other issues:

  • Do I have the right product in my basket? Simply recalling the name of the product or its picture can reassure the user.
  • Is it necessary to specify a technical product’s characteristics in order to differentiate several products that look alike, for example, electronic components?
  • Can I return a product?
  • How soon will I receive my product?
  • etc.

I invite you to list all these hypotheses by user type, device, context, etc., to design solutions and to challenge them with a campaign of MVT testing.

Lastly, take care of your site’s ergonomics: your sales revenues depend on it!

Case Study Tape à l'oeil

Download the TAO Case Study in .pdf format




, , ,

to read next...

Leave a Reply

Your email address will not be published. Required fields are marked *


TAO optimizes payment page by over +6%!