The UX Behind #TheUnlock at Riot Games: Part 1

How design helped shape the Riot Games + Xbox Game Pass player experience during business development

On June 13, 2022, Microsoft and Riot Games announced a groundbreaking new partnership — Riot would be bringing our free-to-play games to Xbox Game Pass members. Not as a perk, but as a membership benefit providing extensive content access across all of our titles. Just six months later — on December 12, 2022 — we officially launched #TheUnlock, allowing Xbox Game Pass members to link their Xbox profiles to Riot Accounts and, if their Game Pass memberships were up to date, receive access to hundreds of champions, Little Legends, arenas, and more across all of our games.

This was an incredibly ambitious and first-of-its kind project for both companies. We’d each done different parts of this experience, but not everything. There was plenty of uncharted territory. And the timeline was extremely optimistic for the sheer scope of the collaboration: multi-platform, multi-game, cross-company, and only 6 months to execute. When our team on Player Platform began engaging in earnest, it was already mid-May — not a lot of time to answer questions like “Is this feasible? Is this desirable? What’s the minimum lovable experience and how do we get there consistently?”

While there were many points in the project where we doubted either our timeline or the feasibility of key components, we managed to exceed expectations for the quality of our launch — and on time. This is a testament to the hard work of hundreds and hundreds of game developers across both companies. But the smooth and timely launch of #TheUnlock was also a testament to the very intentional cross-product design thinking we applied across the project to coordinate our vision across all disciplines to ensure we were all working towards the same goals.

In this new series, we’re going to pull back the curtain on some of the key components of this exciting journey from the perspective of the user experience design discipline. What did we bring to the table, how did we help, what did we learn, and what was the impact? In this first article, let’s look at how UX contributed to the business development conversations that preceded our initial contract execution.

[Image Credit: Riot Games] The Riot Games partnership with Xbox Game Pass is an ambitious technological undertaking that required incredible coordination between 2 companies and the 5 games represented in this image (League of Legends, Wild Rift, Teamfight Tactics, Legends of Runeterra, and VALORANT), along with platforms, disciplines, and individuals. A consistent commitment to centering player needs and improving communication led to our successful launch — but it took a lot of conscious effort.

Business Development: Into the Jungle

Prior to the Riot Games + Xbox Game Pass partnership, this kind of subscription-based content access on a F2P game had not been attempted at scale. In some countries, Riot offers “League Unlocked”, a loyalty program for customers of PC Bangs that provides extended content access. But the scale of those programs was much smaller — and focused on a single game and platform.

Traditionally, UX was not necessarily part of business development conversations — and early on, in April, conversations were very limited to a few select product managers and publishing / business development representatives. As things became more certain in May, discipline leads were brought in for a feasibility analysis of the proposed contract. Initially, this largely meant engineering and QA, but our VP of Player Platform quickly brought me in as well on behalf of UX. As Director of UX for Player Platform, my role is largely strategic team management and leadership, but on occasion I’ll engage on specific projects at an individual level.

A leadership call to action

On #TheUnlock at Riot — long before that hashtag ever saw the light of day — I started with Miro boards to show how we’d need to change our existing implementations to hit a new minimum lovable bar for player experience across the platform. This all started with a leadership ask:

“..to get to a “dev cost” for this what really needs to come together is a cross-Riot product plan and design for how Riot games will work with Xbox Game Pass and what we want the player experience to be. What we actually need is to assign some product and design folks to come up with the proposed product design, including such that games can see the impact on their game UX.”

Based on this ask, the calls to action were:

• Partner with the product team
• Chart our path to DESIRED player experience in a way that many people can consume
• Draw attention to the IMPACT on existing UX — the deltas and risks, both for Player Platform and Games teams.

But we only had 48–72 hours to complete the first draft.

Finding our end-to-end experience… quickly

Thankfully, working across channels and products is in my wheelhouse, and is a particular passion of mine. (If you’d like to develop some of these skills yourself, free chapters from my book Design Beyond Devices are available on multimodal design and transitions.)

I immediately dug through all available documentation of our existing player-facing systems that might be affected by this work:

• Social Sign In
• Mobile Sign-On (Riot Mobile and specific games)
• Riot Client (as the front door for our PC games)
• Our web authentication flows and related systems like age verification
• Account Management

The bad news was that many of these systems weren’t fully documented in their current state, so it took some ad hoc conversations and digging to get to enough understanding to build out the first draft. Eventually, I had enough information that I drafted a Miro board with the following:

