Shop
The project aimed to redesign the shop page by simplifying the information architecture, introducing a new navigation system, and reducing interface complexity.
Research & analysis / UX / UI
2022
G-Loot, later rebranded as Stryda, was a Stockholm-based esports company specializing in stats tracking, player identity, and competitions. It permanently ceased operations in 2023.
New card design
The problem :
Research showed that in the previous shop layout, gift cards were grouped by brand, with each brand having a separate page. The list of gift cards for each brand was also split across separate pages, making it difficult for users to get an overview of all available options. This forced them to go through multiple clicks to compare different gift card offers.
Additionally, not all gift cards were available in every country. Country emojis were placed under the macro location on each brand page to indicate availability, but they were not very effective. In some cases, they were even misleading, as users frequently clicked on the flags, expecting them to link to country-specific pages or to filter results.
Additionally, not all gift cards were available in every country. Country emojis were placed under the macro location on each brand page to indicate availability, but they were not very effective. In some cases, they were even misleading, as users frequently clicked on the flags, expecting them to link to country-specific pages or to filter results.
Browse the gallery to view wirframe samples
The solution :
With the new shop information architecture, all gift cards are now displayed on a single page and grouped by brand. Users no longer need to switch between brand pages to compare card offers. To enhance usability, a tab navigation system and a new filtering feature were introduced.
In the new design, users are automatically assigned to a country-based shop based on their location, with the option to switch via the country selector in the top-right corner.
In the new design, users are automatically assigned to a country-based shop based on their location, with the option to switch via the country selector in the top-right corner.
Additionally, two carousels were introduced to showcase different brands with evocative images and payoff messages. A new card layout was also developed to reduce complexity and height, allowing more content to be displayed on the page.
Heatmap
