Overview
In Teamfight Tactics, the shop refreshes on a timer. To make quick decisions, players must calculate trait breakpoints in their heads. I rebuilt the TFT shop HUD as a working React prototype, designing a signalling layer that answers one question instantly: does this purchase cross a trait threshold?
The Problem
Trait breakpoints are the core progression mechanic. Currently, players memorize thresholds or use second-monitor trackers under extreme time pressure. The interface needs to absorb these memory tasks without adding visual noise.
UX Solution
I designed a strict, rank-based signalling system for each shop card:
- Crossing (High Priority): Buying the champion triggers a trait upgrade. The indicator matches the tier color (bronze, silver, gold, prismatic).
- Linked (Low Priority): The trait is in play, but the threshold is not met. A subtle teal marker.
- Neutral: No visual treatment.
The system resolves multiple traits into a single visual signal per card, preventing UI clutter and protecting the player’s cognitive load.
Interactive Prototype
Rather than static screens, this solution was built in React using real Set 18 data, working economy, and live board states to test edge cases like duplicate champions.
View Repository on GitHub:
Notes
Concept project built with React and TypeScript. Not affiliated with Riot Games.
