FF SQUAD · LBFF FANTASY

Fantasy sports, rebuilt for Brazil's biggest esports league.

Client
Garena · Liga Brasileira de Free Fire
Year
2021
Role
Product Design · UI · System Architecture
Made with
Webcore Interactive · São Paulo
Category
Fantasy sports · Esports
Status
Shipped 2021 · LBFF 6 Série A
FF Squad landing hero: 'Monte seus times, acompanhe, some pontos e ganhe prêmios' over LBFF and Free Fire key art, the fantasy platform for the Brazilian Free Fire league.
hero.jpg

The Reason

The brief

A proven format that hadn't met mobile esports

Free Fire is one of Brazil's biggest games, with a stadium-filling competitive scene in the LBFF (Liga Brasileira de Free Fire). Fantasy sports is a proven engagement format, but it hadn't landed cleanly here: the mechanics don't map to mobile esports rhythms, and the audience isn't the one most fantasy products are built for.

In 2021 Garena, Free Fire's publisher, commissioned Webcore Interactive to build a fantasy platform for LBFF fans. The obvious reference was Cartola FC, Globo's fantasy football juggernaut. The brief: translate that energy, the drafting, the weekly check-in, the competition inside your group chat, onto Free Fire's calendar and its real matches. I joined Webcore's team as the freelance product designer.

The Strategy

The strategic move

Built from the game outward, not the genre inward

Traditional fantasy is individual: one player, one position, stats aggregated over a long season. The LBFF is squad-based, its matches are short, and its "player" is a pro competing inside a five-person team with a dedicated coach.

So the platform was designed around the shape of a real LBFF round rather than a football template. Users draft a squad of five pros plus a coach against a fixed virtual budget, inside a transfer market that opens and closes on a timer before match day. Points come from real performance: placements, eliminations, round-by-round consistency.

Dynamic prices turn drafting into an economy, rising and falling with each pro's championship form. Buy a player before the market reprices him, or pay a premium for the reigning star. Custom and private leagues put the competition inside your group chat, while the public ranking and most-picked players build a live meta on top. Results surfaced on the LBFF's own channels and broadcasts, so playing became part of watching rather than a second app to check.

The System

The system underneath

The system that made it a game

FF Squad wasn't a promotional landing page. Behind the surface sat a system model: how pro-player data arrives from the LBFF, how prices update, how points are calculated per match day, how leaderboards refresh, how custom leagues get created and scored, all tied to a tournament calendar that couldn't be paused.

We designed that model alongside the product surface, because at this scope they're one problem. The shape of the data decides what's possible on the screen.

architecture · the experience, mapped
FF Squad user-navigation flow: the public pages (landing, about, how it works, prizes, FAQ), the login and two-step registration flow, and the logged-in product across five nav tabs (Meu Time, Ranking, Ligas, Times, Notificações), with the nine-step squad-build flow, leagues, ranking, and team and player detail branches, drawn for desktop and mobile.
architecture.jpg
The whole experience, mapped before the pixels. A five-tab logged-in product with a nine-step squad-build flow, drawn across desktop and mobile.
design system · atoms to screens
The FF Squad design system: colors, Archivo type scale, buttons, navigation, avatars and player-selection components, list and data-row patterns, and the real LBFF team crests, documented in one sheet.
design-system.jpg
The platform, systematized. One design system behind 118 screens and 59 components, on desktop and mobile.

The Product

The shipped product

A web platform on the broadcast's calendar

FF Squad shipped at ffsquad.com.br in August 2021, for the LBFF 6 Série A season. Every round ran on the tournament clock: draft before the market closed, watch the LBFF live, then track points, wallet and ranking as the matches played out, chasing position, bragging rights inside your league and the season's prizes.

signature · the shipped product · ffsquad.com.br
ffsquad.com.br
FF Squad landing page: the marketing hero, 'Monte seus times, acompanhe, some pontos e ganhe prêmios'.
ffsquad.com.br · sobre
The 'Sobre o FF Squad' page explaining how the fantasy platform works.
ffsquad.com.br · login
The FF Squad login screen, in the platform's dark and gold Free Fire brand.
ffsquad.com.br · montar time
The squad builder: assembling five pro players plus a coach, with the wallet, the market timer, and the player market open.
ffsquad.com.br · mercado
The player market with filters, sorting the pool of LBFF pros by price and stats.
ffsquad.com.br · jogador
A pro-player detail view inside the squad builder, with the player's stats and price.
ffsquad.com.br · ranking
The public ranking, squads and players sorted by points.
ffsquad.com.br · ligas
The leagues screen, browsing public and custom leagues to join.
ffsquad.com.br · times
The teams view, the real LBFF organizations represented in the platform.
FF Squad, shipped. A working fantasy platform: drafting, a timed market, custom leagues, and a live ranking, all tied to the real LBFF.
responsive · the platform on mobile
FF Squad on mobile: the squad screen before selection, empty slots waiting for players.
FF Squad on mobile: the squad screen with pro players selected.
FF Squad on mobile: the teams list.
FF Squad on mobile: the navigation menu.
The same platform, sized for the phone. Designed at both ends of the system, desktop at 1280 and mobile at 320.

The Results

What happened

The Cartola FC of Free Fire

The Brazilian tech press framed FF Squad in one line: the Cartola FC of Free Fire. With Cartola among the most recognizable fantasy platforms in the country, the shorthand landed instantly with the LBFF's audience.

The platform ran through the LBFF 6 Série A season, with results featured on the league's own social channels and live broadcasts throughout the tournament.

Coverage at launch

Techtudo · "Free Fire anuncia FF Squad, jogo da LBFF no estilo de Cartola FC"
Tecnoblog · "Liga Brasileira de Free Fire ganha FF Squad, jogo parecido com Cartola FC"
Terra · "Free Fire anuncia jogo fantasy da LBFF"
GamingOnPhone · "Free Fire: Garena announces a fantasy game for LBFF named FF Squad"

FF Squad shipped as one connected object: the economy, the surface and the interactions designed together inside the Webcore team. I haven't had a scope quite like it since, and I keep an eye out for the next one.
Credits

Client · Garena (Free Fire) · for the Liga Brasileira de Free Fire (LBFF)
Agency · Webcore Interactive · São Paulo
Freelance product design · Davi Serrano

More work
Back to all work
© Davi Serrano work.daviserrano.com