Teamfight Tutor
Master Teamfight Tactics with confidence.
Role: Product Designer · UX/UI Designer · UX Researcher
Timeline: 8 weeks
Team: Solo project, 0→1
Tools: Figma · Adobe Illustrator · Google Forms
I designed Teamfight Tutor, a companion app for Teamfight Tactics that helps players quickly access guides and meta updates without leaving the game. Players often struggled with digging through different websites mid-match, which slowed their decisions and hurt their climb.
Cut decision time by surfacing comps, item builds, and patch updates in just a few taps.
Designed for focus with layouts optimized for use mid-game, where clarity and speed matter most.
Built from research with surveys and Discord interviews to validate player pain points and guide iterations.
The result? An app that gives players fast, in-context access to the strategies they need, helping them play with more confidence and less distraction.
Background
Teamfight Tactics is a Competitive Strategy Game.
In Teamfight Tactics (TFT), players build teams by drafting characters, equipping items, and placing them on a board. Once a round starts, the team battles automatically, so the player’s role is to manage strategy, adapt quickly, and outlast seven other competitors.
The Problem
Why Playing Smart Feels So Frustrating?
TFT updates fast. Most tools don’t keep up.
TFT players lose time and focus when they alt-tab to external sites mid-match for builds and meta updates. Every patch shifts balance, so staying competitive is hard without quick, in-game guidance.
Frustration climbs when:
Builds are hard to find mid-match
The meta changes too quickly to remember
New players feel overwhelmed (no tutorial)
alt‑tabbing between the game and a browser to find builds
The Solution
No Missed Plays.
Team Fight Tutor puts the right info at your fingertips, fast, clear, and distraction-free.
-
The home screen shows options to view patch notes and trending comps, so you an instantly spot shifting strategies
-
Pin favorite comps in a customizable strip for one-tap access, optimzied for iPhone portrait and iPad landscape.
-
For concepts such as economy, positioning, and synergy breakdowns with step-by-step instructions.
-
A high-contrast, minimalist layout adapts between iPhone (single-column feed) and iPad (two-column grid), ensuring key info is front and center.
-
In-app forums surface trending discussions, let users save tips, and foster peer support
Key Interactions
How Team Fight Tutor supports players.
Navigating to trending compositions
Designed for players who don’t have a second screen or time to alt-tab, this puts everything they need in one place for easy and fast access.
Navigating the TFT guides & tutorials
New or casual players don’t want to scroll through long articles mid-match or favorite them for later if they want to study up, this makes learning fast.
Community interaction
When you want peer insights, head to Community, browse trending threads, save a pro’s tip, or drop your own strategy, all without ever losing focus on your device.
Navigating to trending compositions on the Ipad
Navigating the TFT guides & tutorials on the Ipad
Community interaction on the Ipad
Final Screens
Value & Audience
Why Team Fight Tutor Stands Out
-
Tailored layouts for mobile, no clunky web wrapper, just smooth, device-optimized experiences
-
Bite-sized, visual lessons built for glances so players don’t miss a beat.
-
One-tap location signature comps and builds, so go-tos are always front and center.
-
In-app forums let players share, save, and discuss strategies without ever leaving the app.
Impact
User Research & Insights
Built With Real Players in Mind
I sampled 54 people, including mutuals and anonymous players from public Discord servers and Reddit.
Found that the rank distribution of participants mirrors live servers (the majority are beginners)
Ask questions such as, “When you switch away from TFT to look up info (builds, items, patch notes), how disruptive is it to your gameplay?”
Key Takeaway: Most players aren’t experts, which means the majority struggle with fast-changing metas, item memory, and comp decisions under pressure.
What Players Told Me
Across ranks, players wanted a simpler way to keep up.
What Players Told Me
~90% of players want info in under 3 taps. (separate from top challenge question) → guided simplified nav + larger tap targets
Meta shifts every 2 weeks → patch notes + trending comps prioritized
Tools are scattered → need for an all-in-one hub (no more bouncing between sites)
Players want personalization → saving go-to comps became the Favorites Hub
How It Informed My Design
These insights directly shaped the information hierarchy, navigation patterns, and tone of voice, making the app fast, intuitive, and player-first.
Design Process
From Insights to Design
From sketches to hi-fi, every step tied back to player needs.
-
Early Concepts
I explored different layouts for how players could access comps:
-Dropdown menu → compact, but required 5+ taps
-Bento-style home screen → visual tiles, one-tap access
Player feedback: “I want my comps in one place, easy to find.”
Decision: I moved forward with the bento-style home screen, aligning with survey results where ~90% of players said they wanted info in under 3 taps.
-
Wireframes
Wireframes tested different information hierarchies:
Should patch notes appear first?
Should guides be nested or visible on the home screen?
Insight: Players said the meta shifts every two weeks and they “scramble to keep up.”
Decision: Patch notes + trending comps were prioritized on the home screen, while guides were accessible but secondary.
-
Hi-Fi Wireframes
As I refined visuals, I focused on:
Simplicity → minimal color palette + high contrast for clarity under time pressure
Customization → Favorites Hub and portrait/landscape layouts
Distraction-free tone → clean typography and no extra flourishes
Why: These decisions mapped directly to survey insights about frustration with clutter, scattered tools, and difficulty recalling item synergies.
Design Iterations
Reflection
Seeing players zip through matches without missing a beat was the ultimate power‑up. In just three weeks, I crafted Team Fight Tutor to feel like your secret weapon, intuitive favorites, instant meta alerts, and a buzzing community spot built on real gamer stories. Along the way, I learned that tiny tweaks (think thumb‑friendly buttons and ultra‑snappy load states) can turn a “meh” experience into a “heck yeah!”
Hypothetical Impact
Engagement Boost
+70% in daily users with 12‑minute average sessions, proof that lightning‑fast info keeps players glued.Forum Frenzy
+40% more posts and 2 replies per thread, your in‑app chat room is now a nonstop strategy jam.Sticky as Glue
85% one‑month retention, when you fix a real pain point, players can’t quit you.
Future Updates
AI‑Driven Wins
Smart comp suggestions based on live match data, your personal TFT coach.
Zero‑Tab Overlay
Peek guides right on your game board, no more frantic alt‑tabbing or using multiple devices.
Community Showdown
Live chat rooms, comp‑building contests, and in‑app rewards to turn tips into bragging rights.
Building Team Fight Tutor taught me that great design is about understanding the player’s journey—and then sprinkling in enough fun and flair to keep them coming back for more.
More of My Design Adventures
-
![]()
The Alvarado Project Website Redesign
Client Work · Product Design · UX/UI Design· Information Architecture · Content Strategy · Branding
Worked with and rebuilt The Alvarado Project’s site with a clear IA, integrated donate & shop flows, and a volunteer-friendly CMS, making the website engaging, shoppable, and easy to maintain.
-
![]()
MediaQ
Product Design · UX/UI Design · Branding · Interaction Design
A simple, organized way to keep track of the movies, shows, and books you’re into. MediaQ lets you sort what you’re watching, what’s next, and what you want to share, all in one place.
-
![]()
AppointRx
Product Design · UX/UI Design · Healthcare & Accessibility · Branding
A patient-focused app that simplifies appointment scheduling and communication with independent providers and pharmacies designed to reduce confusion and improve the healthcare experience.
-
![]()
Visual & Graphic Design Projects
Client Work ∙ Visual Design ∙ Graphic Design ∙ Branding ∙ Typography ∙ Marketing ∙ Social Media ∙ Story Telling
Check out my visual design projects!
