online tours store

As already described in the challenge and presented in the screenshot above, users really faced problems on the checkout page. The whole block is long, which forces users to constantly scroll up the page. The choice of the payment sum is made by tabs, which many users do not notice at first and don’t understand how this affects the payment process. Also, the payment terms are not immediately visible, but each method is different. This forces the user to pay attention to the payment conditions, to read information by clicking on each tab, because otherwise the tour may "burn out" (either the price of the tour will be higher, or the tour will be sold out = lower loyalty to the product).

In the new version of the design, the user’s attention is initially focused on choosing a payment method, now each payment method is described under what conditions the payment is made. Also, on the right side, you can see a check with a full description of what the user pays for.

After choosing the amount of payment, the list with the choice turns into an accordion. So the user can change the amount of payment later if needed. A payment card appears, and here we’ve made some changes too: the cardholder’s name has been removed (since this field doesn’t represent any value for payment), the type of accepted payment systems has also been removed (this aspect doesn’t influence users), an item about payment security has been added. This increases loyalty and reduces anxiety during the payment process (safety certificates are actually used too, but for some reason weren’t displayed visually). Also, in the right block with the check, after selecting the payment method appears an additional block about the payment sum, since in other payment methods it may differ from the total amount of the tour.

To improve the user experience, it was decided to add changes to the card design depending on the data input. We downloaded data on all transactions made during the year, to figure out, which banks our users prefer. We found a logo and corporate colours of each bank to help users compare data of the digital and real cards easily. Additionally, I created a 'default' card for other banks, which will be added retrospectively when it appears in the system.

Very important was to change the design of the instalment plan correctly. Yes, there is a lot of text in this paragraph, and it turned out to be massive, but users need to be properly informed about the conditions the partner provides. The layout of the application process has changed — the user won’t be able to miss information about the process, as it happened before. Also in the check block, we inform the user that the first instalment of the tour is 0 Rubles.

The previous version also had a lot of problems in terms of development and design. In the new version, the number of fonts and styles has decreased, the blocks are built on a grid, and the margin and paddings have been applied to a new logic.