Riot Account Management 2.0

Account Management Page

Legacy systems can become overly expensive to maintain and complicate creating new, best in class user features. To bring align the needs of Riot's players and business goals,

I used deep research and insights for a scalable path forward for a format simultaneously improving the user experience and operation costs.

Company + Project Intro

Riot Black Logo

Company TLDR

Riot Games

Player focused game company starting with League Of Legends, growing to millions of passionate global players.

Gaming Stations
Riot Black Logo

Company TLDR

Riot Games

Player focused game company starting with League Of Legends, growing to millions of passionate global players.

Gaming Stations
Riot Black Logo

Company TLDR

Riot Games

Player focused game company starting with League Of Legends, growing to millions of passionate global players.

Gaming Stations

Project Overview

Challenges with the current system?

Account Management features were built vertically, a single page with every service being called whenever a user visited that page. This was due to lots of legacy code and became increasingly cumbersome.

The vertical structure was inefficient, expensive, and a headache for our engineers. Features lacked any organization reflecting user goals. The experience on mobile devices were odd and had usability issues. Without addressing the core problem (overall architecture) we'd repeat the same frustrating cycle.

Redesigning the entire structure NOW, was a path to creating a net positive for both user goals and the business bottom line. It would reduce costs and unlock new feature capabilities.

Context & Goals

Problem Definition + Scoped Solutions

This was a complicated project around live features, requiring cross team-alignment to minimize scope bloat.

By focusing solely on structural changes that lay the groundwork for broader updates, I was able to make the unmanageable, more manageable for our engineering partners.

Challenge

  • Redesign the structure so it’s more cost efficient and scalable

  • Align the structure around best practices and user needs

  • A responsive experience more naturally aligned across devices

  • Improve the mobile usability

  • Define scope to allowing for iterative implementation over time, to maximize results while minimizing user friction and engineering complications.

Process + Solutions

Assessing The Work

I defined the MVP as solely a structural reorganization of existing features, which would be a huge enough lift for our engineers as is. Stage 2 would tackle updating our UI, setting up stage 3 where we could much more easily build new features moving forward. Operating costs would be reduced, and future scalability would be unlocked.

The updates seem subtle, but that was the point, given this a live service with a lot of dependent logic that had become increasingly entangled over time as the company and it's offerings grew. Sometimes the most valuable work is less seen on the outside, because it's so subtle and would reduce user confusion upon implementation.

How did we scope focus and make decisions...

Improvement Breakdown

Market Research

To get a broad but targeted understanding that covered enough expectations, I did a full breakdown of specific competition to properly craft solutions for OUR users.

Each product not only has different requirements, but systems built differently for different goals. But they all were relevant to our users, so it made sense to do a deep analysis, and then synthesize those takeaways into what made sense for our needs.

How market research impacted our design decisions...

The Competition

Battlenet Logo
Discord Logo
Google
PS Brand Logo
Xbox Logo
Battlenet Logo
Discord Logo
Google
PS Brand Logo
Xbox Logo

User Research

Taking the relevant filtered context from the market research, alongside system knowledge as to potential options, helped focus the approach to users.

Using mixed methodology of open/closed groupings when talking to users, allowed us to get a wider view of user expectations and needs. This could be helpful with new feature groupings, because they had a point of view first hand how they could be more effectively compiled.

What resulted from the process validated the existing thoughts for current features, and get early intel how to tackle some of our future roadmap concepts.

What users wanted in their feature organization...

Delivered Work

Improving Mobile Usability

Streamline the desktop + mobile experience, and reduce confusing interactions

We removed confusing UI, added better indicators that made it easier for users to understand where they were and what section they were navigating to, with a subtle enough update that would be noticed without confusing the users.

How did we improve mobile usability for users...

Delivered Work

Final Outcomes

What was the final result?

I had unique insights into the value of tackling this project, due to my experience on the developer platform. That knowledge highlights that the longer companies put off making their systems efficient and scalable, the more challenging and expensive that work becomes.

Due to the considerable effort and alignment required to deconstruct, then rebuild the entire system, there were incredible challenges to fully complete this project, and design completed several quarters ahead of implementation.

Once released this will be a mutually beneficial outcome to both player experiences and the company bottom line. Not only with usability and reduced API costs, but handling those will unlock the companies abilities to more efficiently build experiences that increase player value.