• Core cross-platform player flows for 5 key scenarios
• Screen inventory
• Open questions

Asking the right questions

As many who have tread this path will understand, the design work is largely prior to the actual creation of those flows. The art is in asking important questions to determine what should be in the flows — and where the biggest risk areas are for future discussion. Here are the most critical questions that drove our initial design explorations into what became the minimal lovable design proposal for the Xbox Game Pass / Riot Games partnership:

Players: What player segments will we be addressing?

It sounds simple, but it was important to shift our thinking past “all players” towards more sophisticated divisions. The experience a Game Pass member with no Riot Account would have would be far different from the experience of an existing Riot player who links an Xbox profile — and those experiences differ based on Game Pass membership status.

Transitions: Where are players moving between states or app experiences?

It was important to look out for where the transitions between surfaces or apps occurred. Authentication scenarios — especially social authentication methods — are notoriously complex, and don’t always embed nicely in a native app. By asking the right questions, we could start to tease out important issues: like the need to kick players from Riot Client to a web browser to complete the one-time account linking experience, due to security needs. The earlier you uncover these problems, the more time you have to estimate the cost of complex work as well as ideate on smoothing the rough edges your players will encounter.

Furthermore, this project brought a VERY SPECIFIC set of challenging transitions — the transition from the Game Pass app and/or Riot Client into our games, AND the transition of player state between Game Pass member and nonmember which often happens outside our ecosystem. Looking for and understanding these transitions from a player’s perspective was key to core design decisions that affected our entire ecosystem of products.

Profiles: What is the relationship between the player’s identity at our two companies?

When it’s hard for developers and designers to communicate the relationship between the profiles of two companies, it’s going to be hard for players, too. Xbox profiles are a subset of Microsoft Accounts, which leads to specific and unique edge cases. This means we can’t just throw players into linking without additional context to set them up for success. It also became clear that context would be required to avoid huge bounce rates at the point of linking.

This also became important when reviewing details of the contract regarding the transfer of player data. We made intentional choices about player communication from the very beginning to ensure we were as transparent as possible about when, why, and what data from a player’s profile would be transferred between companies.

Company boundaries: Where are the gaps the biggest, and how might that impact players?

Collaboration between two companies is always going to be a huge challenge. Different terminology, different roles, different assumptions. We had to dig to figure out how their authentication systems and Game Pass installation experiences worked so we could take that part of the experience into account when costing development of the end-to-end experience — and assessing what, exactly, would be needed for the minimum lovable player experience. It’s not enough to just treat your partner like a magic black box — we had to lead with deep curiosity.

[Image credit: Cheryl Platz/Riot Games] This was one of our most critical and complex scenarios: the intake from Microsoft’s Xbox Game Pass PC app into our Riot Client desktop app. The player experience varies based on what they did in the Game Pass app, their Game Pass membership status, and whether or not they already had Riot Client installed and/or an existing Riot Account. Note as well that the player has to transition between Riot and Microsoft surfaces several times during this end-to-end experience.

Creating shared understanding

Of course, it’s not enough to just ask good questions. Questions are a tool that help draw out the ideas and concepts locked within your product, your mind, your customers’ lives, and your colleagues’ minds in order to collect them into one big pool of shared understanding. But that pool’s value depends upon the artifacts you use to collect and synthesize that understanding.

We use Miro as a cross-disciplinary collaboration and visualization tool across Riot, so I chose Miro as my home for this work (as opposed to Figma, which is a specialty tool mostly used by designers.)

Questions are a tool that help draw out the ideas and concepts locked within your product, your mind, your customers’ lives, and your colleagues’ minds in order to collect them into one big pool of shared understanding. But that pool’s value depends upon the artifacts you use to collect and synthesize that understanding.

Keeping in mind that my initial audience was product and engineering leaders looking to assess potential cost, this was NOT the time to focus on happy paths. Sure, we wanted to show minimum lovable scenarios for our players — but in the context of the difficult parts that we’d need to solve to get us there.

This is a place where I see folks new to strategy trip up, especially designers. “Well, shouldn’t we just focus on the happy path?” No. If you’re looking to greenlight a project with dollars and staffing attached, it’s a mistake just to focus on a happy path without directly addressing your biggest experience and feasibility risks. Your stakeholders need to know that you understand the risks and are directing the right resources to address them. That’s how my storyboards helped the Echo Look project get to pre-production — not by waving a magic wand around the difficult parts, but by shining a light on them AND the resulting value for customers.

