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.
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.
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.
We work with product teams that value clarity, accountability, and long-term design impact. Share some context about your project. We'll follow up to schedule a call.