Improved payment error visibility to reduce player confusion and failed transactions
Players enter the client homepage, where the current alert is
The payment issue alert lacks visibility and is easily overlooked on the homepage
Players discover payment issues only after completing the payment process
1
The prompt appeared too early
The homepage is outside the payment flow, making alerts easy to miss
2
Users easily overlook floating content
The alert requires no user acknowledgment, making it easy to overlook
3
Users need to remember the prompt
Alerts shown before payment are easy to forget
4
The payment interface is missing real-time alerts.
Notifying users after a payment failure is too late
1
Most severe case: All payment methods are unavailable
Users should be clearly informed when payments are unavailable to prevent further action
Option 1
Illustrated Modal
Final Plan
Simple Confirmation Modal
Option 3
Full Banner
Advantages
Cute illustrations can reduce user frustration
A narrow design is more likely to attract attention
Advantages
Familiar interaction pattern
Clear, low-effort messaging
Responsive to different content lengths
Compact and highly noticeable
Advantages
High visual prominence and visibility
Difficult to overlook critical information
Supports longer and more detailed messaging
Disadvantages
Less consistent with the existing ticker-based experience
Requires more screen space and user interaction
Depends on additional visual assets and illustrations
Disadvantages
May be overlooked during quick dismissal
Readability decreases with longer content
Disadvantages
Higher space usage and potential disruption
Less aligned with existing design language
Long messages may reduce focus on critical information
2
More common scenario: 1+ payment methods unavailable
Clearly communicate abnormal states while minimizing disruption to the user experience
Final Plan
Grayed out + Tooltip
Option 2
Highlight + Tooltip
Option 3
Displayed in order summary
Advantages
Grayed-out states indicate unavailable payment methods
Tooltips provide detailed explanations for payment issues
No additional space required on payment page
Supports method-specific error messaging
Advantages
Highlighted states indicate payment issues
Tooltips provide detailed explanations for payment exceptions
No additional space required on payment page
Supports payment method–specific error messages
Advantages
Captures user attention without requiring hover interactions
Supports multiple payment exceptions within a single interaction area
Better aligned with future use cases in the new LoL client
Disadvantages
Hover information can be easily overlooked, which may lead to user confusion
Disadvantages
Strong visual emphasis may disrupt the overall interface hierarchy.
Users may overlook hover-only information, resulting in confusion or frustration.
Disadvantages
Long messages may still be skimmed or ignored
Top-right placement can reduce visibility
Requires significant page space
1
All payment methods are unavailable
Valorant
Bright neon red and sharp visuals reinforce a modern, high-tech aesthetic
Clean, angular UI aligns with the tactical shooter experience
High-contrast warnings increase the visibility of critical issues
League of Legends
The black-and-gold palette reinforces the game's classic fantasy aesthetic
Capitalized and serif typography enhances a sense of grandeur and tradition
Improves message visibility while preserving immersion
2XKO
The contrast between black and neon colors reinforces a modern aesthetic
Bold, uppercase typography reflects the power and intensity of fighting games
A minimalist layout makes exception messages clearer and more direct
2
1+ payment methods are unavailable
Valorant
Embed payment issues directly into the payment flow for clearer information hierarchy
Use warning-style system feedback to increase the visibility of payment issues
Maintain a compact interface to minimize disruption during payment selection
League of Legends
Integrates exception messaging into the game's fantasy aesthetic
Maintains visual consistency through established borders and hierarchy
Preserves high information density while staying true to LoL's UI language
2XKO
Direct prompts support the fast-paced nature of fighting games
Improve decision-making with stronger button contrast and fewer interaction steps
Maintain visual impact while prioritizing clear information delivery
During my internship at Riot, I learned how to proactively share work, collaborate across teams, and iterate through feedback. Guided by Riot's "Player First" philosophy, I grounded my design decisions in real player needs and refined solutions through research, stakeholder discussions, and continuous iteration. This experience strengthened my UX design, communication, and collaboration skills, while deepening my passion for creating meaningful user experiences.
sh835@cornell.edu
Phone number
189-0189-9696
linkedin.com/in/lilyshiyihuang/