RIOT GAMES

Tasked to elevate Team Fight Tactic’s monetization across the world.

Across PC and Mobile platforms, I redefined a player’s access to TFT’s content on PC as it competes under the shadow of League of Legends.

I designed and launched the TFT Coins hard currency experiences across all regions and country stores.

I redesigned the PC experience to promote new gacha mechanics for TFT store bundles and new Treasure Troves.

I designed and pitched new Battle Pass friendly mechanics to accelerate a player’s acquisition of rewards.

I designed new around-game experiences for the most popular TFT mode, Double Up - working cross-functional with engineering, matchmaking, game design, and art to make a Riot-worthy lobby and team up game experience across our platforms.

 
 

Teamfight Tactic’s Very Own Hard Currency

Launched TFT’s own currency across all Riot Regions

Goals - Players know TFT has a currency separate from Riot Points, give them easy access to purchase at all times, and give them a means to spend.

Couple reasons to show the flow - one, the beats of the experience, and two, annotations and communications to others.

  1. Players needed to know this new feature just released, showing them how to try it. Define the prominence of the feature in conjunction with other home screen messaging, to not overwhelm a player. Visual feedback at the right moments help solve for the above goals.

  2. The purchase flow was uncommon to TFT mobile. Even describing the players experience with Apple Pay and Google Pay were needed, enabling us to reduce other screens typically shown for a purchase process.

 

Keywords

So Many Ways to Create Tooltips

TFT had a player goal of accessibility and education.  TFT is a very fast paced game.   It’s very complex.  It takes a lot to learn.  And eventually players don’t need their hands held.

Therefore, I wanted a cross-platform design to show keywords to players, only when they needed them.  Essentially, answering, “how to toggle keywords on and off without thinking?”

These iterations show how they might interact on a mobile screen, the pros and cons of what gets covered in-game,  how simple the interactive model is, and if it’s scalable.

 

PC + PC friendly interaction

Players click.  A mouse seems most effective, but everything in TFT is done with a mouse.  A player is too busy.

Sticking to the goal of platform friendly, fast and simple - using a keyboard short cut as a toggle for keywords tested best.

 

Mobile Friendly Interaction

Unlike PC, players do not have multiple input devices.  Just one.  Their finger.

It’s quickest, most obvious, and scalable for our UI.

 

Double Up Mode and Player Communications

Lobby Player Goals:

  • Fast and Easy

    • Players can quickly understand what team they want to join or how to swap teams once they are in the lobby.

  • The Same Agency

    • All players in the lobby have the same means of partnering and changing teams.

  • Lobby-View Matches Queue

    • Players will know their team before getting to the loading screen.

  • Respectful Team Swapping

    • Players can communicate intent of team swapping without text or voice chat.

    • Players are not intrusive to other teams (hot swapping).

4 Pairs of Players, Teaming Up. What could go wrong?

Competitive lobbies are difficult to design for.  One must balance speed to play, fairness, strangers vs. friends trying to team up with good players  over worse players.

The final flow solved for the goals of fairness, easy of moving teams, all while giving the leader the ability to start a game without managing 8 players.

The flow answers, “how can a player switch teams without interrupting a pair or taking over a spot another player wants to be?”  “Will players intuitively know how to swap teams, if they can, if they can’t, etc?”  “Could a group of 8 players be teamed together and start a game just as fast as a single player?”

 

I revamped the Team Creation feature to provide a catalogue to each player they can update in real time.

Allowing a player to always update their teammate as to what they were “looking for” - from champs to items.

 

You can see the teammate UI shown in the most relevant and needed place - the shop or armory.

If a player selected Team Creation objects, they would appear to their teammate automatically.

When something is available the player wants, a little shine appears as a forced callout.

This is supported on PC as well.