Project Overview
Multi-Factor Authentication (MFA) has been a long-anticipated feature at Riot. Due to shifting priorities and technical constraints, the work had been delayed for over five years (even before I joined the company). When I was brought on, I was asked to take ownership of the project and start fresh. Much of the previous designs and research were outdated or incompatible with Riot's modern tech stack, requiring a complete redesign of the experience from the ground up.
​
As the lead UX designer, I saw this initiative from end-to-end. MFA would touch every major Riot platform from Riot Mobile to web and desktop clients - requiring deep coordination across teams. I aligned multiple stakeholders, drove cross-platform design decisions, and crafted a secure and seamless user experience that scaled globally.
​
Note: Due to NDA restrictions, certain technical details and specifics of the development process are omitted from this case study.
🎯 Goals
-
Enhance account security for players
-
Minimize login friction to ensure players can quickly access their games
-
Balance security and usability, especially for non-technical users
-
Increase retention for Riot Mobile by positioning it as a valuable authentication tool
🚧 Challenges
-
Previous designs and research were obsolete
-
Riot’s ecosystem includes multiple platforms with different UX constraints
-
Stakeholders across engineering, product, security, and platform had different needs and timelines
-
Ensuring the flow was intuitive for a global audience without compromising protection
Research and Analysis
Much of the foundational discovery for MFA was built on prior research I conducted during the QR Code Login project. This included platform audits, behavioral analysis, and system mapping. Given the shared context around account access and authentication, this earlier work provided a strong baseline for understanding player behavior, cross-platform flows, and technical constraints.
Competitive analysis
Building on previous work from the QR code login project, I took a deeper look into how Riot uses Riot Mobile and explored ways to make our native experience equally robust and seamless
Duo Mobile is currently used for accessing internal workspaces, not for any player facing game experiences. Riot Mobile’s native MFA experience would serve the broader Riot game ecosystem.
User map
The following user journey map was originally created for the MFA project but also provided valuable insights that informed my work on QR code login.
User journey map illustrating the existing 2FA flow prior to redesign.
User flow
As part of the design process, I created user flows that connect the player’s frontend experience with Riot’s backend authentication and security systems. One representative flow (above) covers MFA setup and login post-setup. The rest have been omitted due to sensitive technical details but are available upon special request.
Information Architecture
A key consideration in implementing the QR code camera and other MFA related features was determining their appropriate placement within the app. To explore the most intuitive hierarchy, I mapped out several potential sitemaps to visualize how these elements would fit into the existing structure.
Sitemap
I used the existing Riot Mobile IA as a reference point to compare against potential alternative structures.
Explorations
This was eventually scoped as future work and was not explored further in the subsequent MFA wireframes.
Ideation and Design
Designing for both mobile and web platforms required extensive cross-functional collaboration and a highly iterative process. I explored hundreds of wireframes across multiple iterations, constantly refining flows to ensure consistency and clarity between platforms. I worked closely with the Riot Web team to understand technical constraints and translated those considerations into cohesive, platform specific experiences. Throughout the process I ensured the logic aligned not only within each platform but also across the broader security ecosystem, creating a seamless and secure user experience from end to end.
Initial Wireframes (Mobile)
Early wireframes exploring different approaches to setup, sign in, and push notification flows. These explorations laid the groundwork for defining key user paths and system behaviors across mobile.
These wireframes focused on solidifying the end-to-end enrollment and sign in experience between web and mobile. The goal was to create a cohesive flow that accounted for both platform specific constraints and shared logic.
Potential edge cases and error states.
Initial Wireframes (Web)
These wireframes established foundational patterns later aligned with mobile for a consistent cross-platform experience.
Implementation
1. Pre-Launch Coordination
In the week leading up to launch, I partnered closely with engineering, product, and security to finalize the user experience across Mobile, Web, and Client. I reviewed edge cases, clarified design logic, and ensured the end-to-end flow held up across different user states and device conditions. We ran last-minute QA passes, refined messaging, and validated that the MFA flow aligned with broader authentication logic across the Riot ecosystem.
2. Launch Prep
The day before launch was focused on alignment. I joined final check-ins with stakeholders from accounts, product, engineering, and security to confirm implementation details and support documentation handoff. I also double-checked that fallback states, error handling, and platform-specific behavior worked as intended, especially in mobile flows where OS-level permissions added extra complexity.
​
This also happened to be the same week I was preparing to go on PTO to Japan 😅 I made sure to get ahead of anything that could block the team, documenting all design logic and ensuring smooth handoff just in case something unexpected came up during launch.
3. Launch Day & War Room Support
By the time launch day arrived, I was already on PTO in Japan! Thanks to thorough preparation, the team was fully equipped to move forward without a hitch. A live "war room" was set up with engineering, security, accounts, product, and my backup design colleague all collaborating in real time. I had documented key design decisions, edge case handling, and fallback behaviors ahead of time to ensure clarity and alignment across teams.
​
After launch, I caught up with the team and was told everything went smoothly, with only a few minor adjustments needed. It was rewarding to hear that the work held up even in my absence and that the cross-platform UX performed as intended in the real world!
Outcome and Future Considerations
The MFA launch was successful, with minimal issues reported and strong alignment across teams. The flows held up well in real-world use, delivering a secure and seamless experience across Web, Mobile, and Client!
​
Due to time and technical constraints, we weren’t able to implement every planned flow in the initial launch. Some experience enhancements such as more intuitive entry points and additional flexibility in how players manage their authentication preferences were scoped out of the initial launch due to heavy implementation requirements that would have pushed us past the planned timeline. These weren’t essential for functionality but would have further streamlined the experience. However, we’re addressing these in upcoming fast-follow work to ensure full coverage and greater flexibility for players.
​
For future fast-follow work, I’d advocate for earlier involvement from backend and security teams during the design phase to reduce late-stage complexity. I’d also push for earlier validation of technically complex "nice-to-haves," so we can make more informed tradeoffs between experience quality and engineering effort.
Conclusion
This project was a deep dive into designing secure, cross-platform experiences at scale. Balancing user experience with security requirements pushed me to think systemically, advocate for clarity across platforms, and stay tightly aligned with engineering, product, and security partners from start to finish.
​
It also reinforced that good design isn't just about solving for the happy path. It's about designing resilient systems that can scale, flex, and support players even when things go off-script.
​
Ultimately, this project grew my confidence in owning complex, high-impact features from ideation through launch and reminded me of the power thoughtful UX has in building trust, even in the background moments players may never consciously notice.