Web Design
Web Design
Web Design
Visual Design
Visual Design
Visual Design
RiotGames
Product Page Design
RiotGames
Product Page Design
RiotGames
Product Page Design
Overview
Overview
Overview
Direct Content is the official E-Commenece website, allows players to purchase in-game content on the web, from any device and at any time.
The Product Detail Page in Direct Content helps players better understand the game products they are buying and creates a player-friendly shopping experience.
Direct Content is the official E-Commenece website, allows players to purchase in-game content on the web, from any device and at any time.
The Product Detail Page in Direct Content helps players better understand the game products they are buying and creates a player-friendly shopping experience.
Role
Role
Role
UI/UX Design
Visual Design
UI/UX Design
Visual Design
Tool
Tool
Tool
Figma
Figma
Current Problems
Current Problems
Current Problems
Current web layout negatively impacts legibility
Current PDP only supports LOL and WildRift
Player feedback indicated that they want to see more content information to help them better understand the products
Current web layout negatively impacts legibility
Current PDP only supports LOL and WildRift
Player feedback indicated that they want to see more content information to help them better understand the products
Solutions
Solutions
Sharable
Sharable
Provides designers with a sharable design environment and a unified design standard.
Provides designers with a sharable design environment and a unified design standard.
Provides designers with a sharable design environment and a unified design standard.
Scalable
Scalable
Have a PDP that can support multiple games. LOL, Wild Rift, Valorant, and more in future.
Have a PDP that can support multiple games. LOL, Wild Rift, Valorant, and more in future.
Have a PDP that can support multiple games. LOL, Wild Rift, Valorant, and more in future.
modulable
modulable
Create a consistent design framework for all the products and easily update in the future.
Create a consistent design framework for all the products and easily update in the future.
Create a consistent design framework for all the products and easily update in the future.
Explorations
Explorations
Explorations
Utilizing infographics to enhance understanding of the workshop's main flow and highlight contributions to the ecosystem and fashion fund.
Utilizing infographics to enhance understanding of the workshop's main flow and highlight contributions to the ecosystem and fashion fund.
Utilizing infographics to enhance understanding of the workshop's main flow and highlight contributions to the ecosystem and fashion fund.
Final Design
Final Design
I redesigned the product detail pages for League of Legends' champion to make them more informative and engaging for players. I improved the text hierarchy and added more game content to the PDPs, including tips on how to play each champion effectively. I also introduced our content creator program to encourage players to create and share their own content. My redesign aims to showcase our commitment to supporting the League of Legends community.
I redesigned the product detail pages for League of Legends' champion to make them more informative and engaging for players. I improved the text hierarchy and added more game content to the PDPs, including tips on how to play each champion effectively. I also introduced our content creator program to encourage players to create and share their own content. My redesign aims to showcase our commitment to supporting the League of Legends community.
To help players understand each champion's abilities more clearly, I added a video section to the PDPs. This will allow players to see the champion's abilities in action and get a better understanding of how to use them effectively.
I also created an official community for players to communicate and share their thoughts about the champion's abilities.
This section is designed to link with our community in the future, which will facilitate our future roadmapping and allow us to better understand our players' needs.
Bundle Valorant Product Detail page
Bundle Valorant Product Detail page
In addition to redesigning the PDPs for League of Legends' champion characters, I also worked on creating PDPs for the game Valorant. The goal was to enhance our strategy for the multi-game world framework and provide our audiences with multiple purchase options.
In addition to redesigning the PDPs for League of Legends' champion characters, I also worked on creating PDPs for the game Valorant. The goal was to enhance our strategy for the multi-game world framework and provide our audiences with multiple purchase options.
As Valorant is a new addition to our games portfolio, there were no specific UI design standards available for the game. To address this, I worked closely with the Valorant and UX teams to create a UI standard with five layers.
This standard allows for efficient design changes in the future. Other designers can simply adjust the label layer and the color layer to fit the bundle color, rather than having to redesign the entire layout. This improves design efficiency and achieves sharability across different teams and projects.
Individual item Product Detail page
Individual item Product Detail page
Bundle Promotion
Bundle Promotion
Initially, I added a button to guide users to the bundle section, but it caused confusion since there were already one purchase buttons. So, I moved the button to a more subtle location. Now, when a player hovers over the card, they will see the bundle price and a button to the bundle section. This improves the user experience and makes it easier for users to choose their preferred purchase option.
Initially, I added a button to guide users to the bundle section, but it caused confusion since there were already one purchase buttons. So, I moved the button to a more subtle location. Now, when a player hovers over the card, they will see the bundle price and a button to the bundle section. This improves the user experience and makes it easier for users to choose their preferred purchase option.
Initially, I added a button to guide users to the bundle section, but it caused confusion since there were already one purchase buttons. So, I moved the button to a more subtle location. Now, when a player hovers over the card, they will see the bundle price and a button to the bundle section. This improves the user experience and makes it easier for users to choose
their preferred purchase option.
Prompt Template
I relocated the button that directs users to the bundle section after initial confusion with its placement alongside existing purchase buttons. Now, hovering over the card reveals the bundle price and a discreet button for easy access to the bundle section, enhancing user experience and decision-making.
I relocated the button that directs users to the bundle section after initial confusion with its placement alongside existing purchase buttons. Now, hovering over the card reveals the bundle price and a discreet button for easy access to the bundle section, enhancing user experience and decision-making.
I relocated the button that directs users to the bundle section after initial confusion with its placement alongside existing purchase buttons. Now, hovering over the card reveals the bundle price and a discreet button for easy access to the bundle section, enhancing user experience and decision-making.
Weapon Skin
Weapon Skin
