Introducing new game content and enhancing player shopping experience
Refreshing the legacy Riot Shopping Experience
Refreshing the legacy Riot Shopping Experience
Refreshing the legacy Riot Shopping Experience
Refreshing the legacy Riot Shopping Experience
RiotGames, Visual Designer Fall 2022
RiotGames, Visual Designer Fall 2022
Problem Statement
Players wants a place to easily purchase products for multiple games, and learn more details about the products that facilitate to build their in-game inventories.
Approach
I collaborated with cross-functional teams and shadowed a UX researcher to analyze player purchase behaviors. After auditing Product Detail Pages (PDPs), I synthesized insights, proposed improvements, and aligned with stakeholders on success metrics. I iterated on mid-fidelity mockups through user testing and delivered updated PDPs for 4 games and 100+ products, enhancing UX and driving measurable results.
Outcome
Product Detail Pages Templates
On-brand Digital Assets and Modulars
Final Metrics
Support 4 games in Riot Games universe
Support 100+ in-game products
Create an unified design environment
Overview
Players needed a centralized, easy-to-use experience to browse and purchase in-game products across multiple Riot Games titles. The existing experience lacked consistency and scalability.
To solve this, we designed modular, on-brand Product Detail Page templates and built a unified design system supporting 4 games and 100+ products. This streamlined product discovery, ensured visual consistency, and improved team efficiency.
Approach
I collaborated with cross-functional teams and shadowed a UX researcher to analyze player purchase behaviors. After auditing Product Detail Pages (PDPs), I synthesized insights, proposed improvements, and aligned with stakeholders on success metrics. I iterated on mid-fidelity mockups through user testing and delivered updated PDPs for 4 games and 100+ products, enhancing UX and driving measurable results.
Scaling Your Site
Learn about hosting built for scale and reliability.
Optimize for SEO
Learn how Framer can optimize your site for search engines.
CMS Examples
Get inspired by blogs, job openings, events and more.
Engaged product content
Install the Figma plugin and you’re ready to convert your designs to a responsive site.
Sharable & Scalable
Povides designers with a sharable design environment and a unified design standard. .
Design Goal
What was the problem?
What was the problem?
What was the problem?
What was the problem?
To know better of the
Business Need
Business Need
Business Need
Business Need
Business Need
A new game launch required highlighting exclusive products
A new game launch required highlighting exclusive products
A new game launch required highlighting exclusive products
A new game launch required highlighting exclusive products
A new game launch required highlighting exclusive products
LOL only
User Needs
User Needs
User Needs
User Needs
Current PDP only supports LOL and WildRift
User could't find product lore or related merch easily
User could't find product lore or related merch easily
User could't find product lore or related merch easily
User could't find product lore or related merch easily
Lack of context
UX Pain Points
UX Pain Points
UX Pain Points
UX Pain Points
Player expected the in game content before they make the purchase
Legacy page lacked flexibility and legibility
Legacy page lacked flexibility and legibility
Legacy page lacked flexibility and legibility
Legacy page lacked flexibility and legibility
How about Valorant?
Support 4 games in RiotGames universe
Support 100+ in-game products
Create an unified design environment
Support 4 games in RiotGames universe
Support 100+ in-game products
Create an unified design environment
Support 4 games in RiotGames universe
Support 100+ in-game products
Create an unified design environment
Support 4 games in RiotGames universe
Support 100+ in-game products
Create an unified design environment
Add breakpoints to your blank page, then drop sections to have them responsive out of the box.
The original PDP only supported League of Legends and Wild Rift. I redesigned it to include Valorant, aligning with Riot’s goal to feature new game IPs.Designed to support new product launch & improve user content discoverability.
Result
Result
Result
Result
Add Sections or Complete Pages
Add breakpoints to your blank page, then drop sections to have them responsive out of the box.
Get Started
Learn More
Copy Paste from Figma
Install the Figma plugin and you’re ready to convert your designs to a responsive site.
Dull VS Engaging Content
Improve user content discoverability with ability video clips and product overview
Improve user content discoverability with ability video clips and product overview
Start with Site Templates
Browse dozens of professionally designed templates. Click, duplicate, customize.
Sketches & Wireframes
Design
I explored several layout patterns to support flexible content modules
I explored several layout patterns to support flexible content modules
Personal
$5
p/month
1 projects
Analytics
Insights Panel
Share Features
Professional
$10
p/month
2 projects
Analytics
Insights Panel
Share Features
Business
$50
p/month
Unlimited Projects
Analytics
Insights Panel
Share Features
Unclear VS Informative Content
A resourceful product detail
Cut off VS Stunning Hero Image
Visual stunning hero image
Personal
WildRift
WildRift
WildRift
WildRift
$5
p/month
1 projects
Product Description & Hero Image
Product Description & Hero Image
Product Description & Hero Image
Product Description & Hero Image
Analytics
Champion & Champion Skin
Champion & Champion Skin
Champion & Champion Skin
Champion & Champion Skin
Insights Panel
Ability Panel
Ability Panel
Ability Panel
Ability Panel
Share Features
Recommendations
Recommendations
Recommendations
Recommendations
Professional
Legal of Legend
Legal of Legend
Legal of Legend
Legal of Legend
$10
p/month
2 projects
Product Description & Hero Image
Product Description & Hero Image
Product Description & Hero Image
Product Description & Hero Image
Analytics
Champion & Champion Skin
Champion & Champion Skin
Champion & Champion Skin
Champion & Champion Skin
Insights Panel
Ability Panel
Ability Panel
Ability Panel
Ability Panel
Share Features
Recommendations
Recommendations
Recommendations
Recommendations
Business
Valorant
Valorant
Valorant
Valorant
$50
p/month
Unlimited Projects
Product Description
Product Description
Product Description
Product Description
Analytics
Bundle & Single Items
Bundle & Single Items
Bundle & Single Items
Bundle & Single Items
Insights Panel
Bundle Promotion
Bundle Promotion
Bundle Promotion
Bundle Promotion
Share Features
Hero Image
Hero Image
Hero Image
Hero Image
User Research
Cross-IP Content Comparison
Cross-IP Content Comparison
Cross-IP Content Comparison
Cross-IP Content Comparison
Discover
Lux
@LOL Player
I love reading ability descriptions, but sometimes it's hard to visualize how they actually work in-game. A short video clip would make it so much easier to understand!
Raze
@Valorant Player
Why are the champion splash arts so tightly cropped? Half the time, I can’t even recognize who it is without clicking through
Lauren
@waller_texas
Honestly the @framer publish time is insanely fast. Just published 2 weeks of changes in 5 seconds – like it’s almost too fast for such a big moment.
Jinx
@LOL Player
The tooltips are helpful, but I’d love a toggle between a quick summary and a detailed breakdown with a video example. Sometimes I just need to see it to get it.
Viego
@Legend of Runeterra Player
It’s frustrating when I have to leave the client to watch ability guides. Why isn’t there an in-game demo or preview for each skill?
Parker
@_prkr
I was enjoying @framer a lot but I am BLOWN AWAY by their Figma plug-in. From Auto-layout to flex-box in the browser in seconds; this has completely changed how I'll build.
Sage
@Valorant Player
The old layout made everything feel like a mystery. Uncropped visuals would help me process info faster—especially in a fast-paced game.
Akshan
TFT Player
When I'm learning a new champion, I want to see their abilities in action—not just text. A quick video preview would save me from having to search YouTube for gameplay clips.
User Research
User Research
User Research
User Research
User Research
To know better of the
Discover
Discover
Discover
Discover
Personal
$5
p/month
1 projects
Analytics
Insights Panel
Share Features
Professional
$10
p/month
2 projects
Analytics
Insights Panel
Share Features
Business
$50
p/month
Unlimited Projects
Analytics
Insights Panel
Share Features
Lux
@LOL Player
I love reading ability descriptions, but sometimes it's hard to visualize how they actually work in-game. A short video clip would make it so much easier to understand!
Jinx
@LOL Player
The tooltips are helpful, but I’d love a toggle between a quick summary and a detailed breakdown with a video example. Sometimes I just need to see it to get it.
Copy Paste
from Figma
Install the plugin and convert your designs to a responsive site.
Get Started
Learn More
Start with Site Templates
Current State
Current State
Current State
Current State
Browse dozens of templates. Click, duplicate, customize.
This is what PDP currently looks like in Riot Shop. It allows players to purchase in-game product for league of legend only.
This is what PDP currently looks like in Riot Shop. It allows players to purchase in-game product for league of legend only.
This is what PDP currently looks like in Riot Shop. It allows players to purchase in-game product for league of legend only.
This is what PDP currently looks like in Riot Shop. It allows players to purchase in-game product for league of legend only.
Get Started
Learn More
PDP Auditing
Discover
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
Solutions
Sharable
Provides designers with a sharable design environment and a unified design standard.
Scalable
Have a PDP that can support multiple games. LOL, Wild Rift, Valorant, and more in future.
modulable
Create a consistent design framework for all the products and easily update in the future.
Explorations
Utilizing infographics to enhance understanding of the workshop's main flow and highlight contributions to the ecosystem and fashion fund.
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.
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.
Plugins
Iconography
Iconography
Iconography
Iconography
Connect your site to the most popular apps out there.
Establish a scalable iconography system for lol
Establish a scalable iconography system for lol
Establish a scalable iconography system for lol
Establish a scalable iconography system for lol
Token Design
A flexible 5-layer UI standard for Valorant, enabling agile design update and cross team consistency
Interaction Design
Hover reveals bundle price/option, simplifying purchase choices
Powerful Effects
Add effects with a few clicks and capture your audience’s attention when they land on your website.
Design & Layout
Ability Panel
Ability Panel
Ability Panel
Ability Panel
Design your site on a familiar free-form canvas. Visually set up your breakpoints to make it responsive.
The video based panel will allow players to see the champion's abilities in action and get a better understanding of how to use them effectively
The video based panel will allow players to see the champion's abilities in action and get a better understanding of how to use them effectively
The video based panel will allow players to see the champion's abilities in action and get a better understanding of how to use them effectively
The video based panel will allow players to see the champion's abilities in action and get a better understanding of how to use them effectively
Navigation
Visually structure your pages and link to them easily.
Component breakdown
Deliver
I created reusable modules that could be repurposed across other IPs.
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.
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
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.
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
Next:
Boosting the submission rate from 3% to 28% of Genies artist community"Workshop"
Personal
$5
p/month
1 projects
Analytics
Insights Panel
Share Features
Professional
$10
p/month
2 projects
Analytics
Insights Panel
Share Features
Business
$50
p/month
Unlimited Projects
Analytics
Insights Panel
Share Features
Double Click to Update Anything
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Get Started
Learn More
Reviews
“Thank you for building such an empowering tool, especially for designers! The site went from Figma to Framer in less than a week.”
How might we deliver richer relevant content to players while maintaining a cohesive and consistent design across Riot’s shop?
How might we deliver richer relevant content to players while maintaining a cohesive and consistent design across Riot’s shop?
How might we deliver richer relevant content to players while maintaining a cohesive and consistent design across Riot’s shop?
How might we deliver richer relevant content to players while maintaining a cohesive and consistent design across Riot’s shop?
Define
Kayla Ray
@kayray
Designed to support new product launch & improve user content discoverability
Designed to support new product launch & improve user content discoverability
Designed to support new product launch & improve user content discoverability
Designed to support new product launch & improve user content discoverability
Deliver
“Thank you for building such an empowering tool, especially for designers! The site went from Figma to Framer in less than a week.”
Constraints can fuel smarter standardization, turning fragmentation into scalable systems.
Working within an established design system challenged me to consolidate diverse content needs into a single, standardized format—without sacrificing flexibility. By developing a modular framework and clear content rules, we unified the shopping experience across products while allowing room for tailored merchandising. Early collaboration with UX and product teams was key to defining what must stay consistent versus where creativity could thrive.
Constraints can fuel smarter standardization, turning fragmentation into scalable systems.
Working within an established design system challenged me to consolidate diverse content needs into a single, standardized format—without sacrificing flexibility. By developing a modular framework and clear content rules, we unified the shopping experience across products while allowing room for tailored merchandising. Early collaboration with UX and product teams was key to defining what must stay consistent versus where creativity could thrive.
Constraints can fuel smarter standardization, turning fragmentation into scalable systems.
Working within an established design system challenged me to consolidate diverse content needs into a single, standardized format—without sacrificing flexibility. By developing a modular framework and clear content rules, we unified the shopping experience across products while allowing room for tailored merchandising. Early collaboration with UX and product teams was key to defining what must stay consistent versus where creativity could thrive.
Constraints can fuel smarter standardization, turning fragmentation into scalable systems.
Working within an established design system challenged me to consolidate diverse content needs into a single, standardized format—without sacrificing flexibility. By developing a modular framework and clear content rules, we unified the shopping experience across products while allowing room for tailored merchandising. Early collaboration with UX and product teams was key to defining what must stay consistent versus where creativity could thrive.
Kayla Ray
@kayray