TEAM PLANNER REDESIGN

ROLE —
Solo UX Designer

TIMELINE—
1 week

SKILLS —
Interaction Design
User Research
Design Thinking

This is a passion project focused on redesigning the current TFT Team Planner to improve usability and functionality through a design sprint approach.  ദ്ദി (。•̀ᴗ-)
Disclaimer: This is an independent project and is not affiliated with or endorsed by Riot Games. All branding and assets related to Teamfight Tactics are the property of Riot Games.

CONTEXT & PROBLEM

Teamfight Tactics is a strategy game made by Riot Games featuring characters from their main title, League of Legends. It is Riot’s take on auto chess, where players go through rounds of drafting champions, managing economy, and positioning units on a board to create unique and powerful team synergies to fight for first place.

I have been an active player of Teamfight Tactics since 2020, and have especially been enjoying the climb and grind this recent set (Into the Arcane Set 13). I often use external sites such as Mobalytics or tftactics to plan my comps for future and during games. TFT currently has a built in Team Planner, but find it lacking in some areas and don’t reach for it. Curious, I started to dig around to see if other players use this tool and how. With that, I found that many players, like myself, but have expressed frustration about its limitations and doesn't have the features they expect. This made me think and wonder...

How can the Team Planner be redesigned to better meet players’ needs?

CURRENT TEAM PLANNER

USER RESEARCH

To understand the issues players face with the current Team Planner, I conducted a survey and did research through community threads. My goal was to identify pain points and gather feedback on how the existing planner could be improved.

I ran the survey to understand their usage and frustrations with the Team Planner. A key takeaway from it was that:

approx. 77% of players use the Team Planner

~ 30 players surveyed

This high usage percentage meant that many players rely on the planner, but there are still parts of it that could be improved to better serve their needs. Although widely used, feedback indicated that the tool often fails to meet players’ expectations for efficiency and how easy it is to use. Many players said it sometimes wasn’t helpful during the game because they struggled to find their units quickly on the planner while managing other other things in the game.

To better understand these challenges, I researched player feedback in TFT’s online communities. I focused on discussions about the planner, looking for common complaints and suggestions. By combining this with the survey data, I was able to pinpoint key usability issues that affect the player experience:

KEY USER PAIN POINTS

  • Difficult Navigation: Players find it challenging and time consuming to find the champions they need in the planner. This is especially frustrating during rounds that are fast paced, where quick decisions are necessary. Champions are also not listed alphabetically, and users feel like they are wasting game time to look for what they need.
  • Lack of Sorting/Filtering: Many players noted that there are no options to sort or filter champions by trait, origin, and class. This makes it difficult to quickly narrow down the list of champions to the ones that fit their board.
  • Restricted Flexibility/Planning: The current slot limit of selecting only 10 champions in the Team Planner is a significant constraint, especially for users who are flexible their comp and/or rolling down. Some players resort to clearing their entire planner just to select specifics units they need during their rolldown as 10 slots can feel restricting.

These findings highlight a gap between player needs and the current planner's functionality, showing the need for improved organization, efficiency, and flexibility.

Some of the Reddit comments about the Team Planner

USER PERSONAS

To build something players actually want to use, I needed to understand what they care about. Creating some user personas helped me step into the shoes of players, showing me what they need and how they interact with the planner. This approach helped me design a more intuitive experience that works for all types of players and fits their needs.

COMPETITOR ANALYSIS

A lot of TFT players skip the in-game Team Planner for (or use it alongside) external sites like Mobalytics and MetaTFT. A competitor analysis helped me understand what features players expect and gave me insight into what works (and what doesn’t) in these sites.

Takeaways: These sites offer way more flexibility, organization, and features that help players plan comps efficiently. For example, they have a feature where players can filter champions based on comps, augments, traits, origins, class, and more, something players have asked for in the in-game Team planner.
They also include community-driven features, where players can browse meta comps, comps that others have made, item builds, and augments based on data and player trends + win rates.

However, the large amount of options, information, and ads can be overwhelming, especially for newer players, and for those trying to find the best strategy quickly. It can be difficult for players who are juggling and thinking about other things in-game and may find it difficult to utilize these tools without getting lost or distracted by all the details. Additionally, this becomes even harder when using external sites, as players have to switch between tabs during gameplay.

DESIGN GOALS & IDEATION

Based on the feedback from users and research, it’s time to turn those findings into design ideas! The goal now is to figure out ideas and the key features that will guide the redesign. My overarching main design goal is:

To improve the usability and flexibility of the Team Planner by addressing key user pain points, such as difficult navigation  and lack of sorting/filtering options

SKETCHES & CONCEPTUALIZATION

Before going into full on design-mode, I sketched out ideas to explore layouts and features. This helped me quickly explore different layouts and features without getting stuck on or worrying about details. By doing this first, I could focus on solving player pain points and making sure the planner felt intuitive before focusing on the visuals.

WIREFRAMING

I created these low fidelity wireframes to showcase two sections: one for champion/unit selection and team comp, and the other for board positioning. I focused on keeping the layout familiar to players while making space for the new features.

ITERATIONS

(AND EVEN MORE ITERATIONS)

Next, I moved onto designing and refining the layout. Throughout several iterations, I made key updates to improve the planner based on player pain points. I experimented with different layouts for the champion cards to see which one worked best.

After testing with a small group of players, they preferred the original layout, so I kept it and refined the smaller details to improve clarity. They also felt that the collapsible section was unnecessary, so I removed it to simplify the interface.

With that said, they really enjoyed the quality of life features added, like the search function and sort-by filter.

FINAL DESIGN

CURRENT

THE REDESIGN

VIDEO DEMO

FEATURES

PROTOTYPE

(TEST ME! ᕙ(  •̀ ᗜ •́  )ᕗ)

REFLECTION

I play the whole (what I'd like to call) ✨Riot Trifecta✨ so League, TFT, and Valorant, so I enjoyed working on this project a lot! I only started as a casual TFT player, but I love seeing the funny number of LP go up and down... The climb and grind in Ranked TFT has been incredibly fun and it feels good to see improvements, even if small and gradual. To get better at TFT means to constantly adapt and optimize, which is a bit similar to the design process if you think about it! This project was all about refining the player experience, making iterations, and making sure players can plan their comps smoothly. Whether designing or in-game, it's all about learning, tweaking, and finding the right strategy, while also knowing it’s okay to change that strategy when the meta (or the problem) calls for it!

That was one of the biggest takeaways from this project. There were times where I felt stuck because I wanted to get it right on the first try. However, I reminded myself that design is an ongoing process and the solution can be refined and improved. I hope to get more feedback from players and continue to iterate to make this project even better!

I'm excited to see how the TFT team at Riot will improve the Team Planner over time. I understand that they have mentioned it's not on their highest priority right now, but hope it'll get the attention soon.

Thank you for reading till the end, and good luck have fun! o7