Transforming Riot’s legacy shopping experience for better usability and multi-game support

Project at a Glance

Timeline

Jun 2022 - Sep 2022

Tool

Figma, Adobe Illustrator

Heat Map

My Role

User Research

Hi-fi Design

Design System

Design QA

Team

UX Designer

Product Manager

Visual Designer

Software Engineer

Riot Shop is an e-commerce platform with 10M+ users, where players can buy League of Legends products without logging into the game.I led the redesign of the product detail pages with a scalable, intuitive interface that supports multiple game contents.

Through surveys and follow-up user interviews, content that mattered most to users was prioritized and brought into the final design. By reaching out to the Valorant marketing team, assets were aligned to create brand-new templates that support Valorant products in Riot Shop

Ultimately, research insights and business goals were translated into a redesigned product detail page that supports 4 games and 100+ products, delivering a more engaging and seamless shopping experience in Riot Shop.

Project Overview

Context

Riot Shop is an e-commerce platform with over 10M users, allowing players to purchase League of Legends (LoL) products without logging into the game. As a UX/UI Design Intern, I redesigned the product detail page to support the addition of two more Riot games by developing a scalable, intuitive interface that adapts to multiple game contexts

Outcome

User testing revealed an 88% satisfaction rate with the redesigned product pages, confirming a more engaging and intuitive shopping experience.

15 UI components were developed to support 4 games and 100+ products across the platform.

Scalable design foundations were established that align with the Riot’s shop future roadmap and business growth plans.

Design Process

Product auditing

Current State

Currently, Riot Shop only offers champions and skins for League of Legends players. Users can view detailed item information such as product description, abilities diagram and on the product detail page to help them decide whether to purchase without logging into the game.

Problems to be sloved

Heatmap analysis suggested legibility issues that caused user confusion and disrupted the purchasing flow.

Click-through rate data shows that users rarely engage with the 'Read More' button, indicating a potential information delivery gap.

Inconsistent UI language and weak information hierarchy contribute to a poor visual experience

Research

User Personas & User Journey

Through the auditing, we noticed a lack of clarity in content. By developing the user persona and mapping the user journey, we identified a high risk of insufficient information delivery.

Survey

To address this, we decided to conduct quantitative research by sending out a survey to previous users to understand their preferences regarding product information.

According to the survey results, 85% of participants rated the whole shop experience under 7 from the scale of 0 to 10, and 77% expected more video content and product recommendations to help them decide whether to make a purchase.

User Interviews

We conducted 6 follow-up user interviews to validate and deepen our understanding of the survey findings. Here’s what the users said:

Design Principles

Based on the Product Auditing and Research findings, we establish two design principles and move forward to ideation phase.

Ideation

Low-fi Exploration

We explored three different layout design options. Option 3 stood out for its ability to continuously expose users to content through seamless vertical scrolling

Iterations

Champion Attributes

Radar Diagram

A radar chart is useful for efficiently comparing multiple champions’ attributes. However, behavioral analysis shows that players prefer to view a static page rather than navigate between multiple pages for comparisons. Additionally, since some champions have only four attributes, the radar chart may not be the most suitable visualization.

Attributes Overview

Following core design principles, a modular Attributes Overview was created to ensure clarity and scalability. In-game icons were used to maintain design consistency while rough percentages were represented by a circular indicator to prevent overwhelming players with excessive information. Precise percentages and support tips are shown on hover, providing additional details only when needed.

The Attributes Overview was chosen for its adaptability to different attribute counts and its step-by-step approach to presenting product information.

Ability Tab

Vertical Ability Tab

Vertical scrolling aligns with the page's natural scroll direction. However, vertical reading could disrupt the reading flow and potentially confuse users.

Horizontal Ability Tab

The tab was designed to group the five abilities in a way that creates a clear visual hierarchy, while also saving space and preventing endless scrolling.

Finally we landed on the Horizontal design which enhances usability and keeps the experience intuitive.

Design Template for Valorant

I took the initiative to develop visual patterns and color principles, establishing a design template for Valorant product images to ensure a consistent and cohesive visual language.

Bundle Promotion

Research findings indicated a strong user interest in browsing bundle offers to get better pricing. To meet this need, a bundle promotion featuring the currently viewed items was placed below the hero product image.

The first version included CTA buttons with pricing to encourage exploration and conversion. However, in the user testing section, player was confused by the multiple buttons and price tags.

Building on the interaction pattern from the Attributes Overview, a hover-triggered UI card was introduced to improve clarity and reduce friction in the second version. It surfaces bundle purchase CTA buttons and pricing only when relevant, keeping the interface clean while supporting user decision-making.

Final Deliverables

Prootyping

League of Legends

The upgraded product detail pages were designed to fill information delivery gaps and provide a wide range of in-game content, enabling players to make more confident purchase decisions and enjoy a smoother shopping experience.

Valorant

Both bundle and individual item product detail pages were designed and implemented in the Riot Shop, allowing users to discover more affordable bundle options while browsing individual items. This enhanced the shopping experience for players, expanded product visibility, and supported broader business sales goals.

Outcome

User testing revealed an 88% satisfaction rate with the redesigned product pages, confirming a more engaging and intuitive shopping experience.

15 UI components were developed to support 4 games and 100+ products across the platform.

Scalable design foundations were established that align with the Riot’s shop future roadmap and business growth plans.

Learnings

One key lesson I learned from this project was the importance of fully understanding the product before trying to improve it. Gaining sufficient context early on helps designers build a clear mental model and identify potential issues. A closer look at user data can then validate assumptions made during earlier research. With tools like heatmaps and Optimal Workshop, data can be translated into actionable insights that inform design principles and guide ideation. Additionally, building a comprehensive and up-to-date product resource helps ensure the entire team stays aligned and informed.