As a secondary benefit, leading with your most challenging areas also acts as an invitation to the experts who have knowledge you don’t. It shows where you’ll need help, and sometimes you’ll find yourself pleasantly surprised at how fast a solution pops up for something you thought was impossible. And, at times, you’ll find something truly is extremely difficult and you can deal with that head-on. The Miro board I pulled together called out several key dimensions of key scenarios in order to dig out complexity, like player device, referring app, and their player profile state.

If you’re looking to greenlight a project with dollars and staffing attached, it’s a mistake just to focus on a happy path without directly addressing your biggest experience and feasibility risks. Your stakeholders need to know that you understand the risks and are directing the right resources to address them.

Creating clarity for other disciplines

Since this was a cost assessment scenario, it was also important to help our development partners understand how much of this was new, reused, existing, etc — so extra craft attention was warranted. As a result, I also added a “screen inventory” which enumerated the new states we’d need on our end — and the various Microsoft surfaces we’d need to interact with, which would all come with implementation cost. By labeling these states wherever they were used, it gives partners a much clearer state of exactly how much new functionality we needed. Sometimes, it’s hard for us as designers to see that a developer or product partner can’t easily tell that two different states in our designs are actually the same thing — the more we can draw those parallels, the easier it will be for our partners to build a streamlined, consistent experience.

Our development partners helped in turn by answering our feasibility questions and providing additional context and ideas.

[Image Credit: Cheryl Platz/Riot Games] This rough “Game Pass UX Surface Inventory” calls out states in several categories, and each category is owned by a different group. Player Platform is the primary UX team I lead, but in my role as Design Lead across Riot for this project I also looked holistically at potential game team impacts. In parallel, there were a number of states or screens owned by Microsoft, and it was important for us to know where a player was coming from at any given moment.

Just enough vision

When you’re working mostly in flows early in a design engagement, inevitably you’ll run into folks who are visual thinkers who really, really want you to communicate via wireframes or greyboxes. As many experienced designers will tell you, jumping to wires or high fidelity designs too soon can be a double edged sword — as those assets are actionable, and can shut off discussion about the important core concepts in favor of just arranging the deck chairs.

That said, after the first pass at these flows it became clear that a very rough pass at a few of the key states would help differentiate them and the potential scale. While I comped the screens in Figma, I decided not to bring the conversation there. To avoid the tendency to take these as implementation guidance, they were only delivered in Miro as opposed to as individual screens, they were watermarked heavily, and they were shown in context.

[Image Credit: Cheryl Platz/Riot Games] This frame included a depiction of some of the different states we were proposing to help folks differentiate during scoping. Ironically, some of the draft copy and layout seen here did actually make it to launch, but that was the result of conscious choices along the way and not accidental lack of action. This was also prior to receipt of brand standards, so: very drafty.

As many experienced designers will tell you, jumping to wires or high fidelity designs too soon can be a double edged sword — as those assets are actionable, and can shut off discussion about the important core concepts in favor of just arranging the deck chairs.

How these insights shaped our work

This process sounds lengthy, but it happened quickly: from May 16 through May 24 for the first round of design exploration and contract feedback, with another round of deeper refinement afterwards through May 31 at the request of executive leadership. Definitely one of those cases where you see just how important knowledge management and retention are to unlocking your ability to move quickly when opportunity arrives.

Many leaders reported back that the flows were extremely helpful during this critical time in building out engineering cost estimates and starting discussions between teams, in addition to providing valuable context in discussions with senior leadership. That in itself would have been worth the effort, but there were other outcomes as well. As a part of this process, several key non-trivial elements of the player experience were agreed upon across teams as “minimum lovable” above and beyond the base requirements for this engagement.

Conditional social sign-up flows

All of our previous social sign-ins, like Facebook and Google, were single-path. You sign up, and everyone sees the same confirmations. For the first time, we proposed splitting the confirmation flow for social sign ups based on a membership status check, which was a significant change to how our Accounts system worked. Leading with this up front enabled us to get everyone onboard about the development cost before launching the project.

In-game membership status change notifications

While indicating content that’s unlocked in a game’s catalog was a no-brainer, this process exposed a bit of a timing issue. Game Pass membership status changes happened OUTSIDE the Riot ecosystem, often after we’d already linked accounts and shown a confirmation screen. How would we confirm to them that the state change was noticed, and how do we call attention to their new benefits? We proposed to game teams a consistent policy: track the last known time an Xbox profile logged in paired with their Game Pass membership status, and if there has been a change since then, throw a notification alerting players of the status change SPECIFIC to that game.

