Team Planner Redesign

Teamfight Tactics (TFT) is a strategy game with over 30M monthly active players, where players must make fast, high-stakes decisions under uncertainty. As part of the Team Planner redesign, I helped evolve the feature from a lightweight tool into a decision-support system used by players across all skill levels.

Responsibilities

I designed and refined UX/UI experiences across flow charts, wireframes, high-fidelity user flows, figma prototypes, and in-engine implementation. Partnering with game design, production, engineering, QA, and other UX/UI designers, I helped translate feature goals into shippable player-facing experiences.

Company

Demiurge Studios, Riot Games

Timeframe

2022-2025

Key Design Directions

The team had several possible directions. I focused on exploring and evaluating a few of them in depth.

Multi-teams Planning

TFT players constantly adapt to random shop outcomes and opponent strategies, so planning needed to support pivoting, not just a single fixed composition.

I expanded Team Planner into a multi-team system with a list view that surfaces key information like units and traits at a glance. This allowed players to compare multiple compositions and jump into focused editing when needed.

Strengths:

Supports pivoting between strategies
Helps players compare plans quickly
Flexible for different skill levels

Tradeoffs:

Can become dense as more teams are added

Reminder & Snapshot

Reminder Toggle

To better connect planning with gameplay, the team explored a reminder system that highlights planned units in the in-game shop.

I designed the reminder toggle system and related interaction flows, giving players control over when reminders are active and how they connect to the planning experience across mobile and PC.

Strengths:

Bridges planning and gameplay
Helps players recognize relevant opportunities quickly
Gives players control over gameplay assistance

Tradeoffs:

Adds visual signals to an already dense game UI
Can bias players toward a fixed plan in a game built around adaptation

Snapshot

The snapshot system that allows players to quickly import or save team compositions.

I designed the interaction flow and confirmation logic to help players avoid accidentally overwriting their current plans during fast-paced gameplay.

The snapshot system that allows players to quickly import or save team compositions.

I designed the interaction flow and confirmation logic to help players avoid accidentally overwriting their current plans during fast-paced gameplay.

Strengths:

Prevents destructive mistakes
Improves confidence around high-impact actions
Makes system feedback clearer

Tradeoffs:

Adds an extra confirmation step to the flowe

To make this critical moment clear in fast-paced gameplay, I added a strong visual cue and tested the color treatment across multiple vision types to maintain contrast and visibility

Reduce Friction Through Tooltip System

Reduce interruption and friction during planning.

Strengths:

Helps players access champion and functionality information quickly
Preserves the planning flow

Tradeoffs:

For champion tooltip on mobile specifically, core gestures like tap and scroll were already in use, so adding tooltip interactions risked conflicting with the existing interaction model

Reduce Entry And Re-entry Friction

I designed supporting flows to help players enter and return to Team Planner with less friction.

First-time use: prompted players to create their first composition, helping them understand how to start using the tool.
Mid-match re-entry: preserved the player’s last screen when reopening Team Planner, supporting quick switching between gameplay, comparison, and editing within limited round time.

Additional Exploration

This direction is explored but not prioritized.

Item Compendium

I explored a dedicated space for learning item stats and combinations. Mobile TFT relied heavily on tooltips, which were quick for reference but not ideal for deeper learning, so I designed a more stable side-by-side layout with filtering by base item to help players understand recipes more easily.

Strengths:

Supported learning and retention
Made item information easier to browse and compare
Helped players understand recipe relationships

Tradeoffs:

Less directly connected to in-game integration
Overlapped with third-party tools that already served as information libraries

Decision:

We deprioritized this direction and focused on features with stronger in-game integration and higher direct gameplay impact.

Compendium Wireframe

Competitor research on external sites

Specific Interaction Challenges

After evaluating the exploration directions, the team moved forward with features that had stronger in-game integration and gameplay impact, including multi-team planning and the reminder system.

Within those directions, I focused on several interaction challenges that shaped how the experience worked in practice.

Unit Tooltip Interaction Models

We explored adding champion tooltips to the mobile Team Planner, where hover interactions from PC were unavailable.

The existing interaction model already relied on:

Tap for unit selection
Scrolling for browsing the unit list

This created the need to explore interaction patterns that could support new functionality.

Add another gesture

Long press tooltip

Preserved tap for selection
Added gesture complexity inside a scrolling list
Pagination was explored to reduce interaction conflicts

B. Change the interaction paradigm

Drag & drop planning

Explore a more spatial planning model which covers the positioning of the units
Free tap for information access
But created a heavier, slower interaction flow for rapid planning

C. Remove the need for tooltip interactions

Surface labels/icons directly

Surface key info directly in the list
Preserve fast tap-and-scroll behavior
Avoid additional interaction overhead

Outcome

Since TFT planning happens under time pressure, we prioritized clarity and interaction speed over deeper gesture-based interactions. Surfacing key information directly preserved the fast tap-and-scroll workflow while reducing interaction overhead.

Manage Controls

The first challenge was how to design team management controls in a dense multi-teams list

Direct Buttons

Highly discoverable, but visually repetitive in a dense list

B. Mode Switch

Cleaner layout, but adds interaction cost when players need to switch between editing and deleting.

B. Kebab Menu

Cleaner layout, but adds interaction cost when players need to switch between editing and deleting.

Outcome

We launched with direct edit/delete controls to prioritize discoverability and speed for the initial release, and used a red visual treatment for delete actions to reduce errors in high-frequency interactions.

As the feature evolved and required additional actions (e.g., sharing, extended management), we transitioned to a kebab menu pattern to support scalability without cluttering the interface.

Post-launch data also showed that the Reminder toggle was the most frequently used action, leading us to elevate its prominence while moving secondary actions into the kebab menu to improve visual hierarchy.

Impact

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

25%

increase in usage

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, UX

QFit

2024-2026

Learning, UI motion, UX/UI

Katalyst

2021

System state, UX

Call of Duty Mobile

2021

Tianying Lyu

Tianying Lyu

Tianying Lyu

Team Planner Redesign

Key Design Directions

Additional Exploration

Additional Exploration

Additional Exploration

Specific Interaction Challenges

Impact

25%

Every Player

Some of my other work

QFit

Katalyst

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