TFT: Teamfight Tactics

TFT: Teamfight Tactics

Upgrading the social experience for mobile

Role

Product Designer

Timeline

July 2024

Tools

Figma, Photoshop,
Google Forms

problem

TFT is better on PC.

My friends and I can all safely agree that Riot Game's popular auto-battler game, Teamfight Tactics, is something that should be played on the computer. Especially when locking in for ranked matches. Compared to the desktop client, the mobile version is missing information and has limited functionality for some features that could honestly "make or break" the game at times.

However, many of us enjoy the convenience of playing on the go or simply in the comfort of our bed. With this in mind, I sought out to create solutions for issues frequently commented on the mobile app.

solution

Upgrading mobile's social features from 2 to 3 stars

Just like ranking up my units from 2 to 3 star in game, I aimed to take the existing mobile app's UI to the next level.

I conducted user surveys amongst current TFT players and designed an updated UI with consideration to user feedback, focusing on visual improvements to the home screen and added functionality for social features (e.g. Friends List, Chat).

features

Home, redesigned!

(1) My Home re-design; (2) Existing Home design

Taking inspiration from the desktop League of Legends client, my redesigned home screen focuses on creating more visual consistency and layout changes for buttons and elements.

The main changes include…

A navigation similar in order and location to the desktop client: Treasure Realms, Collections, Store, then Profile
Pop-up style notifications for game invites and news
A large banner for the featured shop item
Missions and Team Planner buttons moved next to the Play button, since they have more direct in-game purpose

Friends List Navigation

(1-2) My Friends re-design, with new navigation options; (3) Existing Friends design

Social features were the most limited in functionality according to user survey feedback, so I used this opportunity to increase the way users can interact with friends through the friends list and chat.

Previously, the friends overlay only had a button to add a friend. In this redesign, two new navigation buttons were added: Sort/Filter and Search. With the Sort/Filter button, users are able to organize their list of friends alphabetically, by status, or by latest messages on top. Search allows for users to quickly find a friend they want to message or invite to play.

Friends and Chat Options

(1-2) My Friends Options re-design vs the existing overlay; (3) Added Chat Options feature (re-design); (4) Existing Chat overlay

Within the overlay of a chat, users can access Chat Options and Friend Options for the selected friend. Previously, there were no options available to manage a chat with a friend, but users could adjust settings on the desktop client.

The Chat Options button allows users to access the following settings (previously unavailable on mobile): 'Clear chat history', 'Show date lines', and 'Mute chat'. Meanwhile, the Friend Options button allows users to block or remove a friend, in an overlay style similar to the rest of the app's navigation buttons.

design process

In order to set a clear direction for this project, my design process adhered to these constraints:

Experience Type - Mobile
Visual Design - Teamfight Tactics Design System
Time - 1 week design sprint
Integration - The solution to be integrated into Teamfight Tactics mobile app

user research

What do current TFT players think about the mobile app compared to playing on PC?

Given the time constraint of a one week sprint, I conducted user research through a short survey targeted at active TFT players who have played the game on both desktop and mobile. I asked for specific feedback on areas of improvement for the various mobile app screens to identify user pain points.

Social features were the most reported

Survey responses were collected and mapped on an affinity diagram to figure out the main parts of the app I would focus my redesign on. Based on the diagram, I decided to ideate ways to increase functionality and visual appeal for the Home and Social mobile app screens.

Affinity diagram created from survey responses

ideation & design

For the design step of the sprint, I began by sketching various new layouts for the 'Home' and 'Friends List' screens. Preferred parts of a sketch were highlighted with a blue marking and later combined to create wireframes for both screens. The final screens to be used in the prototype were determined by conducting A/B tests of wireframes with the survey respondents.

Designing with the help of A/B testing wireframes

From sketches to wireframes to a high-fidelity prototype

TFT's current design system

Typography and Colors from Teamfight Tactic's design system used for this redesign

Iconography, made with pen tool

New and recreated icons made for this redesign

reflection

bridging the gap between mobile and desktop is a recurring, ongoing quest

While my redesign was able to capture and improve on some of the mobile version concerns, there will continue to be a number of areas where the game could use more mobile support, especially as Teamfight Tactics grows and changes in the future.

In this project I focused my attention on introducing or updating features related to player interaction and creating visual balance for the home screen user interface. If there was more time, I would have loved to further develop these changes with fun interactions and updating the visual design for other screens' UI.

discovering my love for visual design

This design sprint was my first solo UX project. A project of many firsts, where I solved how to replicate the existing mobile app interactions into my own high-fidelity prototype, to creating new and existing icons from scratch using the pen tool in Illustrator, to understanding the significance of designing for the "happy path" user flow. It taught me that I have so much yet to learn, and reaffirmed my passion for making things that both look and feel good (to use)!

thank you for reading! explore more ⋆ ˚｡⋆ ౨ৎ ˚

Less Mess, Best Dressed

Less Mess, Best Dressed

Less Mess, Best Dressed