Project Overview
The Add Friend feature was a critical enhancement, expanding on the foundational work set by the QR Code Login project. This scope of work gave us the opportunity to further refine our cross-platform interactions and more importantly, address the real world needs of our players.
The necessity of this feature was primarily driven by the addition of Riftbound and 2XKO to Riot's game catalog. With Riftbound now live and the 2XKO beta generating excitement toward its 2026 launch, both titles have a heavy in-person presence through tournaments, community events, and live gatherings. Consequently, a key goal of this project was to develop a tool that would empower players to easily connect with each other IRL.
Note: Due to NDA restrictions, certain technical details and specifics of the development process are omitted from this case study.
🔍 The Problem
Prior to this feature, adding friends on Riot Mobile required manually typing in Riot IDs. This process was error-prone, slow, and awkward, especially in IRL contexts. This friction impacted players' ability to quickly connect with friends and led to missed opportunities for social connection, creating a barrier to building player communities in and outside of game.
🎯 Goals
-
Support common real-world contexts
-
Reduce input errors
-
Reuse an interaction pattern players already trust and understand
-
Keep mental load low
🚧 Challenges
-
Define new interaction expectations while staying consistent with existing QR code pattern
-
Adapt to changing constraints
-
Balance speed with security
Research and Analysis
To ground the design in real player needs, I focused on understanding where existing add friend flows were breaking down and how QR code scanning was already being used across the Riot ecosystem. Before digging into solutions, I explored behaviors, constraints, and existing patterns to inform the direction of the feature.
I started by auditing competitor apps that used QR code scanning for social connection. This helped me identify common patterns, best practices, and potential pitfalls so I could design flows that felt familiar to players while addressing pain points unique to Riot's ecosystem.
Competitive analysis
Luckily, because I was the one who designed the QR code login pattern to begin with, I already had an understanding of existing social interaction mental models and anticipated potential friction points during QR code scanning. I knew what interactions felt familiar and trustworthy which helped me explore new flows without breaking expectations.
Below were some early explorations where I played around with how to add this new function to the existing placement of the QR code scanner.
To keep the existing QR code login pattern intact, I needed to come up with a design that supported two primary actions: 1) scanning a code to add a friend and 2) displaying your own QR code for others to scan. Having these in two distinct tabs made both flows clear and easy to access.
Design Process
After aligning with Product on the problem and constraints, I focused on outlining the existing end-to-end flow that QR code login established and compared it to some potential user flows I had in mind. The following explorations show how the experience evolved from early flow definition to low fidelity wireframes and final visual designs.
Existing user flow
Proposed user flow
Notice in the existing flow, there was only one single entry point for adding a friend that required players to navigate through multiple tabs before even starting the add friend process. This added friction into a feature that should be a simple, quick, social action. To address this, I identified multiple, contextually relevant entry points that players were already likely to visit, increasing discoverability and lowering cognitive load.
Potential entry points
Given the time constraints, I needed to prioritize which entry points were essential for MVP. To validate these decisions, I ran a moderated usability study using UserTesting.com. Participants were asked to complete a series of tasks while thinking aloud, allowing me to observe both behavior and intent in real time.
The tasks were framed around realistic scenarios such as how players would add a new friend on Riot Mobile or how they would get someone to add them during an in-person VALORANT event. This helped surface where players naturally expected to initiate adding a friend rather than where the feature could technically live.
Sentiment mapping
Across participants, the Social tab was consistently the first place players navigated to when attempting to add a friend. The profile entry point on the other hand was rarely used. Based on this signal, I removed the Profile entry point from the MVP scope and documented it as a potential backlog improvement.
Now with entry points validated, I took these insights and translated them into concrete design decisions around flow and hierarchy. The high fidelity wireframes below were the core entry points for the feature.
Newsfeed entry point
Social floating action button entry point
Adding a friend
Share and Copy
Challenges and Iterations
Balancing ideal UX with technical constraints
One design consideration was whether scanning a QR code should automatically send a friend request which you could argue is the faster, more seamless experience. However, implementing this behavior required building a new underlying framework that wasn't feasible within the project timeline.
Given the constraints, I chose to leverage Riot Mobile's existing friend request flows and preserve the explicit submission step. This interaction was still lightweight and reinforced player intent before sending a request. By doing this trade off, the team was able to ship on time without introducing technical risk while preserving existing social mental models and setting the groundwork for potential future optimization.
Results and Reflections
The final designs delivered a fast and intuitive way for players to add friends in real life while maintaining clarity and trust. By preserving existing QR code patterns and introducing clear entry points, players utilized this additional learned behavior when they want to connect quickly.
Blink and you'll miss it! Video demonstrating how quickly a player can scan a QR code and send a friend request.
Shipping this feature required careful planning due to shifting priorities and other urgent work across the org. With the goal of delivering ahead of the 2XKO launch, I focused on the most essential entry points and interactions while documenting additional ideas as future improvements.
Given more time, I would further explore additional entry points and measure long term adoption rates but the shipped solution establishes a solid foundation for scaling patterns across Riot's ecosystem.
Conclusion
This project demonstrates how meaningful player value can still be delivered under tight technical and timeline constraints. By prioritizing clarity, trust, and speed, the Add Friend via QR Code flow reduced friction within real life moments while remaining consistent with Riot's existing social ecosystem. The final solution balances usability with scalability and establishes a foundation that can expand across additional platforms and future social features. This shipped experience proves that thoughtful, constraint-driven design can still move core player behavior forward.