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
(now Stryda)
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
