Teamfight Tactics

Teamfight Tactics (TFT) is a strategy auto-battler with over 80M players worldwide (2023), available across desktop, mobile, and tablet.

Since joining Demiurge Studios in 2022, I’ve collaborated with Riot and Demiurge teams to deliver impactful features such as the Team Planner and Double-Up game mode.

Responsibilities

I craft UX/UI experiences end-to-end, from research and wireframes to high-fidelity player flows, prototypes, and in-engine implementation. Collaborating with game design, production, engineering, QA, and fellow UX/UI teammates, I drive concepts into deliverables.

Company

Demiurge Studios, Riot Games

Timeframe

2022-2025

Team Planner Redesign

As an early member of the Team Planner team, I helped redesigning the feature from a basic single-screen tool into a multi-team planner with expanded functionalities.

Problem

TFT is a complex game with a steep learning curve.

Players face a flood of terminology, rules, and layered mechanics, which makes it difficult to both learn and improve. Classical online tutorials devote long sections just to explain one topic.

To better understand these challenges, we analyzed in-game data and studied player discussions across forums. From this, we identified common behaviors and learning patterns that shaped our design approach.

A beginner-level player

❝

Do I want this unit or that unit? Wait ... this round is over!

A beginner-level player

❝

Do I want this unit or that unit? Wait ... this round is over!

A beginner-level player

❝

Do I want this unit or that unit? Wait ... this round is over!

A mid-level player

❝

I know how to play this one or two comps pretty well, when the random shop lets me.

A mid-level player

❝

I know how to play this one or two comps pretty well, when the random shop lets me.

A mid-level player

❝

I know how to play this one or two comps pretty well, when the random shop lets me.

An advanced player

❝

Flexibility matters, as I scout the boards of my components to adjust my own strategies.

An advanced player

❝

Flexibility matters, as I scout the boards of my components to adjust my own strategies.

An advanced player

❝

Flexibility matters, as I scout the boards of my components to adjust my own strategies.

which revealed the following

Pain Points

Missing context

Hard to make good decisions without extensive prior knowledge

Randomness

Shops and item drops are variable, punishing rigid strategies

Time pressure

Only 30 seconds per round to plan and act

Lack of built-in Support

Current players rely on notebooks or external sites.

Define Goals

The original Team Planner was a single-screen tool that made interactions quick and lightweight, but it failed to address key needs—particularly for beginner and mid-level players. In-game data showed that advanced players were already using it frequently, which revealed an opportunity: redesign the Team Planner so that less experienced players could also benefit from its support.

Learn

Help players quickly access and understand information about units, items, and rules

Flexible

Support adaptive strategies in response to random shops and item drops.

Efficient

Reduce friction so players can plan effectively in a fast-paced environment

We pinpointed these core steps to achieve the goals

1. Make the key info clear → only the essential info mid-match, consider adding more around game

2. Support more than one comp → help players to pivot based on random shop and opponent

3. Keep the interaction instant → relieve time pressure, advance player can still use it as a quick scratchpad

4. Built-in suppport → empower players by using direct data transition with gameplay content

Early concept: Tooltips and Compendium

Tooltips with essential details (such as a champion’s traits) help players recognize information at a glance, reducing reliance on memory

We also explored adding an around-game compendium as the internal handbook for players to cross-reference as they plan future compositions

Reprioritize

TFT already has a massive global player base, with many fan sites and third-party tools providing detailed information about units, items, and traits. Therefore we decided to pivot away from the compendium idea, and focus more on the highest-impact internal features: adding tooltips and tags, supporting multi-team compositions, and strengthening in-game data transition to better empower players.

Competitor research on external sites

Built-in Support: Reminders and Snapshot

Players can enable reminders with toggles in the Team Planner.

When active, a planner icon appears on the top-left of a unit card if that unit is part of the planned composition.

Snapshot

Snapshot allows players to import and save their current board into the Team Planner.
I designed the wireframe for the Snapshot flow, including its confirmation state. To make the interaction non-destructive and prevent accidental overwrites, I introduced a confirmation step that lets players review and cancel before replacing an existing comp.

I conducted a color accessibility test to select the glow effect for the confirmation state. The chosen color provided strong contrast from the background, ensuring the visual cue was accessible and effective in drawing attention to this key interaction moment.

The test covered multiple types of color vision, including protanomaly, deuteranomaly, protanopia, deuteranopia, tritanomaly, tritanopia, and achromatopia.

Bridging Experiences

The reminder and snapshot features positioned the Team Planner as a bridge between community knowledge and gameplay, giving players a practical, streamlined way to apply strategies.

Tooltip helps introducing the features

Multi-teams

Evolving the Team Planner: Single Tool → Full Journey

Supporting more than one comp gives players the flexibility to pivot strategies based on random shop offerings and their opponents’ units.

I created this low-fidelity layout during the early visioning phase to define the hierarchy and map the interactions between the list and the editor.

First-time User Experience (FTUE)

When a player opens the team planner for the first time outside a match, the welcoming screen prompts them to start creating their first comp.

For Daily Users

To boost efficiency, it was critical which screen the Team Planner opened to. TFT is a fast-paced game with only 30 seconds per round, and players often close and reopen the planner multiple times while multitasking between gameplay and strategy.

I explored a range of grayscale wireframes and prototypes to cover different use cases. Internal playtests showed that the most streamlined approach was to have the Team Planner reopen on the last viewed screen—whether the list view for comparing comps or a single comp view for focused building—giving players the flexibility to pick up exactly where they left off.

Managing teams

I explored a range of concepts:

Edit and Delete buttons side by side
A single Edit button at the top level with a toggle to switch between edit and delete modes
Tap-to-edit: no visible Edit button; tapping the comp opens the editor, and Delete appears on hover or when toggled to delete mode
A kebab menu (⋮) with Edit and Delete as secondary actions

Editing and deleting teams from the multi teams screen is a frequent and important interaction, so we wanted it to feel intuitive and frictionless across both platforms and scenarios

Final Layout Design

Through click tests with 70+ participants, we found this approach worked best across both mobile and PC, making functionalities more discoverable and minimizing errors. While the kebab menu offered better scalability for future features, this option proved more cost-effective and user-friendly for the initial release.

We therefore launched with this design to ease players into the new multi-team screen, with plans to transition to the kebab option in later updates.

Post-Launch Iteration

I led the transition from a 2-button layout to a kebab menu approach for two key reasons:

Future-Proofing

The team planned to introduce more comp management features, including the ability for players to share comps via copy-paste codes. A kebab menu provided the flexibility to scale without cluttering the UI.

Hierarchy

Data confirmed the Reminder toggle was the most critical element on the screen. We elevated its prominence and moved secondary actions into the kebab menu to create a clearer information hierarchy.

Impact

The Team Planner redesign—featuring my contributions on the Reminder toggle, Snapshot, and multi-team support led to

25%

increase in adoption

By Set 13, the set released right after the redesign, nearly

Every Player

was engaging with the Team Planner

Some of my other work

Analysis tool

QFit

2024

Task management app

Switch-it

2020

Game mode

Call of Duty Mobile

2021

Tianying Lyu

Tianying Lyu

Tianying Lyu

Teamfight Tactics

Team Planner Redesign

❝

❝

❝

❝

❝

❝

❝

❝

❝

Multi-teams

Impact

25%

Every Player

Some of my other work

QFit

Switch-it

Call of Duty Mobile

Hit me up if you have a project in mind or would like to chat

Hit me up if you have a project in mind or would like to chat