Redesign of the payment form
Context
Payment form is a b2c product of Tinkoff, which is visited by 30M+ users every month to pay for their online purchases
Problems
- Old UI
- High cognitive load due to the many heavy buttons of alternative payment methods
- Small conversion rate of payment via Tinkoff Pay
Support ticket analysis
- Users enter their phone number in the card field
- Users click the payment button without entering a card
→ Insights
To do
Make an up-to-date UI and at the same time increase conversion to card payment and Tinkoff Pay
Restrictions
- No ability to change the backend and flows, changes are only available on the frontend
- Guidelines of partners of alternative payment methods
Process
We collected references, analysed competitors and made hypotheses.
We sketched out many different approaches to the scenario, but when grooming with the development we found out that we are very limited in critical changes, as the payment form has a functional of customisation by merchant, which affects and is used by a large number of users.
So we decided to move iteratively and to carry out the first stage of redesign without major changes in functionality
Solution
- Less cognitive load by using less heavy buttons and displaying a maximum of three alternative payment methods on the screen
- Text in blocks that makes it easier to understand the interface
- Same layout for web and mobile for easier development and support
- More opportunities to show the benefits and convenience of Tinkoff Pay
- For fans of the dark theme
Impact
- Payment by card +9%
- Tinkoff Pay +16%
- The gratitude of the merchants (priceless)