Teamfight Tutor

Master Teamfight Tactics with confidence

Beginners and veterans alike struggle to keep up with the ever-changing strategies of Teamfight Tactics. Teamfight Tutor is my answer: a sleek companion app that delivers bite‑sized guides, meta updates, and community tips, right at your fingertips, so you can stay focused on the board, not the browser.

Role

UX Designer

UX Researcher

Visual Designer

Skills

User & Competitor Research

Wireframing

Prototyping

Usability Testing

Branding

Visual Design

Timeline

8 Weeks

The Challenge

Teamfight Tactics players who do not have a second monitor waste precious seconds alt‑tabbing between the game and a browser to find builds and meta updates, disrupting gameplay and causing frustration. Without a unified, in‑game reference, newcomers face a steep learning curve and experts struggle to stay competitive.

Every new TFT patch brings fresh champions, items, and synergies. Players juggling their desktop game and a web browser for reference often miss out on critical moments. Frustration climbs when:

  • You can’t find the right build mid‑match

  • The meta shifts faster than you can remember the most optimal synergies and items

  • Beginners feel overwhelmed by the game’s depth

alt‑tabbing between the game and a browser to find builds

The solution is Team Fight Tutor

No more alt‑tabbing, no missed plays. With

  • Live Insights
    The home screen shows options to view patch notes and trending comps, so you can instantly spot shifting strategies

  • Favorites Hub
    Pin favorite comps in a customizable strip for one‑tap access, optimized for iPhone portrait and iPad landscape.

  • Tutorials
    Economy, positioning, and synergy breakdowns with step‑by‑step instructions.

  • Responsive, Distraction‑Free UI
    A high‑contrast, minimalist layout adapts between iPhone (single‑column feed) and iPad (two‑column grid), ensuring key info is front and center.

  • Integrated Community Feed
    In‑app forums surface trending discussions, let users save tips, and foster peer support.

Team Fight Tutor puts the right info at your fingertips fast, clear, and on any device so you can ditch the tab‑trap and focus on winning.

Design Flows & Prototypes

Team Fight Tutor was designed around this core insight:

Staying ahead in Teamfight Tactics requires quick access to the right information while playing the game.

Design Flows

Navigating to trending compositions

With a single tap on “Trending Comps,” you glide from your home screen into a visual breakdown of the top team compositions, placements, synergies, and item tips all in under three seconds.

Users can tap on the drop-down list to view:

  • Champion Placements: A visual guide showing the optimal positioning of champions on the battlefield.

  • Synergies: Clear icons and descriptions of the synergies that make this composition powerful.

  • Champion List: A roster of the champions included in the Story Weaver comp.

  • Stage buttons: To see what the comp positioning and champions would look like at each stage of the game.

  • Kayle Items: Specific item recommendations for Kayle, the centerpiece of the composition, with tips on why each item is crucial for maximizing her potential.

Navigating the TFT guides & tutorials

Need an economy refresher? Jump to the Guides tab, filter by “Economy,” and watch a bite‑sized tutorial or video walkthrough, no more hunting through long articles.

  • Stage-Specific Tips: Advice on maximizing your economy at every game stage.

  • Video Tutorial: An option for a video walkthrough is available for visual learners.

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

What Makes Team Fight Tutor Unique

  • Mobile‑First Native iOS
    Tailored layouts for iPhone and iPad, no clunky web wrapper, just smooth, device‑optimized experiences.

  • Flash‑Guide Tutorials
    Bite‑sized, visual lessons built for sub‑two‑second glances so players don’t miss a beat.

  • Favorites Tab
    One‑tap location your signature comps and builds portrait or landscape, your go‑tos are always front and center.

  • Integrated Community
    In‑app forums let players share, save, and discuss strategies without ever leaving the app.

Target Market

PC gamers who play Teamfight Tactics and similar auto‑battlers seek a dedicated mobile companion to level up their desktop experience.

Player Testimonies

Beginner

“As a new player, I need guides handy while playing, but I don't have the setup to do that easily.”

Expert Player

“I think an app like this would be helpful. Currently people use websites as an companion while they play so this could be an alternative for people without 2 monitors or people who just don’t know about the websites”

Casual Player

“I play a few games a week, so I can't always remember the best item combinations.”

Target Audience

Beginners: Step‑by‑step clarity to learn TFT’s mechanics without overwhelm.

Competitive Players: Instant meta insights and build lookups for that extra edge.

Laptop or Single-Screen Players: users crave distraction‑free support on phone or tablet.

Impact

Revenue Potential
With a mobile‑first focus and flash‑guide model, there’s clear upside for in‑app purchases, sponsorships, and targeted partnerships.

Scalable Growth
Modular flows support easy roll‑out of future features, AI‑driven comp suggestions, in‑game overlays, subscription tiers, without overhauling the UI.

Improved Retention
Personalized feeds and community features create habit‑forming use.

Process

1. Research & Insights
Surveyed TFT players to uncover pain points around speed, meta churn, and personalization needs.

2. Sketches & Ideation
Rough layouts of home feed, guides, favorites, and community flows.

3. Wireframes & High-Fidelity Mockups
Low‑fidelity prototypes for iPhone single‑column vs. iPad two‑column layouts, tested for scannability. Polished screens in Figma, refining typography, iconography, and spacing.

4. User Testing & Iteration
Remote sessions with players; tweaked navigation labels, tap targets, and contrast based on feedback.

5. Refinement & Handoff
Finalized design specs and assets for a hypothetical iOS development team, ensuring smooth implementation.

User Research: What Players Told Me

I kicked off this project by talking to the people who matter most, actual TFT players. Picture late‑night Discord chats and quick survey pop‑ups during lobby waits, all aimed at uncovering where players get stuck and what they crave.

Key Insights

  • Speed Is King: 90% of players said they needed information in under three taps.

  • Patch Anxiety: Frequent meta shifts leave everyone scrambling for the latest comp.

  • All‑In‑One Demand: No one wanted to juggle multiple sites they wanted champions, items, and tutorials all in one place.

  • Make It Personal: Players light up when they can save their own go‑to builds.

Armed with these stories and stats, I knew Team Fight Tutor had to be fast, always up‑to‑date, and built around each player’s personal favorites, keeping the focus on the board, not the browser.

Design

With these player‑driven insights in hand, I shifted gears into design, translating feedback into sketches, wireframes, and polished mockups before refining through iterations.

Design Apporach

Players need a simple, customizable app for instant access to TFT strategies and updates. A quick-reference app featuring favorites, meta updates, and detailed guides on champions and items.

  • Sketch

    Initial idea and layout of the app along with notes on features, pages, and interactions.

  • Lo-Fi Wireframes

    Outlines the app’s basic layout, focusing on navigation and content areas for a clear user experience.

  • Hi-Fi Wireframes

    Details the final design such as layouts and colors, showing how the app will guide players on mobile devices.

Visual Design System

Overview of typography, color palette, logo, and core UI components that ensure a cohesive, user‑friendly brand experience.

Design Iterations based on user feedback

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.

    Click Here

  • 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.

    Read Bio

  • 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.

    Read Bio

  • Visual & Graphic Design Projects

    Client Work ∙ Visual Design ∙ Graphic Design ∙ Branding ∙ Typography ∙ Marketing ∙ Social Media ∙ Story Telling

    Check out my visual design projects!

    Click Here