Conversion Rate Optimization (CRO) is a process-oriented practice, which essentially aims at enhancing user experience on a website.
It starts with proactively recognizing challenges faced by users across a conversion funnel, and addressing them through various tools and techniques.
Tinkoff Bank understands the need for a process-oriented approach to CRO and puts it into practice.
The following case study tells us more about Tinkoff’s CRO methodology — and how it delivers incredible results.
About the Client
Tinkoff Bank is a major online financial services provider in Russia, which was launched in 2006 by Oleg Tinkov. In just a small duration, the bank has grown into a leader in credit cards — becoming one of the top four credit card issuers in Russia.
Notably, the bank was named Russia’s Best Consumer Digital Bank in 2015 by Global Finance.
Tinkoff operates through a branch-less digital platform, and relies a lot on its website for finding new customers. Like any other smart business, the bank constantly explores new ways to improve its website’s conversion rate. For this job, Tinkoff has a dedicated web analytics team that plans and executes CRO strategies on the website.
The Context of Optimization Efforts
Tinkoff Bank lets users apply for a credit card through an application form on its website. Users can fill up the application form, and submit it for approval from the bank. Once the application is approved, users receive their credit card at their homes — with zero shipment cost.
This is the original application page:
The application page on the website is fairly elaborate, consisting of a multi-step form and details about the application process and the credit card plan. This page is where conversions (form-submits) happen for Tinkoff.
Since the form involves multiple steps for completion, Tinkoff tracks submits for each step of the form along with submits for the complete form. Tinkoff refers to these conversions as short-application submits and long-application submits, respectively.
The ultimate goal for Tinkoff is to increase these conversions.
The Case for Conversion Rate Optimization
The CRO team at Tinkoff was working on improving their website’s usability to get higher conversions. It began with identifying key pages on the website that could be optimized. For this purpose, the team analyzed the website’s user data with Adobe Site Catalyst. It found that the credit-card application page had a significant bounce rate.
Next, the team planned on ways to help users stay on the application page and complete the conversion. They zeroed in on three areas of the web page, where they could introduce new features. The hypothesis was that these new features will improve user experience on the page.
However, the team needed to be absolutely sure about the effectiveness of these new features before applying changes to the web page permanently. There was only one way to do it — through A/B testing!
Tinkoff used VWO to carry out A/B tests on the page, and determine whether it was beneficial to introduce new functions there.
Let’s look at the tests closely.
TEST #1: Providing an Additional Information Box
By offering additional details about the credit card above the form, the number of sign-ups will increase.
Tinkoff created two variations of the original (control) page.
The first variation included a “More details” hyperlink underneath the “Fill out form” CTA button placed above the fold. When clicked, the hyperlink led to a new page which provided additional information about the credit card scheme.
Here is how it looked.
The second variation had the same “More details” link below the CTA button. But this time, the link opened up a box right below. The box provided additional information — through text and graphics — about the credit card.
Here’s the second variation.
The test was run on more than 60,000 visitors for a period of 13 days.
The first variation couldn’t outperform the control. It had an even lower conversion rate than the control.
The second variation, however, won against the control, and improved the page’s conversion rate by a handsome 15.5%. Moreover, it had a 100% chance of beating the control.
Displaying Key Differentiators:
Placing key differentiators — factors that make one superior than its competitors — on a web page prominently is one of the leading best practices in CRO. The key differentiators enhance the image of a brand in users’ eyes, which influences them to make a conversion.
Tinkoff, too, wanted to place its differentiators on the application form page. In order to not clutter the page, Tinkoff decided to display these differentiators within a box, behind the “More details” link.
The box clearly illustrated Tinkoff’s key differentiators such as free shipping of the card, free card recharge, and cashback on all purchases made through the card.
Emphasizing on Free Shipping:
By now, we all know how free shipping influences the minds of the customers. In fact, lack of free shipping is the number one reason why people abandon their shopping carts!
Naturally, displaying “Free shipping” prominently on the application page worked well for Tinkoff.
Note: Although free shipping was already mentioned on the original page’s top right corner, it didn’t have much contrast against the background — making it potentially unnoticeable to visitors. The variation, however, increased the chances of visitors spotting the much loved free shipping offer.
Reassuring Users About Tinkoff’s Credibility:
Reassuring users at each step of a conversion process helps improve the conversion rate. This is the reason why trust badges, testimonials, and social proof work for so many websites.
Likewise, the features-box on the application page reassured users about Tinkoff’s credibility. The box mentioned how Tinkoff is the leading internet bank providing more than 300,000 points of recharge, and how its service is completely digital — users don’t ever have to visit bank branches. This helped in making users trust the bank’s services, thereby increasing form submits.
Related Resource: 32% Increase in Conversions by A/B Testing for The Right Reasons
Why Did The First Variation Fail?
The “More details” link on the first variation page led users to a new page where additional information about the credit card was present. This feature, however, distracted some users away from the application form. And since web users have a short attention span, some users probably didn’t return back to complete the form — reducing the total number of conversions.
Furthermore, users had to make an effort leaving the application page to go on the new link, browsing through the content there, and returning back to the previous page to submit the form. Because of this effort involved, many users wouldn’t have visited the “More details” page — nullifying any value that the page could have provided them with. And without enough information, many users wouldn’t have converted.
TEST #2: Gamifying the Form Using a Progress Bar
Providing a “progress bar” on top of the four-step application form will motivate users to fill the form completely, resulting in a higher conversion rate.
Here again, Tinkoff designed two variations of the original form page.
The first variation had a yellow banner-like progress bar, right above the form. The progress bar highlighted the step on which the user was present. It also displayed the user’s progression on the form graphically, using a black line at its bottom. The bar mentioned the probability of approval of a credit card based on how far the user had filled the form.
This is the first variation.
The second variation also had a progress bar, but with a different design.
Similar to the first variation, the second variation’s progress bar displayed the form’s step number and the probability of approval of a credit card. But, the progress bar here was green in color. And it didn’t have any additional black line to show the user’s progress on the form. Instead, the bar itself represented the user’s progression graphically: The green portion of the bar grew as users moved further on the form.
Take a look.
The test ran on more than 190,000 visitors for a period of 39 days.
Both the variations outperformed the control!
The first variation had a 6.9% higher conversion rate than the control.
However, the second variation was the overall winner. It improved the conversion rate of the page by a robust 12.8%.
Both the variations had a 100% chance to beat the original page.
Curbing Users’ Anxiety:
Nobody likes filling up long forms on websites. Users only do that when they expect equal or higher value in return.
When users find lengthy forms, they often become anxious. This happens because they aren’t sure of gaining satisfactory value after completing the form. Many times, user’s anxiety leads them to bounce off the form (or the website altogether).
However, there are various website elements that are used to reduce users’ anxiety on a website — progress bar being one of them.
A progress bar helps curb anxiety of users by providing them a visual cue about the effort required to complete a process. It reassures users that the process will be completed in due time and effort, keeping them from bouncing off the page.
The above fact has been concluded by various studies conducted on website and application designing.
‘Gamifying’ Users’ Experience:
Almost all of the web users today would have played video games on some platform or the other. It’s safe to say that most of them are familiar with progress bars displayed within such games. The progress bars, there, are usually associated with users’ progress within a game, telling how far they’ve reached in finishing the game’s objective (or beating a certain opponent in the game).
The progress bar on Tinkoff’s credit card application form introduced a similar gaming experience to its users. The progress bar could only be fully filled when users completed their whole form. Whenever users found a partially filled progress bar, they had an additional motivation to fill and submit the form.
The fully filled progress bar, later, provided users with a sense of achievement.
The progress bar deployed another gamification technique — reward.
On Tinkoff’s form page, the technique was put into force using an overlaid text on the progress bar. For instance, when users were on the second step of the form, the text read “The probability of approval is 30%” and “Get 10% for Step 2 completion.” Since users were investing time and effort in applying for the credit card, they would really want to have the highest probability for its approval. By realizing the importance of each step of the form for their application’s approval, users were further motivated to complete them.
Why Did The Second Variation Perform Better Than The First?
Because the second variation’s progress bar had greater visibility on the application page.
Providing contrast to your key elements on a web page is one of the fundamental principles of web design.
The first variation’s progress bar was a black line, and on the bottom of a yellow banner. Since the color scheme of the overall page included white, grey and yellow, the progress bar and the banner didn’t have much contrast. For some users, the progress bar could have easily blended in with the page’s theme. Moreover, the progress bar was quite thin, possibly making it even harder for some users to notice it.
The second variation’s progress bar, on the other hand, flaunted green color — giving it ample contrast and visibility on the page. The width of the bar, too, was large enough to make it noticeable to the users. And once the the progress bar was noticed by the users, its persuading factors started to work on them.
TEST #3: Letting Users Fill Their Details Later
By giving users an option to fill up their passport details on the application form later, the number of form-submits will increase.
This test involved only one variation that was pitted against the control.
On the form’s second step, users were required to submit their passport related information. The variation gave an option to the users for completing this step later, using a “Don’t remember passport details” checkbox. Upon clicking this checkbox, a small window appeared, asking users to choose a medium — phone or email — to provide their details later. Users could complete the form whenever they had the passport details handy with them.
Here are the screenshots of the checkbox and the pop-up window.
The test ran on over 265,000 visitors for a period of 23 days.
The variation won over the control page convincingly. It improved the conversion rate of the form by a whopping 35.8%. The after-filling conversion rate, too, increased by 10%.
The variation had a 100% chance to beat the control.
Acknowledging Users’ Issues:
The second step on the application form required detailed information about users’ passport. The form asked for information like passport’s date of issue, series and number, code division, and more. Most of the users don’t remember these details about their passport by memory. In order to complete the form, the users had no option but to take out their passports and look for the required information. However, some users wouldn’t have their passport handy with them while completing the form. This would have forced them to leave the form.
Now, with the option to fill out the passport details on the form later, users didn’t have a reason to leave the application form in the middle.
Providing Freedom to Users:
Once users clicked on the “Don’t remember passport details” checkbox on the page, they were met with two options for filling up the form later. They could either have the incomplete form’s link emailed to them, or they could choose the ‘phone’ option. The latter option allowed users to fill up the form through a phone call with Tinkoff’s executives.
Completing the form through a telephone call, particularly, reduced a great deal of effort that users had to make.
Virtually Shortening the Form-length:
Once users chose to fill their passport details later, they were only left with two steps to complete out of the total four. So effectively, users had already covered half of the application form. And this information was reinforced by the progress bar on top of the form.
As users had completed the first half of the form like a breeze, they looked forward to completing the next half equally quickly.
In addition, the option to fill the passport data through a phone call, actually, converted the form into a three-step process.
Conversion Rate Optimization is not about testing random ideas on your website. It is about improving your website’s user experience through a coherent process. This process involves identifying areas of improvement on your website and suggesting changes based on traffic data and user behavior, and best practices. It’s followed by A/B testing these changes and learning about the effectiveness of the changes. Only when the changes improve the conversion rate of your website, you apply them permanently.