If you couldn't tell already, I am a huge gamer! This UI sprint is dedicated to League of Legend's Teamfight Tactics (TFT) game. Being a very casual LoL player, TFT's item feature has always been confusing to me.
This sprint was a personal journey to see how I could create a resource for new and tenured players that offered support for TFT's item building.
Mockups
The Problem
Figuring out what items to build on what champions is difficult for non-LoL players and still challenging to some LoL players.
Things I know about items and champions
• Overall a very high-level understanding of items and champions
• Tear and rod = magic item (AD)
• Armor and belt = armor/tank item
• TFT has added item recipes to the tooltip so I know what items make what
• Usually, the champion’s synergy hints at what items it will need
• Bodyguard = tank items
• Arcanist = magic items
• Tear and rod = magic item (AD)
• Armor and belt = armor/tank item
• TFT has added item recipes to the tooltip so I know what items make what
• Usually, the champion’s synergy hints at what items it will need
• Bodyguard = tank items
• Arcanist = magic items
Things I’d like to know about items and champions
• More technical/meta information that would take me to the next level
• Which champions are AD (Attack Damage) and AP (Ability Power)?
• Which items are for AD champs and which are for AP champs?
• Which items are most built on specific champions?
• Can you recommend to me where to put an item?
• Which champions are AD (Attack Damage) and AP (Ability Power)?
• Which items are for AD champs and which are for AP champs?
• Which items are most built on specific champions?
• Can you recommend to me where to put an item?
Inspiration and Context
I spent some time talking to my competitive League friends and conducted some observations of one of them playing TFT and League. Overall I was looking for inspiration from League of Legends since they do have an item recommendation feature. I knew it wouldn't translate perfectly to TFT, but it gave me context for how Riot may want to treat their items.
How much information is too much information?
This is the tricky part. What level of information would be helpful enough to provide guidance without defeating the fact that item building is a key strategic element of TFT?
A table summarizing my ideas to tackle TFT's item learning curve.
Giving Life to my chosen idea
After careful consideration, I decided to go with Idea 4 - an out-of-game Item Planner Tool inspired by the Comp Builder.
Versions A and B
Versions C and D
Version E
More thought out versions C and E
Digital sketches of C.2 made in Excalidraw
Final UI Mockups
Item Builder mockup for IE
Item Planner mockup for GS
Item Planner mockup for IE
Shoutout to JeasonQiu on the Figma Community for having already created a lot of the LoL design elements. I used the basic blocks and typography to make the mockups.
The mockups above would be located out-of-game, on the TFT home page. Accessible in a similar fashion as the Comp Builder on mobile TFT. I would also recommend that the Comp Builder be added to the desktop version.
