“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?
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.
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:
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!