Team Fight Tutor

Master Teamfight Tactics with this companion app for quick tips and strategies on any device!
Team Fight Tutor is a responsive app that simplifies TFT with in-depth guides, and quick access to your favorite champions and items, making it the perfect companion for players of all levels.
My Role
UX Designer
Visual Designer
Product Manager
Skills
Wireframing Prototyping Usability Testing
Branding
Visual Design
Tools
Figma
TimeLine
3 Weeks

OVErview

Problem

TFT is challenging and frustrating without knowing compositions and item builds.
Many beginners & and novices in Teamfight Tactics (TFT) struggle to understand the game's mechanics, optimal team compositions leading to frustration and hindering their enjoyment of TFT.

Solution

Team Fight Tutor is a TFT companion.
Team Fight Tutor was born from my passion for creating tools that enhance the gaming experience. This is a TFT companion that provides comprehensive guidance and support for TFT, offering tutorials, champion guides, meta updates, and accessible resources to enhance gameplay mastery and engagement for players of all levels.
    Staying ahead in Teamfight Tactics requires quick access to the right information while playing the game.

    Research

    User Research  

    Is there a need for a TFT companion app for phones and tablets while playing the game on the computer
    I conducted user surveys to understand the need for a TFT companion application for phones and tablets while playing the game on the computer

    Key Insights

    Players need a simple, customizable app for instant access to TFT strategies and updates.
    These insights shaped the app's design to be user-friendly and responsive to player needs.
    • Quick Access Matters: Players need fast, in-game access to guides and strategies.
    • Meta Shifts Are Challenging: Frequent changes make it hard for players to stay updated.
    • Beginners Need Simplicity: New players struggle with TFT's complexity and need clear guidance.
    • Everything in One Place: Users want all their resources in one, easy-to-navigate app.
    • Customization is Key: Players value the ability to personalize their experience.

    Design

    Design Approach

    A quick-reference app featuring favorites, meta updates, and detailed guides on champions and items.
    The concept centered on a quick-reference app with features like a favorites section, meta updates, and detailed guides on champions and items.
    • The app’s home screen displays information such as favorites, current meta compositions, and key items for effortless access during gameplay.
    • Users can quickly access frequently used guides and resources through a dedicated favorites feature.
    • Simplified and quick-to-navigate UI elements ensure users can easily reference important information without disrupting their game experience.

    Design Process

    Sketch

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

    Low-Fidelity Wireframe

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

    High-Fidelity Wireframe Mobile

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

    Visual Design & Branding

    High-Fidelity Wireframe Tablet

    Responsive version of mobile app for tablet.

    Select Iterations Based on User Feedback

    Design Solution

    Navigating to Trending Compositions

    On the Team Fight Tutor home page, the "Trending Compositions" section is prominently displayed for easy access. Users can quickly scan through the most popular team compositions, each represented by a clear, visual thumbnail and a brief description.

    Users can tap on the "Story Weaver" comp 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 to Trending Compositions In Action

    Quick navigation from the home page to the "Story Weaver" comp, revealing champion placements, synergies, and Kayle’s top items in a few taps.

    Just drag, drop and make your first MRR faster.

    The incorporation of state-of-the-art technology in Elements_Efi has allowed for a level of precision and accuracy that was previously unattainable, making it an invaluable tool for professionals and hobbyists alike.

    LEARN MORE

    Navigating the TFT Guides & Tutorials

    The "Guides" tab is home to a variety of resources, covering topics from champion synergies to advanced strategies. Users can easily explore these guides from the sword icon in the navigation bar.

    In-Depth Guidance:

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

    Navigating the Economy Management Guide in Action

    This demonstrates the quick navigation from the "Guides" tab to the "Economy Management" guide, showcasing stage-specific tips and a video tutorial option—all just a few taps away.

    Just drag, drop and make your first MRR faster.

    The incorporation of state-of-the-art technology in Elements_Efi has allowed for a level of precision and accuracy that was previously unattainable, making it an invaluable tool for professionals and hobbyists alike.

    LEARN MORE

    Community Page

    The Community page is designed for quick, meaningful interaction among TFT players.

    It features:

    • Trending Posts: Highlights popular discussions and strategies.
    • Discussion Threads: Easy-to-navigate threads for sharing insights.
    • Post Creation: Simple tools for users to contribute their own tips.
    • Favorites: Options to engage with and save valuable content.

    Responsive Tablet Design

    Experience Team Fight Tutor on the iPad with a responsive design that makes it easy to access guides, trending comps, and the forum all optimized for a larger screen.

    Trending Compositions

    Browse top team comps on tablet with a easy-to-navigate layout for quick strategy updates on a bigger screen.

    TFT Guides & Tutorials

    Quick access to all guides and tutorials.

    Community Page

    Engage with fellow players easily on the Community Page forums.

    Just drag, drop and make your first MRR faster.

    The incorporation of state-of-the-art technology in Elements_Efi has allowed for a level of precision and accuracy that was previously unattainable, making it an invaluable tool for professionals and hobbyists alike.

    LEARN MORE

    Just drag, drop and make your first MRR faster.

    The incorporation of state-of-the-art technology in Elements_Efi has allowed for a level of precision and accuracy that was previously unattainable, making it an invaluable tool for professionals and hobbyists alike.

    LEARN MORE

    Final Screens

    Just drag, drop and make your first MRR faster.

    The incorporation of state-of-the-art technology in Elements_Efi has allowed for a level of precision and accuracy that was previously unattainable, making it an invaluable tool for professionals and hobbyists alike.

    LEARN MORE

    Reflection

    Building Team Fight Tutor was a great experience. The goal was to make Teamfight Tactics easier for everyone by offering simple guides and real-time updates. I focused on creating a design that works well on any device and included features like favorite champions and a lively community forum based on what users wanted. In the future, adding features like personalized recommendations and more community options could make the app even better. Overall, this project taught me a lot about designing tools that truly help users.

    Metrics

    Although these metrics are hypothetical, they illustrate the potential impact of the app.
    ‍

    • User Engagement: A 70% rise in daily active users and 12-minute session times indicate strong user interest and engagement.
    • Community Interaction: A 40% growth in posts and 2 replies per post reflect a vibrant, engaged community.
    • Retention Rate: An 85% retention rate after a month suggests long-term user value and satisfaction.

    These metrics illustrate the app’s potential impact and success in meeting user needs. Future updates could include personalized recommendations and enhanced community features to further improve the app’s value.

    Future Enhancements

    While this project still has a long way to go in the future I plan to add more content such as champions, items list as well as the favorites page. Looking ahead, potential enhancements for Team Fight Tutor could include integrating AI-driven recommendations for team compositions based on real-time gameplay data and user preferences. Additionally, I would like to add an overlay feature for those gaming on their phones or tablets to be able to see the guides as they are playing. These enhancements aim to continuously improve the app's utility and value, staying ahead of user expectations and evolving gaming trends.

    © 2024 Julie Guan
    jdguan1@gmail.com
    This portfolio is best viewed on desktop