Redesign de experiência
WEB DESIGN
2026
Sobre
Redesign completo da plataforma de fantasy do maior campeonato de League of Legends da América Latina.
transformando sobrecarga de informação em clareza e engajamento.
Categoria
E-sports
Público-alvo
Público de e-sports
Abordagem
Vibe Coding & UX
Minhas funções
User Research & Benchmarking
Criação de Userflows & Prototipação
UI Design & Design System
01 - CONTEXTO
Uma plataforma com
dados demais e clareza de menos.
O CBLOL Fantasy é a plataforma oficial de fantasy esports do maior campeonato de LoL da América Latina. Com milhares de usuários ativos por temporada, o produto original acumulou funcionalidades sem uma arquitetura de informação coerente — resultando em sobrecarga cognitiva e baixo engajamento.
O redesign partiu de uma pergunta direta: o que o usuário precisa ver em 10 segundos ao abrir o app?
A resposta guiou cada decisão de hierarquia, layout e sistema de cores do novo produto.
A abordagem integrou pesquisa de UX clássica com Vibe Coding — uso de Claude AI e Figma Make como parceiros criativos para iterar protótipos em velocidade de sprint sem perder rigor de método.
02 - FASES DO PROJETO
Pesquisa, estratégia, visual e validação.
Quatro movimentos encadeados — cada fase alimenta a próxima. Nenhuma decisão visual foi tomada antes de a estratégia estar definida.
03 - PESQUISA
Análise heurística do Produto original
Benchmarking competitivo
Produtos de fantasy de outros esportes e plataformas de esports internacionais foram analisados com foco em um ponto: o que aparece nos primeiros 5 segundos de uso.
NFL Fantasy · time do usuário ocupa 60% da home, pontuação ao vivo em destaque
LoL Esports · hierarquia clara, dark mode com alto contraste nos dados
CBLOL Fantasy original · nenhuma dessas prioridades aplicadas na home
ANÁLISE DE PRODUTO
O produto original concentrava 8+ seções na home sem hierarquia clara. O usuário era forçado a processar informações de escalação, classificação, notícias e rankings simultaneamente — gerando sobrecarga cognitiva.
BENCHMARKING
Plataformas de fantasy de outros esportes (NFL, NBA) priorizam o time do usuário acima da dobra, com acesso rápido a substitutos e pontuação ao vivo. O CBLOL Fantasy enterrava essas informações em submenus.
VIBE CODING + IA
Claude AI e Figma Make foram usados para simular fluxos complexos — como scroll independente no mercado de jogadores — antes da implementação final. A IA atuou como parceira técnica, com o designer como editor e curador de lógica.
04 - WIREFRAMES & VIBE CODING
Estruturando e utilizando IA para aceleração
Os wireframes definiram a hierarquia antes de qualquer pixel vistoso. Na sequência, o Vibe Coding entrou para simular comportamentos complexos e gerar rascunhos de layout em velocidade de sprint.
WIREFRAMES DE BAIXA FIDELIDADE
VIBE CODING E COMO A IA ENTROU
01 · RASCUNHOS DE LAYOUT
Figma make + Claude AI geraram variações de layout a partir dos wireframes — especialmente para a home e o mercado. O designer selecionou, descartou e combinou outputs.
02 · SIMULAÇÕES DE COMPORTAMENTO
Fluxos complexos — como scroll independente na lista de mercado com sidebar fixo — foram simulados antes de qualquer implementação real.
03 · PROTÓTIPO FUNCIONAL
A IA gerou código de protótipo funcional que permitiu testar a lógica de navegação em browser real — acelerando ciclos de revisão sem esperar a implementação definitiva.
04 · CURADORIA E REFINAMENTO
Todo output de IA passou por revisão de lógica de negócio, adequação ao Design System e alinhamento com as necessidades dos perfis de uso mapeados.
03 -PROTOTIPAÇÃO
