Payment Portal

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

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

2021 / 2022

Stockholm



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) of the screen into each payment option (end of the task area, see credit card box).

This helps reduce the eye strain and time-to-completion for the task.

Unnecessary and distracting elements on the bottom-right area were removed from the interface, as well as some misleading (green) confirmation states for the credit card fields. 
These states were clearing info that the platform was able to verify only after the “pay” button was pressed.

With the new design, users can edit payment methods only accessing the payment portal from their user profile and not anymore during the purchase process.

This helps users to focus only on the purchase task and reduces cart dropouts.



Desktop interface



Error messages



Payments management




Former interface and Hotjar heatmaps