• Benefit Gain: This also solved a secondary problem: with so many games and benefits, it wasn’t really practical to list them all on a single confirmation screen. This way, we could ensure each player saw at least once the specific list of benefits they’d gained, and were alerted proactively when a loss of benefits occurred.
• Benefit Loss: Benefit loss could occur for a number of reasons: credit card declined, end of gift card term, end of promotional periods, etc. We can’t control those circumstances, but if players log in and just can’t access their content but haven’t been to a Microsoft surface lately, they might think it’s a Riot service outage. We owe players clear and timely communication about the timing and impact of any benefit loss.

[Image Credit: Cheryl Platz/Riot Games] This frame depicts a representation of our proposed “minimum lovable Game Pass experience” for the game teams, which we would later need to pitch for committed work from each individual team. Even though I was coming from the Platform team, we needed to look holistically at a player’s journey all the way from Microsoft to gameplay. Our flows called out specifically what the common interaction patterns should be to give players the best, most timely information.

Many leaders reported back that the flows were extremely helpful during this critical time in building out engineering cost estimates and starting discussions between teams, in addition to providing valuable context in discussions with senior leadership.

Data transfer transparency

In order for the Game Pass benefits to work, Riot must send data about the player with the linked Xbox profile to Microsoft to check membership status, in addition to the requisite tracking of gameplay hours for contractual obligations. We wanted to ensure we were as transparent as possible about this transfer, as it applies at any time a Game Pass membership is active — and memberships are activated and deactivated outside our ecosystem. This process allowed us to call out that issue and gain alignment about that up-front messaging about what data would be shared and when before and after the moment of account linking. This also helped us advocate for account unlinking as a Day 1 feature, as some players might decide they no longer want that data transfer to occur.

Applying these techniques

So what can you take from these experiences to apply to your own work?

1. UX can meaningfully contribute to business development discussions — bring us in early to drive end-to-end perspective.

We are specialists at looking for unforeseen impacts to customers, and can help a team really shine light on risks and opportunities from a holistic perspective. Our ability to create artifacts or even run workshops that drive shared understanding can also help jumpstart communications across disciplines and business units.

2. Don’t forget to go cliff diving so your customers won’t have to — find and explore your toughest transitions.

Big, challenging experiences often succeed or fail in the margins — transitions between apps, devices, companies, users, or even network connectivity states. Don’t let your customers fall off a cliff — make sure you’re seeking out and building bridges between the big gaps to make sure your end-to-end experience is as smooth as possible.

3. Don’t stop at happy endings — look for ways to bring clarity to complexity.

The most successful projects confront their demons early on. Back in the early aughts, there were some storyboarding fads around using “magic happens” to skip past the hard parts. The “happy path” mindset has its place in ideation — but when you’re talking about making business agreements, funding, or scoping work, it’s no longer an appropriate mindset. You need to point out the problems so that you can get the right experts working on them — or to pull the plug before you go down a dangerous rabbit hole.

At the same time, keep in mind that your engineering partners are looking just as much for what these experiences have in common as how they differ — knowing what we’re not changing, or what we can reuse, is just as important as knowing what should be new.

Big, challenging experiences often succeed or fail in the margins — transitions between apps, devices, companies, users, or even network connectivity states. Don’t let your customers fall off a cliff — make sure you’re seeking out and building bridges between the big gaps to make sure your end-to-end experience is as smooth as possible.

Next time: How we built out against a shared vision

Once we locked the contract and announced the partnership, the collective moved on to pre-production. We had about 7 weeks to build bridges between companies and teams to get things geared up before development work started in earnest in late July. During that time, our Slack team quickly ballooned to hundreds of collaborators, and we struggled to speak the same metaphorical language across 5 game teams, platform, publishing, legal, and beyond — to say nothing of the continents and time zones separating us. In the next post in this series, we’ll look at how our shared design communication helped launch us into Production and what elements of that communication helped us move past chaos to clarity.

And in a closing thought — this kind of collaboration takes partners, and we had great product, engineering, and QA partners. Thank you to the Player Experience Leadership team, Player Platform leadership, and the Player Platform design team amongst many many others who helped make space for design at the table and collaborated with us as we all drove this vision towards its next steps.

Further reading in the meantime:

• Riotgames.com: Ready for Play on Xbox Game Pass!
• Xbox.com: Get More from Riot Games with Game Pass
• Or for more about our craft: UX Design Roles at Riot Games

Cheryl Platz is the Director of User Experience for the Player Platform and head of the User Experience craft at Riot Games.