Thrives in collaborative & playful spaces

Transforming Riot’s legacy shopping experience for better usability and multi-game support

Riot Shop is an e-commerce platform with 10M+ users, where players can buy League of Legends products without logging into the game.I led the redesign of the product detail pages with a scalable, intuitive interface that supports multiple game contents.

Through surveys and follow-up user interviews, content that mattered most to users was prioritized and brought into the final design. By reaching out to the Valorant marketing team, assets were aligned to create brand-new templates that support Valorant products in Riot Shop

Ultimately, research insights and business goals were translated into a redesigned product detail page that supports 4 games and 100+ products, delivering a more engaging and seamless shopping experience in Riot Shop.

My Role

User Research

Hi-fi Design

Design System

Design QA

Timeline

Jun 2022 - Sep 2022

Tool

Figma, Adobe Illustrator

Heat Map

Team

UX Designer

Product Manager

Visual Designer

Software Engineer

Project at a Glance

Project Overview

Context

Riot Shop is an e-commerce platform with over 10M users, allowing players to purchase League of Legends (LoL) products without logging into the game. As a UX/UI Design Intern, I redesigned the product detail page to support the addition of two more Riot games by developing a scalable, intuitive interface that adapts to multiple game contexts

Outcome

User testing revealed an 88% satisfaction rate with the redesigned product pages, confirming a more engaging and intuitive shopping experience.

15 UI components were developed to support 4 games and 100+ products across the platform.

Scalable design foundations were established that align with the Riot’s shop future roadmap and business growth plans

Design Process

Product auditing

Current State

Currently, Riot Shop only offers champions and skins for League of Legends players. Users can view detailed item information such as product description, abilities diagram and on the product detail page to help them decide whether to purchase without logging into the game.

Problems to be sloved

Heatmap analysis suggested legibility issues that caused user confusion and disrupted the purchasing flow.

Click-through rate data shows that users rarely engage with the 'Read More' button, indicating a potential information delivery gap.

Inconsistent UI language and weak information hierarchy contribute to a poor visual experience

Research

User Personas & User Journey

Through the auditing, we noticed a lack of clarity in content. By developing the user persona and mapping the user journey, we identified a high risk of insufficient information delivery.

Survey

To address this, we decided to conduct quantitative research by sending out a survey to previous users to understand their preferences regarding product information.

According to the survey results, 85% of participants rated the whole shop experience under 7 from the scale of 0 to 10, and 77% expected more video content and product recommendations to help them decide whether to make a purchase.

User Interviews

We conducted 6 follow-up user interviews to validate and deepen our understanding of the survey findings. Here’s what the users said:

Design Principles

Based on the Product Auditing and Research findings, we establish two design principles and move forward to ideation phase.

Ideation

Low-fi Exploration

We explored three different layout design options. Option 3 stood out for its ability to continuously expose users to content through seamless vertical scrolling

Iterations

Champion Attributes

Radar Diagram

A radar chart is useful for efficiently comparing multiple champions’ attributes. However, behavioral analysis shows that players prefer to view a static page rather than navigate between multiple pages for comparisons. Additionally, since some champions have only four attributes, the radar chart may not be the most suitable visualization.

Attributes Overview

Following core design principles, a modular Attributes Overview was created to ensure clarity and scalability. In-game icons were used to maintain design consistency while rough percentages were represented by a circular indicator to prevent overwhelming players with excessive information. Precise percentages and support tips are shown on hover, providing additional details only when needed.

The Attributes Overview was chosen for its adaptability to different attribute counts and its step-by-step approach to presenting product information.

Ability Tab

Vertical Ability Tab

Vertical scrolling aligns with the page's natural scroll direction. However, vertical reading could disrupt the reading flow and potentially confuse users.

Horizontal Ability Tab

The tab was designed to group the five abilities in a way that creates a clear visual hierarchy, while also saving space and preventing endless scrolling.

Finally we landed on the Horizontal design which enhances usability and keeps the experience intuitive.

Design Template for Valorant

I took the initiative to develop visual patterns and color principles, establishing a design template for Valorant product images to ensure a consistent and cohesive visual language.

Bundle Promotion

Research findings indicated a strong user interest in browsing bundle offers to get better pricing. To meet this need, a bundle promotion featuring the currently viewed items was placed below the hero product image.

The first version included CTA buttons with pricing to encourage exploration and conversion. However, in the user testing section, player was confused by the multiple buttons and price tags.

Building on the interaction pattern from the Attributes Overview, a hover-triggered UI card was introduced to improve clarity and reduce friction in the second version. It surfaces bundle purchase CTA buttons and pricing only when relevant, keeping the interface clean while supporting user decision-making.

Final Deliverables

Prootyping

League of Legends

Offers a clear content breakdown to support a more informed and focused pre-reading experience.

Enables users to explore AI-curated reading recommendations, increasing the user engagement and enhancing content discovery.

Valorant

Provides contextual information linked directly to highlighted text, helping users better understand complex ideas while reading.

Outcome

User testing revealed an 88% satisfaction rate with the redesigned product pages, confirming a more engaging and intuitive shopping experience.

15 UI components were developed to support 4 games and 100+ products across the platform.

Scalable design foundations were established that align with the Riot’s shop future roadmap and business growth plans

Learnings

One key lesson I learned from this project was the importance of fully understanding the product before trying to improve it. Gaining sufficient context early on helps designers build a clear mental model and identify potential issues. A closer look at user data can then validate assumptions made during earlier research. With tools like heatmaps and Optimal Workshop, data can be translated into actionable insights that inform design principles and guide ideation. Additionally, building a comprehensive and up-to-date product resource helps ensure the entire team stays aligned and informed.

Thrives in collaborative & playful spaces