The project involved the redesign of the payment portal, with a special focus on the mobile experience. The goal was to minimize cart abandonment and to smooth the purchase experience.

G-Loot is an esports company based in Stockholm. The company is focused on stats tracking, player identity and challenges.

Tasks: Research & analysis / UX / UI / Prototype

Mobile interface

A light mode design system, opposite to G-Loot platform one, was adopted for the payment portal. Previous research showed that the light mode was able to convey users a greater feeling of security and reassurance when it comes to payments.

The purchase summary and CTA elements were highlighted with a brighter background and a clearer elevation. Additional elements, like the shield icon, are presented in order to increase the level of trust.

New strategies and animations for the mobile version were developed in order to prioritize task areas without losing track of the purchase amount at every stage of the process.

New payment

Payment methods

Saved methods

For the desktop version, a more sequential approach was adopted. CTA buttons were moved from the right area (end of the summary) into each payment option (end of the task area, see credit card box). This approach helps reduce the eye strain and time-to-completion for the task.

Distracting elements on the bottom-right area were removed, along with some misleading green confirmation states for the credit card fields. With the new design, users can edit payment methods only by accessing the payment portal from their user profile and not anymore during the purchase process. Users can now focus only on the purchase task. This was beneficial to reduce cart dropouts.

Desktop interface

Error messages

Payments management

Former interface and Hotjar heatmaps