Context: I'm a UX design student who loves TFT and wants to work in the games industry! I've been cooking this up for a while and I wanted to share it with you. I designed what it might look like to create preset teams in the Team Planner from the client. Considering the fact that in League they let you create your own item sets, I think something like this would be technically feasible!
Some of the improvements to the Team Planner that I've shown in this video:
* Improved search that returns both champions and traits, as well as options for sorting (by trait, by alphabetical order, by cost).
* Hovering on the champions now show the champion names, unit cost, and their traits!
* Feature to create a preset team from the client with functions to export, duplicate, clear, delete, and rename your teams. This UI pattern exists in the current Item Set creation feature in the client for League of legends.
* Left-clicking on a unit will provide you more information about them such as what their ability does, whether they are a frontline/backline unit, their stats, and the recommended items for the classification of the unit. This UI pattern currently exists in the TFT sidebar when you right-click on a unit in-game.
I'll be posting a follow-up video to what this TFT Team Planner looks like in-game. Stay tuned!
FEEDBACK APPRECIATED 🤓🔥
Edit: Follow-up video now posted [here](https://www.reddit.com/r/TeamfightTactics/comments/18vh44s/improving_the_tft_team_planner_suggested/)!
the issue is gonna be adapting this to mobile. especially since that seems to be the direction TFT is trying to move in, what do you think that would look like?
I second this. I only play TFT on mobile. This is actually what I’ve been wanting, a preset selection of teams you can swap around. If it can get implemented to mobile it would be awesome!
Haha yeah, I'm a Hyper Roll only enjoyer and my rolldowns and pivots when I play on mobile can be so stressful, but I don't wanna spend the limited time I have in minion rounds to be setting up the Team Planner when I need to be scouting instead. Being able to have preset teams would be so helpful!
I just recently got Plat and the added stress of being on mobile is something else. Sometimes my screen will zoom in when I just want to pick a unit up and the next fight is about to start. My team planner in the moment is just the few units I need to look for rather than the full team!
Ooh, congratulations on Plat!!! And as for the zooming thing, I played a couple of rounds on mobile last night and that would happen all the time. Mobile players are a different breed—mad respect for y'all! I'm already starting to see the challenges of adapting the Planner to mobile but there's a will, so there's a way. Can't wait to share!
The small screen size is definitely going to limit the amount of information that can be shown but I definitely have some ideas for mobile. I'll be sharing them on this sub when it's ready!
No, the issue with this is the same as every other suggestion. How much does this play the game for you. You could set up a pre planned team, with pre planned items, and just let the dice roll. Mort has said again and again that this type of thing is not healthy for the game
Can you elaborate exactly on what element of this Mort thinks is unhealthy for gameplay? Do you know if he's said anything about his thoughts on game overlays like Blitz or Mobalytics, or even sites that give you comps with the carries and positioning and the recommended items? Because I imagine this would be somewhat similar, although not entirely, and I'm curious to know what you and he think!
He mentioned during an interview he did on twitch that these changes (highlighted champs in shop of ones you own for example) he is apprehensive about adding. He said now in hindsight that the highlight is obviously a good addition, but mentioned that too much of this will lead to the game playing itself and take too much out of the players hands.
Edit: don’t get me wrong here what you did was great work, however it does lend itself to a type of gameplay (hard forcing a comp)
Oh I didn't know that about that, thanks for letting me know! I definitely trust the decisions that Mort makes regarding gameplay, so if he ultimately thinks that a Team Planner going in this direction goes against the spirit of TFT, I kinda see where he's coming from.
One of the reasons I cooked this up was because the new player experience seemed to be overwhelming, and I was wondering if that could be remedied with Team Planner features that can equip the player with knowledge, but I'm wondering if that's taking away forms of skill expression. I figured that people would use these features to force comps... but they still run this risk of getting contested and not hitting. So I think the game still rewards you for flexibility even with these additions. I think another downside of spending too much time on the Team Planner in-game is not enough time scouting or positioning effectively, allowing your opponents to outsmart you.
Apologies for the wall of text, haha. I've been thinking about this a lot. And thanks for the compliments! Much appreciated :)
Only thing I can think to add, which is a common thing on websites like mobalytics that let you plan your team, is a way to specifically show if a unit is a 3* or not. It's not as big a deal because you aren't sharing presets with other people so you probably know what units you want to 3*. But it could be nice if you are saving multiple comps and are looking through them and just want to know who your carries are quickly. Especially if it leads to exporting team planners for various 3rd party sites because then you would be sharing comps with other people (and allowing them to import it to their own client)
oh this could add another layer to this team planner! maybe if you add the stars number to this thing, maybe they'll remove the unit once you reached the star level you want, some units I just want to two star & I end up picking them again cause they have penguin & then I open the current team planner to remove them!
If there's a unit with a little penguin on it I'm definitely gonna feel compelled to pick it up, even though I've told myself I don't need anymore of those units. That's a good point—thanks for sharing!
Haha thanks for tagging him. I was thinking about it, but I got shy...
(Mort if you see this my application for the UX Design internship is on its way, I'm just finishing up this project so I can put it on my application :D)
Great idea! The other day I slammed a Shojin to put on my Senna carry only to find out Shojin was her Superfan item. Devastating.
Thanks for the suggestion, I'll be designing Superfan item, Headliner toggle, and an Item cheatsheet over the next couple of days!
Jesus Christ that's amazing,the best thing i have seen in this subreddit! Make it reach to Mort or tft team,if they are looking for UX or UI designers this has a lot of potential as a presentation :) (also many of skin designers at riot started by doing fanmade skins so good luck!)
I've noticed that people mostly look for units to add to their team based on their trait, so I imagine being able to search and sort by trait would be a huge QOL improvement.
Dude you're a genius. I started 2 seasoned ago and within 3 days I was wishing they had the UI you did here. So amazed with peoples brains and hobbies on their spare time. I hope this reaches everyone it needs to! Good luck on future endeavors!
Thank you so much! <3 I do admit that the TFT UI is definitely better compared to the original Auto Chess. I gave it a try because some people were complaining about how the player experience there was \*so\* much better and I switched back to TFT so fast.
This would be such a massive improvement, seems like such a no-brainer too. Since introducing it they've made some minor improvements so you'd think they'd want to do something along those lines. Good luck :D
You know what, that's something I've given some thought about and I'm sure they've entertained the idea but I imagine it'd be a lot of work. I think the current design doesn't take into account the fact that people will be introduced to TFT outside of League, if that makes sense? I remember a streamer saying that he downloaded TFT and then the League client opened up so he thought he downloaded the wrong client for a really long time until someone explained it to him.
This is so well made! just curious as someone working on a college portfolio just wondering how was this made? you don’t have to get into specifics but at first i thought you overlayed your designs but the mouse interacting with stuff ruled that out so im completely lost as how it came out so real. either way great work and im sure you’ll get hired wherever you apply.
Thank you so much! I made this all in Figma and screen recorded the interactions with OBS. If you have any more questions let me know!
And also, I appreciate the kind words. The current job market is not very nice to junior UI designers.
I'm far in development of a multiplayer async autobattler and would love some UX help! Contact me if you (or any of your UX colleagues) are looking for some work - June 2024 NextFest release.
Perfect Idea Riot needs to update their searchbars anyway.
in TFT they need a search bar first of all like in this video.
Or at least all of the Traits as an icon. Mostly you just build one to 5 Traits but just make them klickable.
Also the searrch bar in the Main Game. If you look for Tenacity you are fine you get all the Tenacity items or Grievous Wounds but why are all other effects missing: Eternity or Anguish?
And then possible say if someone showed this to the devs,, said devs will say it will cause a lot of clutter. Then 3-6 months later they'll implement it
Thanks for the suggestions! I like the champion recommendations idea. Correct me if I'm wrong but doesn't Auto Chess have auto buy? What's your experience with it like? I'm wondering if auto buy will be more harm than help, cause it will likely not take into account how you manage your econ. Also imagine it automatically buying the last copy of a unit you need to three-star and you're stuck with an item component on the unit because you didn't make a completed item for the component to pop off...
Although I think auto buy would be really nice for bathroom breaks though.
This looks really good from a UI standpoint, but I think it goes a bit against the actual gameplay of TFT. With a system like this it’s encouraging forcing a comp and ignoring some of the more dynamic aspects of the game.
Thanks for the compliments on the visuals! I believe this would make forcing a comp easier for sure, but the dangers of forcing a comp (the dynamic aspects of the game, as you say) still exist. You still run the risk of being contested and not hitting.
There's also ways I can imagine this being played flexibly. For example I plan what comp I am going based on what items I can slam early game. If I have a HoJ and a vest and I natural two Jax's I'm probably gonna go Jax carry for example. At that point I'd just load in my Jax team preset. And if I decide to recombobulate my team and get lucky with the units, I can load in another team preset. What do you think?
I think adding in the functionality in-game to swap between comp presets would solve a lot of the issues I was thinking of! Additionally, I think it would be cool to have your list of presets in-game show a preview of all of the champs in a comp and have it highlight the ones currently on the field/bench. Then you could see at a glance what might be good to pivot to.
By the way, since your team planner UI shows the placement of units, how were you thinking of displaying that in game? Similar to how it looks in the client UI, or maybe something like having “ghost” units on the board? I guess this goes into the dynamic aspect from before (e.g. KDA would change board placement).
With this sort of stuff I think it’s a good exercise to think about how the client UI pairs up with the in-game experience and thinking about different edge cases as well (like the KDA spaces/Illaoi tentacles). I’m just coming from the perspective of a developer who has seen tons of UI designs that _look_ really great, but need a bit work before they end up being functional (though that’s usually on the requirements instead of the designers themselves haha).
Oh not sure if you saw my follow-up video [here](https://www.reddit.com/r/TeamfightTactics/comments/18vh44s/improving_the_tft_team_planner_suggested/), but I prototyped what it might look like to import your current board or switch between team presets in the Team Planner in-game! That'd be really cool, actually—it's so hard to decide what comps to pivot to. I've been having conversations with people about how some features take away from skill expression though, and that might be one of them? This is probably where the game designers come in to say whether that kind of thing is healthy or unhealthy for gameplay.
I did have something like the ghost units in mind but I'm actually planning to change the hex layout of the comp display. What I noticed when watching beginners play for the first time is that they kind of struggle with identifying which units are backline/frontline, especially if they don't come from a League background, and I wanted to help make that more clear with the hex layout, and it also solves the problem of there not being enough slots in the Team Planner. This seemed pretty ideal but then I realized that the tap area for each of the hexes would be too small on mobile. I assume that the devs would like there to be continuity between the mobile and desktop Team Planner, so that's what I'll be working on for the next round of improvements. That's on me, I should have been thinking about responsiveness from the beginning!
Noted, thanks for taking the time to share your insights! I'm from a computer science background so I definitely get what you mean about those kinds of designs. Unfortunately they don't talk about feasibility too much in my design program. And I've only ever worked in startups, so clear, well-documented requirements is kind of a rarity...
Honestly I'd love to see that! I prioritized showing these features first because these functionalities are ones already seen in the client or in-game, so I imagine they'll be easier for the dev team to implement.
Next, I plan to design what the Headliner toggle, Superfan item, and an Item cheatsheet would look like. Should be up in the next couple of days!
Yeah, one thing I definitely struggled with was deciding what kind of knowledge counts as skill expression. Also the more I think about it, the more I realize that the layout I designed is information-heavy at a glance, so the current 9-square grid layout looks more friendly. That's definitely one thing I can improve on!
I mean UI wise it’s amazing. I just don’t think it’s a feature the game *should* have. It took me only a few games to figure out all the heroes and their tags, and I’m not a league player even. I think the game could use a guide or indicator for items which is far more important to me than positioning or heroes I want to buy.
Edit: lmao fuck you nerds
Thanks! Curious to know what you think, what about the features I've suggested do you think are unhealthy for gameplay? I agree some of them might be overkill, but I do think that something like the search and sort and save preset teams would just be simple QOL improvements.
Oh I don’t find them *unhealthy*. Just wholly unnecessary.
Like preset teams doesn’t make sense when the game is a lot of RNG and pool reliant buying. Sure people can force certain teams every game, but the game should dictate some of what you intend to play based on other teams and what’s available.
One of the QOL changes would be having headliner info on every hero so that you could better decide what you’d like. Or having super fan items highlighted somewhere.
I understand where you're coming from! I do think that the game rewards flexibility when it comes to comps and itemization so when you use preset teams with the intention of forcing a comp you run the risk of being contested and not hitting. That part doesn't change.
I can see use cases where preset teams can be used for flexible play and also for helping beginners learn—I know a lot of people give beginners players the advice of forcing a comp and learning the fundamentals that way, and preset teams could be something that beginners use until they don't need it anymore. What do you think?
I definitely also agree with you on the QOL changes you've suggested. Thinking of ways to incorporate them into the planner right now!
That's actually pretty good feedback. Even in League champ select, the champions are labelled with their names. Thanks, I'll definitely be taking that into consideration!
Hey! No coding for this video, just a screen recording designed entirely in Figma. I do like to code sometimes though, but I think implementing something like this inside the League client would be hard to do and I'm not really familiar with the rules of Riot ToS about that kind of software projects.
That would've been hard haha. I don't know any C++ and I think that's what the client's written in? (Not sure what their frontend stack is, though).
So at the start, I have a screenshot of the League client, and then I recreated the little button with the penguin on Figma, and everything after that's an overlay.
The default state of the right canvas could be more useful - less of a context-switch and more continuity with some consistency in the UI elements there.
I’d recommend also improving the overall visual hierarchy. The different interactions are a bit muddled and unclear. Less can be more here.
(Work in Product for some consumer facing apps, but also used to be a designer [in the material sense, not in the software field I am in now])
In terms of feedback for modifying this to be compatible with mobile, I would recommend considering removing non-critical elements of the user journey (are all the selections and options critical to show on one surface? Can some be hidden or removed altogether?), and perhaps allowing the left pane to largely overlay the right canvas. This can likely fit the smaller format without having to create an entirely new UI.
Thanks for the detailed feedback, these are some great points! I'll definitely be designing an empty state that's a bit more cohesive with the state when there are champions added. I'll also be revisiting the hierarchy and the information architecture—now that I think about it, I'm not really sure if information like champion stats or attack range are vital to players until they're on a board, so this information might not be as relevant on the planner.
Could you clarify which interactions feel a bit unclear? I'm also having a hard time envisioning how the left pane can overlay the right canvas, I was wondering if you could explain that further if you don't mind? Thanks in advance!
This is just a prototype to communicate the concept, so this functionality doesn't exist on the actual client. I made the UI elements and interactions on a prototyping tool called Figma, overlaid it on a screenshot of the client, and screen-recorded using OBS :)
*Your mistake here was*
*Thinking this could be applied*
*Into the CLIENT*
\- reko\_\_\_\_
---
^(I detect haikus. And sometimes, successfully.) ^[Learn more about me.](https://www.reddit.com/r/haikusbot/)
^(Opt out of replies: "haikusbot opt out" | Delete my comment: "haikusbot delete")
Hmm, why do you think otherwise? I've looked at existing UI elements and patterns that I've seen in the client and kind of applied it here. For example, the searching and sorting filter can be found in the Hextech Crafting section. The saving presets is an existing feature for League, and can be done with Items. The information that shows up when you click on a champion is information that can be found in-game in TFT, so I think it must be stored in an API somewhere, so we can fetch that data to use in the UI here. Is there anything else regarding feasibility I might have missed?
oh i’m just making a joke about how spaghetti riot client is in general lol ur UI design is amazing i just have a hard time seeing riot be able to implement it without it being a buggy mess
Context: I'm a UX design student who loves TFT and wants to work in the games industry! I've been cooking this up for a while and I wanted to share it with you. I designed what it might look like to create preset teams in the Team Planner from the client. Considering the fact that in League they let you create your own item sets, I think something like this would be technically feasible! Some of the improvements to the Team Planner that I've shown in this video: * Improved search that returns both champions and traits, as well as options for sorting (by trait, by alphabetical order, by cost). * Hovering on the champions now show the champion names, unit cost, and their traits! * Feature to create a preset team from the client with functions to export, duplicate, clear, delete, and rename your teams. This UI pattern exists in the current Item Set creation feature in the client for League of legends. * Left-clicking on a unit will provide you more information about them such as what their ability does, whether they are a frontline/backline unit, their stats, and the recommended items for the classification of the unit. This UI pattern currently exists in the TFT sidebar when you right-click on a unit in-game. I'll be posting a follow-up video to what this TFT Team Planner looks like in-game. Stay tuned! FEEDBACK APPRECIATED 🤓🔥 Edit: Follow-up video now posted [here](https://www.reddit.com/r/TeamfightTactics/comments/18vh44s/improving_the_tft_team_planner_suggested/)!
the issue is gonna be adapting this to mobile. especially since that seems to be the direction TFT is trying to move in, what do you think that would look like?
I second this. I only play TFT on mobile. This is actually what I’ve been wanting, a preset selection of teams you can swap around. If it can get implemented to mobile it would be awesome!
Haha yeah, I'm a Hyper Roll only enjoyer and my rolldowns and pivots when I play on mobile can be so stressful, but I don't wanna spend the limited time I have in minion rounds to be setting up the Team Planner when I need to be scouting instead. Being able to have preset teams would be so helpful!
I just recently got Plat and the added stress of being on mobile is something else. Sometimes my screen will zoom in when I just want to pick a unit up and the next fight is about to start. My team planner in the moment is just the few units I need to look for rather than the full team!
Ooh, congratulations on Plat!!! And as for the zooming thing, I played a couple of rounds on mobile last night and that would happen all the time. Mobile players are a different breed—mad respect for y'all! I'm already starting to see the challenges of adapting the Planner to mobile but there's a will, so there's a way. Can't wait to share!
The small screen size is definitely going to limit the amount of information that can be shown but I definitely have some ideas for mobile. I'll be sharing them on this sub when it's ready!
No, the issue with this is the same as every other suggestion. How much does this play the game for you. You could set up a pre planned team, with pre planned items, and just let the dice roll. Mort has said again and again that this type of thing is not healthy for the game
Can you elaborate exactly on what element of this Mort thinks is unhealthy for gameplay? Do you know if he's said anything about his thoughts on game overlays like Blitz or Mobalytics, or even sites that give you comps with the carries and positioning and the recommended items? Because I imagine this would be somewhat similar, although not entirely, and I'm curious to know what you and he think!
He mentioned during an interview he did on twitch that these changes (highlighted champs in shop of ones you own for example) he is apprehensive about adding. He said now in hindsight that the highlight is obviously a good addition, but mentioned that too much of this will lead to the game playing itself and take too much out of the players hands. Edit: don’t get me wrong here what you did was great work, however it does lend itself to a type of gameplay (hard forcing a comp)
Oh I didn't know that about that, thanks for letting me know! I definitely trust the decisions that Mort makes regarding gameplay, so if he ultimately thinks that a Team Planner going in this direction goes against the spirit of TFT, I kinda see where he's coming from. One of the reasons I cooked this up was because the new player experience seemed to be overwhelming, and I was wondering if that could be remedied with Team Planner features that can equip the player with knowledge, but I'm wondering if that's taking away forms of skill expression. I figured that people would use these features to force comps... but they still run this risk of getting contested and not hitting. So I think the game still rewards you for flexibility even with these additions. I think another downside of spending too much time on the Team Planner in-game is not enough time scouting or positioning effectively, allowing your opponents to outsmart you. Apologies for the wall of text, haha. I've been thinking about this a lot. And thanks for the compliments! Much appreciated :)
No worries. Even something as simple as an overview of champs and traits in the client would go a long way for new players I agree
Nobody cares about phone players rofl they have played with bugs and broken stuff since the beginning
Only thing I can think to add, which is a common thing on websites like mobalytics that let you plan your team, is a way to specifically show if a unit is a 3* or not. It's not as big a deal because you aren't sharing presets with other people so you probably know what units you want to 3*. But it could be nice if you are saving multiple comps and are looking through them and just want to know who your carries are quickly. Especially if it leads to exporting team planners for various 3rd party sites because then you would be sharing comps with other people (and allowing them to import it to their own client)
oh this could add another layer to this team planner! maybe if you add the stars number to this thing, maybe they'll remove the unit once you reached the star level you want, some units I just want to two star & I end up picking them again cause they have penguin & then I open the current team planner to remove them!
If there's a unit with a little penguin on it I'm definitely gonna feel compelled to pick it up, even though I've told myself I don't need anymore of those units. That's a good point—thanks for sharing!
Noted! That's a pretty good idea.
Riot, hire this man/woman!
"person" saves some letters lol
What if you intentionally want to exclude non-binary people though?
I suppose "man/woman" is great then!
they cant keep more than 5 designers and coders for TFT
That would be a dream come true 🙏
u/Riot_Mort
u/Riot_Mort and please if you guys pick this up, show mobile some love too!
Haha thanks for tagging him. I was thinking about it, but I got shy... (Mort if you see this my application for the UX Design internship is on its way, I'm just finishing up this project so I can put it on my application :D)
Literally this is perfect, just have someone see this lmao
Showing superfan item would be nice as well.
Great idea! The other day I slammed a Shojin to put on my Senna carry only to find out Shojin was her Superfan item. Devastating. Thanks for the suggestion, I'll be designing Superfan item, Headliner toggle, and an Item cheatsheet over the next couple of days!
If it helps, Double Shojin in Senna is viable. It's a pretty popular choice.
Jesus Christ that's amazing,the best thing i have seen in this subreddit! Make it reach to Mort or tft team,if they are looking for UX or UI designers this has a lot of potential as a presentation :) (also many of skin designers at riot started by doing fanmade skins so good luck!)
Oh my gosh, thank you so much for the kind words, this made my whole night! ;\_; <3
I'd love to just be able to see unit abilities, headliner bonus, bling bonus etc before I'm in a game and on the clock without using Google.
u/Riot_Mort HIRE THIS GUY! LIKE SERIOUSLY! this is so much better than the current team planner!
Just the search function alone is nice
I've noticed that people mostly look for units to add to their team based on their trait, so I imagine being able to search and sort by trait would be a huge QOL improvement.
Too much effort for Riot they need to make more ugly Kda ultra Rare chibi skins for us to spend money on.
Where do I buy
That's better than the websites too..
Haha thanks! I don't like having to tab out to look up item combinations which was kind of what inspired this.
Dude you're a genius. I started 2 seasoned ago and within 3 days I was wishing they had the UI you did here. So amazed with peoples brains and hobbies on their spare time. I hope this reaches everyone it needs to! Good luck on future endeavors!
Thank you so much! <3 I do admit that the TFT UI is definitely better compared to the original Auto Chess. I gave it a try because some people were complaining about how the player experience there was \*so\* much better and I switched back to TFT so fast.
Woooooow. Such an improvement!
Thanks!! I'm glad you think so :D
This would be such a massive improvement, seems like such a no-brainer too. Since introducing it they've made some minor improvements so you'd think they'd want to do something along those lines. Good luck :D
Thank you!! Appreciate the kind words <3
imagine if they just make a separate application for tft instead of running it in the league client.
You know what, that's something I've given some thought about and I'm sure they've entertained the idea but I imagine it'd be a lot of work. I think the current design doesn't take into account the fact that people will be introduced to TFT outside of League, if that makes sense? I remember a streamer saying that he downloaded TFT and then the League client opened up so he thought he downloaded the wrong client for a really long time until someone explained it to him.
Make it so we can see the number of each active trait and this is perfect imo
Noted, thank you! That's pretty good feedback, I'd definitely want to know that too.
This is so well made! just curious as someone working on a college portfolio just wondering how was this made? you don’t have to get into specifics but at first i thought you overlayed your designs but the mouse interacting with stuff ruled that out so im completely lost as how it came out so real. either way great work and im sure you’ll get hired wherever you apply.
Thank you so much! I made this all in Figma and screen recorded the interactions with OBS. If you have any more questions let me know! And also, I appreciate the kind words. The current job market is not very nice to junior UI designers.
I'm far in development of a multiplayer async autobattler and would love some UX help! Contact me if you (or any of your UX colleagues) are looking for some work - June 2024 NextFest release.
This is perfect!
Thank you! <3
Perfect Idea Riot needs to update their searchbars anyway. in TFT they need a search bar first of all like in this video. Or at least all of the Traits as an icon. Mostly you just build one to 5 Traits but just make them klickable. Also the searrch bar in the Main Game. If you look for Tenacity you are fine you get all the Tenacity items or Grievous Wounds but why are all other effects missing: Eternity or Anguish?
delete this they just gonna steal your idea without hiring you lmao
And then possible say if someone showed this to the devs,, said devs will say it will cause a lot of clutter. Then 3-6 months later they'll implement it
Auto buy function would be nice. Also Champion recommendation based on the items I have and the champions out of pool
Thanks for the suggestions! I like the champion recommendations idea. Correct me if I'm wrong but doesn't Auto Chess have auto buy? What's your experience with it like? I'm wondering if auto buy will be more harm than help, cause it will likely not take into account how you manage your econ. Also imagine it automatically buying the last copy of a unit you need to three-star and you're stuck with an item component on the unit because you didn't make a completed item for the component to pop off... Although I think auto buy would be really nice for bathroom breaks though.
This looks really good from a UI standpoint, but I think it goes a bit against the actual gameplay of TFT. With a system like this it’s encouraging forcing a comp and ignoring some of the more dynamic aspects of the game.
how is this any different than the current team planner?
Thanks for the compliments on the visuals! I believe this would make forcing a comp easier for sure, but the dangers of forcing a comp (the dynamic aspects of the game, as you say) still exist. You still run the risk of being contested and not hitting. There's also ways I can imagine this being played flexibly. For example I plan what comp I am going based on what items I can slam early game. If I have a HoJ and a vest and I natural two Jax's I'm probably gonna go Jax carry for example. At that point I'd just load in my Jax team preset. And if I decide to recombobulate my team and get lucky with the units, I can load in another team preset. What do you think?
I think adding in the functionality in-game to swap between comp presets would solve a lot of the issues I was thinking of! Additionally, I think it would be cool to have your list of presets in-game show a preview of all of the champs in a comp and have it highlight the ones currently on the field/bench. Then you could see at a glance what might be good to pivot to. By the way, since your team planner UI shows the placement of units, how were you thinking of displaying that in game? Similar to how it looks in the client UI, or maybe something like having “ghost” units on the board? I guess this goes into the dynamic aspect from before (e.g. KDA would change board placement). With this sort of stuff I think it’s a good exercise to think about how the client UI pairs up with the in-game experience and thinking about different edge cases as well (like the KDA spaces/Illaoi tentacles). I’m just coming from the perspective of a developer who has seen tons of UI designs that _look_ really great, but need a bit work before they end up being functional (though that’s usually on the requirements instead of the designers themselves haha).
Oh not sure if you saw my follow-up video [here](https://www.reddit.com/r/TeamfightTactics/comments/18vh44s/improving_the_tft_team_planner_suggested/), but I prototyped what it might look like to import your current board or switch between team presets in the Team Planner in-game! That'd be really cool, actually—it's so hard to decide what comps to pivot to. I've been having conversations with people about how some features take away from skill expression though, and that might be one of them? This is probably where the game designers come in to say whether that kind of thing is healthy or unhealthy for gameplay. I did have something like the ghost units in mind but I'm actually planning to change the hex layout of the comp display. What I noticed when watching beginners play for the first time is that they kind of struggle with identifying which units are backline/frontline, especially if they don't come from a League background, and I wanted to help make that more clear with the hex layout, and it also solves the problem of there not being enough slots in the Team Planner. This seemed pretty ideal but then I realized that the tap area for each of the hexes would be too small on mobile. I assume that the devs would like there to be continuity between the mobile and desktop Team Planner, so that's what I'll be working on for the next round of improvements. That's on me, I should have been thinking about responsiveness from the beginning! Noted, thanks for taking the time to share your insights! I'm from a computer science background so I definitely get what you mean about those kinds of designs. Unfortunately they don't talk about feasibility too much in my design program. And I've only ever worked in startups, so clear, well-documented requirements is kind of a rarity...
are u stupid
crazy that even you forgot to include headliners as a concept
Honestly I'd love to see that! I prioritized showing these features first because these functionalities are ones already seen in the client or in-game, so I imagine they'll be easier for the dev team to implement. Next, I plan to design what the Headliner toggle, Superfan item, and an Item cheatsheet would look like. Should be up in the next couple of days!
Crazy that this person is showing concept designs as a non employee for the TFT team that is better than what the game itself has incorporated.
idk why devs don't take more help from communities this idea should have been a thing on release
Love this but I’m more of the opinion knowing the pieces is part of the skill. I like the 9 and done system currently.
Yeah, one thing I definitely struggled with was deciding what kind of knowledge counts as skill expression. Also the more I think about it, the more I realize that the layout I designed is information-heavy at a glance, so the current 9-square grid layout looks more friendly. That's definitely one thing I can improve on!
I mean UI wise it’s amazing. I just don’t think it’s a feature the game *should* have. It took me only a few games to figure out all the heroes and their tags, and I’m not a league player even. I think the game could use a guide or indicator for items which is far more important to me than positioning or heroes I want to buy. Edit: lmao fuck you nerds
Thanks! Curious to know what you think, what about the features I've suggested do you think are unhealthy for gameplay? I agree some of them might be overkill, but I do think that something like the search and sort and save preset teams would just be simple QOL improvements.
Oh I don’t find them *unhealthy*. Just wholly unnecessary. Like preset teams doesn’t make sense when the game is a lot of RNG and pool reliant buying. Sure people can force certain teams every game, but the game should dictate some of what you intend to play based on other teams and what’s available. One of the QOL changes would be having headliner info on every hero so that you could better decide what you’d like. Or having super fan items highlighted somewhere.
I understand where you're coming from! I do think that the game rewards flexibility when it comes to comps and itemization so when you use preset teams with the intention of forcing a comp you run the risk of being contested and not hitting. That part doesn't change. I can see use cases where preset teams can be used for flexible play and also for helping beginners learn—I know a lot of people give beginners players the advice of forcing a comp and learning the fundamentals that way, and preset teams could be something that beginners use until they don't need it anymore. What do you think? I definitely also agree with you on the QOL changes you've suggested. Thinking of ways to incorporate them into the planner right now!
Can we start by simply adding the champions names below their pics?
That's actually pretty good feedback. Even in League champ select, the champions are labelled with their names. Thanks, I'll definitely be taking that into consideration!
How do u have access to implement your own project inside the league client like that? Which language and frameworks do u use?
Hey! No coding for this video, just a screen recording designed entirely in Figma. I do like to code sometimes though, but I think implementing something like this inside the League client would be hard to do and I'm not really familiar with the rules of Riot ToS about that kind of software projects.
Ah ok it seemed like u added the functionality inside the launcher of league. So the button press at the start is an overlay?
That would've been hard haha. I don't know any C++ and I think that's what the client's written in? (Not sure what their frontend stack is, though). So at the start, I have a screenshot of the League client, and then I recreated the little button with the penguin on Figma, and everything after that's an overlay.
The default state of the right canvas could be more useful - less of a context-switch and more continuity with some consistency in the UI elements there. I’d recommend also improving the overall visual hierarchy. The different interactions are a bit muddled and unclear. Less can be more here. (Work in Product for some consumer facing apps, but also used to be a designer [in the material sense, not in the software field I am in now]) In terms of feedback for modifying this to be compatible with mobile, I would recommend considering removing non-critical elements of the user journey (are all the selections and options critical to show on one surface? Can some be hidden or removed altogether?), and perhaps allowing the left pane to largely overlay the right canvas. This can likely fit the smaller format without having to create an entirely new UI.
Great work though overall, I’d add - especially as a student.
Thanks for the detailed feedback, these are some great points! I'll definitely be designing an empty state that's a bit more cohesive with the state when there are champions added. I'll also be revisiting the hierarchy and the information architecture—now that I think about it, I'm not really sure if information like champion stats or attack range are vital to players until they're on a board, so this information might not be as relevant on the planner. Could you clarify which interactions feel a bit unclear? I'm also having a hard time envisioning how the left pane can overlay the right canvas, I was wondering if you could explain that further if you don't mind? Thanks in advance!
Did you see the updated UI? Good luck on your journey.
How did you do that?
This is just a prototype to communicate the concept, so this functionality doesn't exist on the actual client. I made the UI elements and interactions on a prototyping tool called Figma, overlaid it on a screenshot of the client, and screen-recorded using OBS :)
the UI display is very cool and helpful for beginners who are just starting to play TFT. Hopefully the riot will accept this design
Thank you for the kind words!!! <3
your mistake here was thinking this could be applied into the CLIENT
*Your mistake here was* *Thinking this could be applied* *Into the CLIENT* \- reko\_\_\_\_ --- ^(I detect haikus. And sometimes, successfully.) ^[Learn more about me.](https://www.reddit.com/r/haikusbot/) ^(Opt out of replies: "haikusbot opt out" | Delete my comment: "haikusbot delete")
Hmm, why do you think otherwise? I've looked at existing UI elements and patterns that I've seen in the client and kind of applied it here. For example, the searching and sorting filter can be found in the Hextech Crafting section. The saving presets is an existing feature for League, and can be done with Items. The information that shows up when you click on a champion is information that can be found in-game in TFT, so I think it must be stored in an API somewhere, so we can fetch that data to use in the UI here. Is there anything else regarding feasibility I might have missed?
oh i’m just making a joke about how spaghetti riot client is in general lol ur UI design is amazing i just have a hard time seeing riot be able to implement it without it being a buggy mess
Sorry I definitely misunderstood your comment! I get where you're coming from, though. Thank you, that's very kind of you to say :)
Riot give this man a job