VIEW
TFT Magic N' Mayhem cover

TFT Magic N' Mayhem

UI · UX Design Riot Games · 2024

Visual assets for TFT Set 12, including the creation and implementation of Charms, the set's defining mechanic.

Magic N' Mayhem introduced Charms as Set 12's primary mechanic. They are small, randomised spells offered to players each round. Building the visual language for Charms meant designing badges, wand icons, tooltips, and the trait tracker indicator from scratch, then integrating them consistently across the shop, scoreboard, and champion inspect. The work also included a new free shop reroll button, updated stat icons for Durability and Damage Amplification, augment icon implementation, and the Set Intro Modal.

Role UI / Visual Designer
Game Developer · UX / Interaction Designer
Tools Figma · Photoshop · Illustrator
Procreate · Hextech Engine · Perforce
Google Suite · Notion · Jira
Year 2024
Client Riot Games
Key Deliverables
01 — Charms Badges Scoreboard
Charms Scoreboard Badge
Scoreboard Badges Interaction
02 — Shop & Champion Reroll · Inspect
Free Shop Reroll Button
Champion Inspect
03 — Visual Assets Icons & Evergreen UI
Generic Visual Assets
04 — Set Intro Modal Design & Spec
Set Intro Modal
Set Intro Modal Spec

All images are property of Riot Games.

Next Project

TFT Item Bench Visual Updates

2024 · UI · UX Design ↗
Contacts

Thank you for reading. For any question please feel free to contact me :)