.svg){kind=icon}
In the payment page project at the company, I pursued several objectives. The first one was to introduce visual changes to the UI since the current one was quite outdated, especially considering the customization capabilities offered by Stripe and other competitors.
The second goal was to enhance usability wherever possible throughout the process. Given that millions of people are expected to use this payment page in the future, my colleague and I had to put in a lot of effort to achieve these objectives.
The first problem I encountered is the somewhat complex layout, on one hand, using a grid like this, we could display many methods at once so that the user can see their options right away. However, in reality, if we provide the user with such a layout, there is a significant chance that they might overlook the desired payment method. To avoid this, all the methods were arranged one below the other.Another issue is that all the payment information is hidden in the cart, which, on one hand, doesn't distract from the payment flow, but on the other hand, can be confusing because the icon does not symbolize a real action (there are no products there). Therefore, on the desktop, the first instinct was to redesign this.
The first problem I encountered is the somewhat complex layout, on one hand, using a grid like this, we could display many methods at once so that the user can see their options right away. However, in reality, if we provide the user with such a layout, there is a significant chance that they might overlook the desired payment method. To avoid this, all the methods were arranged one below the other.
Another issue is that all the payment information is hidden in the cart, which, on one hand, doesn't distract from the payment flow, but on the other hand, can be confusing because the icon does not symbolize a real action (there are no products there). Therefore, on the desktop, the first instinct was to redesign this.
The design was also prepared for the desktop so that users of each platform have a native experience using the payment page.
We also created a dark theme for the payment page, in which the colors were chosen so that the user could clearly read all the text and visually separate the logical blocks on the page.
We also meticulously worked on fields like IBAN, where users were making avoidable errors. This improved the conversion rate by 89%.
.avif)
To expedite the development of payment flows, I prepared a component library from which all the necessary screens could be quickly assembled in a very short amount of time.
And of course, to ensure that we were designing in a way that truly addressed user needs, we prepared all the flows that exist on the payment page.
.svg)