Project Brief
In less than 6 months, create a seamless service connection between Riot Games and Xbox Game Pass that allows any Game Pass member to unlock a wide variety of Riot game content on a rental basis in each of Riot’s PC and mobile games worldwide, while maintaining our high standards of player trust and player experience.
Role
I served as Riot-wide Design Lead for this 6-month project. From the moment I was pulled into business development conversations, it was clear that this was a different kind of partnership than Riot had ever seen before – and I immediately jumped into action, drawing from my past experience on cross-company efforts like Alexa and the Echo Look to define new ways of collaborating across the company. How might I, as Riot’s design lead for Game Pass…
- Ensure that business development decisions were fully informed by a clear idea of a minimum lovable UX?
- Coordinate Xbox design efforts across Riot?
- Create and drive a clear shared experience vision across a 300-person working group?
- Convince game teams with no available cycles to align on new development work not required by the contract?
- Spin up and mentor the Player Platform design teams for Xbox, helping them cope with unprecedented scale and complexity?
Project Timeline
Click the title to jump to that phase in the case study.
Biz Dev
May 2022
I was pulled in to represent Riot Design during the senior leadership business development process and asked to define the minimum lovable product experience for players to help with scoping and costing efforts.
Pre-Production
June-July 2022
Adaptation of contract terms into team planning and initial design communications across 300+ person working group. Pursue alignment with game teams to gain commitment to ship the minimum lovable feature sets.
Design
Aug-Sep 2022
Shepherd and iterate the company-wide design vision, coordinating new ideas across all game teams. Mentor the Player Platform design teams responsible for specific scenarios on Riot Client, Riot Web, and Riot Mobile. Define new processes to aid with scope and get hands on when volume is too high.
Delivery
Sep-Nov 2022
Evaluate the success of our design ideas via usability testing, and work closely with engineering to ensure that our designs are implemented correctly. Coordinate with Art, Localization, Brand, Player Support, and Legal across Riot to finalize all aspects of the player experience for launch.
Shipping
Dec 2022
Participate in final bug bashes and triage critical last-minute Sev 1 legal and localization issues. Participate in all ship room activities and ensure the experience lands as intended with players.
Platform Design Team
- Lead UX Designer, Riot Web
- UX Designer II, Riot Web
- Lead UX Designer, Riot Client
- UX Designer, Riot Client
- Visual Design Artist, Riot Client
- Visual Design Artist, Riot Web
- Senior UX Designer, Central Creative
- UX Designer II, Content
- Insights Researcher
Game Team Designers
- Senior Manager, UX – League of Legends
- Senior UX Designer – Teamfight Tactics
- Senior UX Manager – VALORANT
- Senior Visual Design Artist – Legends of Runeterra
- Senior UX Designer – Wild Rift
Key Partners
- Microsoft’s Game Pass project team
- Riot Business Development reps
- Riot Web development team
- Riot Client development team
- Player Platform Commerce initiative
- Leadership on each game team
- Executive leadership (“LC2”)
- Publishing & Player Support
- SDK development team
- Legal
- Localization
Phase 1: Business Development
Our Player Platform VP asked me to jump into the business development discussions regarding the Microsoft contract on behalf of Riot design with 2 weeks left on the signing clock:
“…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.”
My approach to solving this problem in 72 hours:
1. Rapid Immersion
Go deeply – quickly – with the product teams affected by this work: Riot Client, Riot Web, Accounts, and game reps. Learn as much as possible.
2. Desired Player Journeys
Chart our DESIRED player experience in a form many people can consume – flows paired with scenarios. Focus on transitions.
3. Impact and Risk Modeling
Draw attention to the IMPACT on existing UX – the deltas and risks, both for Platform and Games teams.
To get to our minimum lovable product vision quickly, I focused on the most important questions and discussions with my product and engineering partners, and explored the possibilities in flows.
- Players. What player segments will we be addressing?
- Transitions. Where are players moving between states or app experiences?
- Profiles. What is the relationship between the player’s identity at our 2 companies?
- Company boundaries. Where are the gaps the biggest, and how might that impact players?
This end-to-end experience personifies many of the challenges I wrote about in my book Design Beyond Devices. We’re bridging the gap between multiple apps, authentication systems, and possibly even devices – and all of those transitions matter.
Design-informed business development outcomes
Due to the early involvement of UX and my proactive approach to partnership, player focus, and minimum lovable product exploration, we made several key inroads early enough to ensure they were included in product and contract commitments.
Conditional Sign-Up Flows
None of our authentication experiences supported conditional follow-through after account linking. Because I depicted Game Pass members and non-members as separate player groups, we agreed that it was critical to check membership status and show these groups different confirmation experiences as part of the minimum lovable product, even though it was new engineering work.
In-game membership status change notifications
When we looked at the lens of “gaps between companies”, Riot didn’t control membership status for Game Pass. That meant players lost membership – sometimes due to unexpected circumstances like credit card expiration – outside our games. We successfully argued that in-game notification of any membership status change was critical to minimize support cases.
Data transfer transparency
I called out a key contract point: Microsoft required us to send gameplay data to them for any player who had a linked Xbox profile and Game Pass membership. This would not be obvious to players. I fought to make sure Microsoft was OK with us clearly messaging this at the time of account linking AND that both Microsoft and Riot included de-linking an account in the contract.
Phase 2: Pre-Production
Problem
As teams onboarded, they asked the same questions. Questions that were technically already in the flows. Rather than point them endlessly elsewhere, I saw this as an opportunity: how might I present this information in a clearer way for a new audience?
Solution
I created the Xbox Game Pass Design Deck, a living document used for 5 months to communicate a single shared vision of desired player experience and project goals to our 300+ person working group.
My approach to building shared understanding via asynchronous communications:
Who is our audience?
Define the target consumers for our doc.
What disciplines? What levels of leadership? What regions? What business units? Internal, external, or both?
What are their goals?
Structure the document based on their needs.
Don’t fall into the trap of communicating the org chart or roadmap instead of meeting our partners where they are.
Who are your customers?
Ensure all partners share this understanding.
Design and research often benefit from a clearer understanding of customer needs; leading with this can head off many misunderstandings.
What questions are you getting?
Questions are our communications roadmap.
Treat any document as a living document. Questions tell us how our audience is thinking about the problem – use them to guide the structure and content.
Deconstructing the Game Pass Design Deck
Once the 60+ slide document evolved, the key sections included:
- Design Overview: Problem statements, deal terms, teams, and schedule
- Player Experiences: Team-agnostic look at scenarios and segments supported
- Frequently Asked Questions
- Microsoft Partnership + Brand: Terminology, brand usage, and explanations
- Game Team Impact: Feature breakout relevant to game teams
- Platform Impact: Feature breakout relevant to Player Platform products
Outcomes from the shared Xbox Game Pass Design Deck
The living Xbox Game Pass design document was utilized by over 240 people during its 6-month active use period. I was the primary owner and driver of the content in this document during the entire period, with some additional support from my Player Platform and game team designers. 4 observed outcomes from the use of this document at scale:
1. Rapid and consistent global communication at scale
Within 24 hours of release, the document was quoted back to me by a team in another time zone.
2. Go-to onboarding tool for all disciplines and departments
Our working group in Slack grew to over 300 people – this gave us a singular, player-focused shared vision to start from every time.
3. Vehicle for deploying updated understanding
As we improved our definition of our customers, scenarios, features, brand requirements, & more, we could roll them out in one place.
4. Quality Assurance reference and basis for test cases
Our QA teams found this scenario-based format invaluable and used it as the basis for writing all of their core test cases in production.
Phases 3 and 4: Design and Delivery
Problem
Design and delivery of UX and UI/visual design during the Xbox Game Pass project were simultaneous. Rather than a traditional sequential flow through the design process (UX > Visual Design > Content > Engineering > Loc > QA), The Game Pass project was so large and so fast that several steps were parallelized, creating significant additional design complexity.
- Wireframes were delivered to Engineering.
- Visual design and content were immediate design debt to address.
- Localization was in parallel with engineering.
- QA leads weren’t identified until we were near code completion.
Our design team was also unusually large and distributed, due to the broad reach and complexity of this platform-wide agreement across all games. Most projects worked with a UX / Visual Design pairing, with a max of 4 on high volume projects. This level of design coordination was unprecedented.
Solution
How could we deliver wireframes and flows direct to engineering… and avoid complete rework when visuals and content came back? We worked together to adopt a MUCH more rigorous design delivery process. QUICKLY.
Specific design process challenges to solve
1. Cross Deliverable Parity
We needed extremely clear ways to compare deliverables: the flows, wireframes, content designs, and visual designs all needed a golden thread linking them with ease for stressed developers.
2. Brand Compliance
In early designs, we observed a trend: placeholder text and images in wireframes did not conform to Xbox brand standards due to time – but were making it into implementation, which was a risk.
3. Content Reuse
Many key strings in our experiences were reused across screens and states. Without proper guidance, devs might implement them uniquely, increasing QA, localization, and update costs.
Design process adaptations from the Game Pass project
Figma Delivery Files: Last Known Codable
We pivoted to make sure our delivery file represented ONLY the LATEST known CODABLE state. Any developer should be able to work from the delivery file at any time.
No hypotheticals.
No explorations.
No past versions.
Wireframes and Handoff: More Design Rigor
We took a team that was comfortable working mostly in wireframes, and added several layers of rigor quickly to reduce the risk of churn later in the process.
- Work in progress files split from delivery Purple “color” for overlay wireframes
- All wireframes delivered in situ with flows
- New wireframing components
- Tracking of UX vs VD vs Content delivery layers
- We adopted a non-brand color (purple) as our wireframe color for clarity.
- Each state was clearly named, numbered, and placed in context in at least one end-to-end flow.
- Rather than full placeholder text, we included the content ID plus, if room, a brief description of what the content should include. This avoided placeholder text making it to launch as developers went to the Repository for the latest text.
Annotation and Tracking: The Golden Thread
To ensure our devs knew exactly what to implement where, we added significant levels of annotation and tracking, including:
- New naming conventions: all screens AND strings named and labeled in deliveries
- All strings tracked in a central Airtable repository for content design SSOT
- Central tracking of all files and deliveries and their process status
Content Repository: From Complexity to Consistency
I drew on my past experience shipping console games to prepare the team for the rigor of shipping to a platform operator’s brand standards. By creating a central content repository in Airtable and asking all designers to give each string an abstract string ID, it enabled us to move more quickly and effectively:
- Wireframes would typically reference string ID only.
- All writing and editing could occur in one place.
- Developers could see where a string should be reused.
- We could search all 100+ strings by tag or text.
This approach prevented a last-minute ship slip when Microsoft and Riot changed the terms of the data sharing contract less than 2 weeks before launch, requiring 3 key legal strings to update in 22 languages.
Influence across Game Teams
Roadmap alignment and indirect influence
I convinced 5 overbooked game teams to commit to important player-facing features like benefit awareness notifications by focusing my design communications on player impact with respect to their games.
The “minimum lovable” product definition was generally accepted by senior leaders, but not an immediate commitment from our 5 game teams. Each team already had a full schedule, and I was asking them to drop work to add new features like in-game notifications. I turned the “nos” into “yes” by focusing on player experience, and clearly describing to product stakeholders the degraded experience players would receive in game without the notifications.
Cross-game cohesion and design alignment
I channeled creative energy from two different game teams into committed new feature work across our games that exceeded even our minimum lovable product standard while remaining cohesive and brand-aligned.
About halfway through the project, two entirely different design teams (League of Legends and VALORANT) approached me with the same NEW feature idea: a tray indicator that would show players the aggregate of all currently unlocked benefits. I called our “council” together for one of the most impactful 30 minute meetings of my career, suggesting we align across games:
- Common terminology and iconography (I spearheaded this)
- Neutral terminology to future and console proof the feature
- A common design for games that have more than 1 reward program
- Rules for when a game needs to implement this feature (LoR and WR did not)
Outcomes of the Riot + Xbox Game Pass design engagement
We successfully launched new global sign-in and entitlement services across all of Riot’s games that communicated with the Game Pass service in real time to provide benefits to players. The project exceeded expectations but financial and engagement numbers are under NDA.
No large-scale player-facing service incidents on the Game Pass services were encountered during my employment at Riot.
Players loved the premium feel of the experience and how the extra access to content made learning the game feel more satisfying.
The design and collaboration improvements we pioneered became a model for multiple future projects across Riot.
“My friends and I really enjoy the integration with Valorant. It makes the learning curve for new players less steep and much easier for everyone to adapt to new characters, an overall positive impact on the gaming experience.”
“I have to say that the whole Xbox Game Pass partnership feels good and premium. I love it when I see that golden ticket at the top of my screen 😅”
