TFT COSMETICS ACQUISITION EXPERIENCE DESIGN


Redesigning the Teamfight Tactics store to give players more agency,

clarity, and delight in collecting cosmetics.

. . . . . .

— DESIGN SCOPE

Complete Store UI Overhaul

New Currency Design

Iconography



— ROLE & INVOLVEMENT

Creative Direction

Lead Visual Designer

UI Designer (IC)



— COLLABORATION

Illustrator

Rendering Artist



— PLATFORM

PC and Mobile


Over the years, Teamfight Tactics (TFT) has continued to grow and evolve, introducing a wide range of cosmetic content that plays a key role in player identity and expression. As the catalog expanded, so did the need for a more structured and engaging way for players to discover and obtain their favorites, providing greater control, clarity, and agency in the acquisition experience.


The new Rotating Shop was designed to meet that need, enhancing accessibility, improving clarity, and delivering strong visual impact in how players collect and acquire cosmetics.


As the Lead UI and Visual Designer on this project, I worked closely with the product team, UX designers, and engineers to craft a reimagined TFT store that functions as both a practical hub and a visually immersive showcase.

Visual Clarity & Immersion

The revamped design features large preview cards, animated or video previews, and high-quality splash art, allowing players to see items in detail before purchasing. Each item tile is built on a scalable visual system that clearly communicates key information, including rarity, discounts, availability, and featured highlights.


This transformation turns the store from a static catalog into a gallery-like experience that showcases TFT’s stunning cosmetic art, making item discovery more engaging and immersive.

Redesigned TFT Mythic Store with full splash artwork display and integrated in-client video previews.

Mythic Store, Teamfight Tactics

Seasonal Store, Teamfight Tactics

Catalog Store, Teamfight Tactics

Mythic Store, Teamfight Tactics

A Multi-Shop System

Mythic, Seasonal and Catalog Shop –

The shop structure gives players agency in how they spend and collect, adding both urgency and flexibility to their choices. By organizing the shops into structured tiers and applying a clear visual hierarchy, the system enhances players’ perception of value and progression.


Each shop was crafted with a unique visual identity that signals rarity and value at a glance. Through purposeful use of color, iconography, textures, and motion, players can instantly distinguish shop types and perceive the hierarchy of rewards. The result is a more engaging, intuitive, and immersive shopping experience

A underlying robust grid system is designed to support varying content types & sizes.

Design for flexibility and long-Term


A robust and flexible grid system was designed to define the store layout, allowing product designers to assign different content types to the desired tile size or orientation and plan the item layout without restrictions. Varied tile sizes integrate seamlessly within the grid, forming a cohesive and adaptable visual structure.


The system enables product managers and future teams to scale and evolve content confidently, supporting a wide range of tile compositions while preserving visual clarity, rhythm, and cohesion.

. . . . . .


All project materials, visuals, and images are the property of Riot Games.

Presented here for portfolio and professional showcase purposes only. Reproduction, distribution, or use without permission is prohibited.

© Mun 2026