Project Overview
The QR Code Login project was designed to simplify and secure user access across Riot’s ecosystem, enabling players to sign into any Riot game on PC using a streamlined, QR-based authentication flow. I led the UX design for both mobile and web interfaces, ensuring a cohesive experience across all platforms. This feature went live in North America on October 16th, 2024. Expansion to APAC and MENA regions is slated for early 2025.
​
​Note: Due to NDA restrictions, certain technical details and specifics of the development process are omitted from this case study.
Research and Analysis
The concept for the QR Code Login feature originated from a critical need to enhance Riot’s login process, aiming to get players into the game faster while ensuring secure access. With the upcoming release of 2XKO on console in 2025, the team recognized the demand for a quick, reliable login solution that would make switching devices and logging in across platforms effortless. Given the importance of seamless, cross-platform authentication, the research phase focused on understanding user needs for both security and ease of access.
I conducted a comprehensive competitor analysis, studied behavioral data, and mapped out possible user flows. Additionally, I leveraged insights from prior work on Multi-Factor Authentication (MFA) at Riot. This groundwork helped clarify user expectations around security and ease of use, providing a foundation for the QR code login flow’s structure and functionality.
Competitive analysis of existing QR code apps
User journey map
Mapping user interactions across platforms was crucial to designing an intuitive and flexible QR code login experience. I explored various user pathways to ensure seamless access, regardless of the device or platform.
Technical flow
Unlike previous features, this project required a deeper understanding of the technical requirements behind secure sign-on systems. The user flow above illustrates the process after Multi-Factor Authentication (MFA) is enabled on Riot Mobile, which greatly informed my approach to designing the QR code login.
Design Process
I took ownership of both mobile and client-side designs, ensuring a cohesive user experience. Coordinating with the mobile and client development teams, I worked to unify the design language, interactions, and flow consistency so players would experience seamless functionality across both platforms.
​
Based on the research above, I created initial wireframes that established core screens and interactions. The early wireframes focused on making the login process intuitive, from scanning the QR code to finalizing login.
Sketches
Lofi wireframes
Tab menu on Riot Client, user has Riot Mobile already installed
Loading state for when generating the QR code takes longer than expected
Sign in flow when the user does NOT have Riot Mobile already installed
Sign in flow when the user is not signed into Riot Mobile
I created over one hundred potential wireframe flows, but I've included only a select few here for brevity. As the project evolved, refining these flows became essential to address technical limitations and edge case scenarios, leading to several rounds of iteration.
Challenges and Iterations
There were many moving parts to this project. I encountered multiple challenges along the way, some of which included:
-
​Technical Limitations
In the Discovery phase, we identified a key limitation: when a user scans a QR code to download Riot Mobile but does not yet have the app, the initial scan does not carry over post-installation. This means that after downloading, the user must return to the Client to rescan the QR code. This was an unavoidable friction point due to limitations in our current tech stack.
To minimize this on the design side, I ensured that, upon installation, Riot Mobile would automatically open the QR code scanner for users who had previously scanned the code. While we couldn’t track the process for brand-new users, if they had an existing Riot account but were logged out, the in-app scanner opened automatically, prompting them to rescan. Clear instructions above the scanner provided guidance on next steps.
QR code scanner in Riot Mobile
-
​Dependence on External Teams
Effective collaboration with various teams (engineering, security, product, Riot Client, and Riot Web) was essential but presented significant challenges. Since QR code login required technical integration across both Riot Mobile and the game client, any change in one part of the system could impact the overall user flow and necessitate adjustments in another.
This meant the project had a high level of dependency on multiple teams working seamlessly together and I took the lead in orchestrating and coordinating this collaboration on the design side. By regularly facilitating discussions with engineering, security, and product teams, I helped ensure that the user experience vision aligned with technical and security requirements. This involved proactively managing design-related dependencies, keeping teams informed of any updates, and adjusting our design approach as needed to adapt to other teams' progress and constraints.
Another challenge was aligning timelines and priorities. Different teams have their own roadmaps and objectives, so scheduling the necessary resources and ensuring everyone was available for each stage of development required detailed planning. Coordinating updates and aligning on deadlines often meant holding regular cross-functional meetings, managing dependencies closely, and frequently adjusting timelines to accommodate each team's constraints.
-
​Iteration Cycles for Emergent Use Cases
Given the complexity of user flows and technical integration, testing the experience across various scenarios and gathering feedback for iterative design was a time-consuming process. During testing, we identified technical cases that required quick design adjustments. One example was the Location Warning flow. We realized that users might approve a sign-in without verifying the location, so if the location on the Client side didn’t match Riot Mobile’s data, we needed to alert the user that the login might not be theirs. This warning helped protect users against potential bad actors attempting to access their account from another location.
A mix of final UI screens and a wireframe modal reflects the quick turnaround needed to design this alert
This was just one of many iterations that took place over the course of the year of design work. As the project progressed, we uncovered numerous additional use cases, both common and edge cases, that needed attention to ensure a seamless and secure user experience. Each discovery required swift design adaptations and close collaboration with cross-functional teams to address potential pain points effectively. These iterative adjustments were crucial for refining the QR code login flow into a polished, user-centered solution that could handle a wide range of real-world scenarios with confidence.
Results and Reflections
As of November 2024, the response to QR Code Login has been incredible. Our players took to our app store reviews and Reddit to express their excitement for this long awaited feature.
App store review
Reddit post
On launch day alone, Riot Mobile active users increased by 250K, a powerful indicator of the demand for a streamlined login experience. This surge validated our focus on user-centric design and emphasized the value of secure, convenient login options for our player base. Since then, we’ve observed steady growth in both downloads and user retention, suggesting that QR Code Login has positively impacted app engagement and loyalty.​
.png)
User activity from the week of QR code launch
Reflecting on this project, it's clear that each design iteration and cross-functional collaboration played a vital role in delivering a feature that resonated with users. The success we’ve seen in North America strengthens our resolve to make this feature widely accessible. Looking ahead, we’re excited to bring QR Code Login to our APAC and MENA regions, broadening access and continuing to enhance the login experience for players globally.
The League Client promoting the launch of Arcane 2 (Nov 2024). Downloading any of the game clients will allow the player to use QR code login.
Conclusion
The QR code login project exemplifies the seamless blend of security and user-centric design. By enabling players to quickly and securely log into Riot Games on PC through a mobile app, this feature enhances accessibility and addresses critical pain points for users seeking a faster, more streamlined login experience. Leveraging insights from behavioral data, competitor analysis, and prior multi-factor authentication research, we created a solution that prioritizes ease-of-use without compromising security.
This project highlights the importance of cross-functional collaboration, iterative design improvements, and aligning user experience with technical capabilities. The QR code login’s dynamic yet adaptable flow, whether directing players to the Newsfeed or back to their starting point, demonstrates our commitment to refining user journeys based on context and intent.
​
Ultimately, this project not only sets the foundation for future login experiences at Riot but also underscores our ongoing dedication to enhancing gameplay accessibility across platforms. With the upcoming release of Riot’s console game 2XKO, we aim to keep console-only players connected to the Riot ecosystem, ensuring they can easily integrate with Riot Mobile and remain connected to their gaming experience across devices.