UX Design in the Games Industry
One of the conversations I find myself having with every user experience designer I meet in the game industry is how they ended up working in games. The stories are always unique, but usually involve a winding path through non-gaming companies and a longstanding passion for playing (or competing in) video games.
One commonality in our stories was the surprise that you could do User Experience design in the games industry! This surprise was recently echoed in a conversation I had with some students from UC Berkeley and some other universities around career paths in UX. Many had no idea that you could work in games as a UX designer, and even once they knew, they had no idea what those roles looked like.
So I decided to partner with fellow UX designers Matt Agnello and Alex Vejnoska (two other UX designers here at Riot) to create a small guide to UX in gaming, complete with examples and case studies. The goal being to inform those entering into the UX field, and maybe some of those already here, about what opportunities exist in the gaming UX space, and what that could look like.
I want to caveat this with, we work for Riot Games, and this article is going to be heavily based around what UX looks like at Riot. However most gaming companies have UX roles, and — while the titles, work, and responsibilities may vary — the core UX process will be the same.
So, what roles exist? We’re going to break down the various UX roles into three broad categories:
- UX on a Game Team
- UX Supporting Game Teams
- UX in Esports
The first, and most obvious role for a UX designer in games, is working directly on a game team. Within a particular game team you can generally break roles down into two groups (although you may very well be responsible for designing things in both!): In-game UX and around-game UX.
Games are played daily, for many hours, the experiences are very emotionally engaging for users. If something is frustrating to use, it’s 10 times more frustrating in a moment you’re greatly emotionally invested in.
— Alex Wheeler
In-Game — Alex Wheeler
League of Legends features a large number of things a player interacts with at any given moment. Champions with unique abilities that all need to be usable and clear, an in-game shop, in-game UI, champion UI, navigation, in world VFX, and much more. If you find yourself working on in-game UX you could be touching any number of these things. At Riot you’d generally be working in collaboration with an amazing team of game designers, artists, visual designers, engineers, writers, and more to achieve the desired design outcomes.
As an example, while working on Kayn, a champion in League, I worked with an incredibly talented champion designer, VFX artist, character artist, and engineer just to get the experience around one of his abilities feeling right. Kayn has a transformation moment in the game, where you evolve to permanently alter the rest of his game-play. In this moment a new UI state appears and needs to both be immediately visible and not interrupt game-play. Getting this balance right took a lot of sketching, ideation, and prototyping — which isn’t very different than solving most other UX problems. It’s all thinking about the champion designer’s desired outcome, sketching out potential solutions to solve the problem, and then ideating and prototyping to refine that solution. All of the processes and tools were the same I’d used to solve completely non-game related UX problems.
Around-Game — Matt Agnello
Games don’t just begin and end at the start screen anymore. A significant chunk of the game experience happens outside of the moment-to-moment gameplay, and players’ expectations have risen every year. At Riot we call this the “around-game experience,” although we very much believe that the around-game, and in-game experiences are really a single cohesive experience.
Similarly to in-game, UX designers working on around-game experiences collaborate heavily with game designers, artists, engineers, and many more talented developers. There are interesting problems like partying up, progression, battle passes, identity customization, friends lists, and even things like monetization. Around-game UX designers could find themselves working on all of these areas and more.
But let’s look at one: progress bars. You’d be amazed how many ways there are to skin a progress bar, and it’s never quite as straightforward as you’d think.
I worked on the League’s mission system which, on the surface, is pretty simple: do a thing, get a thing. Lots of games have missions, quests, or challenges, but we needed to figure out how it’d work in League. What would a mission system in League even accomplish?
We had a ton of question we needed to answer, like:
- Where would players find missions to start them? Would they accept them from somewhere? Would they just show up?
- How would they know how to progress? How would we handle situations where there are multiple ways to progress, or players need to do multiple things to complete it?
- Where would players view their progress? Where would they see updates?
- How would players know what rewards they’d get? How many rewards would they get?
- When would players find out they’d completed a mission? What should it feel like? Is every mission equally important?
I needed to work closely with our game designers to understand their requirements for the missions we were likely to make, now and into the future. I also had to identify where players would need and expect to interact with this system, and figure out how it’d be woven throughout the game experience so it felt truly integrated into League.
We mocked up a bunch of different options for where missions might live, including a dedicated page for missions and a mini mission log on the front page. We also mocked up different ways to visualize the missions themselves that prioritized different things like progress, rewards, name, etc. For the mission list, we landed on a task list-like design, where players would have a dedicated panel for their missions that they could bring up on any page.
But not all missions are created equal, and we wanted to reflect that in the completion ceremony at the end of a game. We created two levels of mission completion feedback: One is super flashy, where the mission literally explodes to show the reward, and another more subdued, only showing up on a portion of the screen.
For the super flashy one, we had a ton of iterations on what the transition should feel like, how to handle multiple missions, and how to handle multiple rewards. We also realized this could be used for other types of progression feedback, so we created some initial mock-ups using this pattern to communicate other important player milestones, such as leveling and ranking up.
We rejected this version of the flashy mission completion because we thought it’d require way too much interaction… But that doesn’t mean it was any less fun to make!
We used the kinds of tools you might expect for any design task: Journey maps to understand the full player flow, wire-frames to architect each detail of the experience, and, in this case, I used a lot of Apple Keynote to visualize some of the animations, including the animation mock-ups above. (You can do a lot of damage with just Magic Move.)
The problems may be different, but the skill set and tools I use to tackle standard UX problems are applicable to everything around the game on and beyond the start screen. — Matt Agnello
Game Supporting Teams — Alex Wheeler
Almost all companies (particularly ones with multiple games) have teams dedicated to designing and building systems to support those games. From accounts, to downloads, to sign ups, to installations… even things like your friends list can all be designed and built by a central team that supports all the games. By doing it this way, each and every game team within a company doesn’t have to rebuild these foundational systems and can focus on the unique things (such as the moment-to-moment game-play) that make the game worthwhile.
For example, as a user you wouldn’t want to have to create a new account for every single game you play, especially if that game is from a company that you’ve already got an account with. So instead of each individual game team having their own accounts team, there’s just one central team that designs, creates, and manages one universal account for all the various products (current and future).
This idea of making one system that any team can benefit from is the entire idea behind game supporting teams and a UX designer working on a game supporting team could find themselves designing any of those game agnostic systems.
Similarly to UXers working on game teams, you’ll find yourself collaborating closely with engineers, visual designers, game designers, and more. Working between games is typically highly collaborative, especially in UX. You’ll need to work not only with your team, but also all the teams using your system, to ensure a cohesive and consistent experience.
As an example let’s take a look at the new sign in and update experience that all of Riots products have.
As all of Riot was working incredibly hard to ship VALORANT and Legends of Runeterra, we knew that all our users should be able to access either of these games (and any future ones) using one account from a consistent sign in experience. Whether you’re a ten-year League veteran, or a brand new VALORANT player, or someone who wants to play all of Riot’s games, we wanted to make sure that the sign in experience was consistent, fast, and easy. This allowed us to (finally) ship the “stay signed in” feature. Now League players no longer have to enter their account credentials every time they sign in, and VALORANT players won’t have to either.
While consistency is important, not losing the feeling of where you are, and what game you’re playing is as well, so it was important to highlight the art from each game. With this in mind we rolled out the new “Riot Account” sign in experience. Whether you’re signing into League or VALORANT, the experience is consistent, but still very much game specific.
Esports — Alex Vejnoska
You can’t really talk about competitive gaming without also talking about Esports, especially at Riot. Esports is no different in regards to UX, the experience of consuming a spectator sport is one that has many touch points, each meticulously designed for an optimal experience.
UX for an Esports platform touches a number of different areas of the fan experience. We have to consider what a fan needs while they’re watching a match, the information they’ll need between matches, interactive experiences that raise the stakes of otherwise mundane matches, and how to build a connected fan community. As a platform that empowers regional leagues, we have to take their advertising concerns into account, balancing revenue with user needs. Further complicating this, we support a broad swath of truly global users, ranging from those who generally follow Esports and have little or no game knowledge, to the highest level players that may be pros themselves.
When watching a match, the broadcast UI is there to help understand the state of the game. Upon a quick glance, a viewer should be able to tell:
- How far into the match it is;
- How the teams are performing compared to one another;
- How players are performing compared to one another;
- If a key moment in-game is about to occur.
The broadcast UI should be a welcoming place for new fans. League is a complicated game, but can be presented simply in terms of its goals and victory conditions. This is one area we’re working on improving.
Should a fan desire further detail about player and team performance, we provide live stats alongside the broadcast on our web platform. Here we have more room to present comprehensive performance statistics without crowding out the action of the game. Because we have access to nearly every statistical event that occurs in a game, it’s our job as designers to help filter those stats down and present them in a comprehensible manner. For example, our user research has shown that match-up comparisons are very important to understanding performance, so we try to present a player alongside their counterpart on the opposing team whenever possible.
Keeping fans engaged over the course of a split or yearlong season can feel like a slog at times, so we want to create incentives to keep them tuning in. Drops heighten the intensity of a big moment in game by giving a reward and collectible to commemorate the event. “Watch Missions” reward fans for tuning in live or catching up with VODs, providing an incentive to watch games they might have otherwise ignored. By staying engaged over the course of a season, fans are able to keep up with the developments of their favorite league and feel more invested once playoffs come around.
While there’s a lot to consider, we try to focus on decisions that make the watching experience informative, intuitive, and accessible to fans. As fans ourselves, we know how tilting a subpar viewing experience can be.
What Tools Carry Over? — Alex Wheeler
In addition to just knowing that roles exist (and that UX is needed in games) we frequently get asked what tools from the standard UX tool belt even carry over into the games industry. Rest easy knowing… they all do! Your flow diagrams, user journeys, card sorting, story-boarding, and prototyping muscles that you’ve built over many years of practice and study will all still serve you extremely well in games. Below is an example of a flow template we utilize on some teams at Riot.
Additionally, I would say that user testing (and the UX tools required to facilitate that) while important in all industries, is particularly important in gaming. Games are played daily, for many hours, the experiences are very emotionally engaging for users. If something is frustrating to use, it’s 10 times more frustrating in a moment you’re greatly emotionally invested in. This results in games being tested daily, and the accompanying experiences as well. Whether you have experience running, engaging with, or simply analyzing user tests, that will translate over into gaming wonderfully as well.
All-in-all the roles and responsibilities available depend on the company in question, but most games these days utilize UX’ers in- and out-of-game to help shape and frame the game experience. If any of those things sound interesting to you I’d recommend looking at the companies you’re interested in and seeing what roles they have available. If you’re looking for an awesome addition to your portfolio, try improving the UX of a system relevant to that company. You can read more about how to do that from our article on learning from your game experiences. If you take away anything today, I hope that it’s that UX roles exist in the games industry, and that no matter your UX background they could be relevant to you.
Alex Wheeler : @RiotCindyr |Linkedin
Alex Vejnoska : Linkedin
Matt Agnello : @mattagnello | Linkedin
Erika Haas (Editor Extraordinaire) : @FerikaBoss | Linkedin
