Design System para a LigaMagic
A LigaMagic é um dos maiores marketplaces de jogos de cartas colecionáveis (TCG) no Brasil. Com mais de duas décadas de evolução e funcionalidades adicionadas ao longo do tempo, a plataforma passou a enfrentar desafios relacionados à consistência visual, acessibilidade e escalabilidade do design.
Este estudo propõe a estruturação de um Design System para corrigir inconsistências, melhorar a usabilidade e tornar o produto mais eficiente e acessível.
Nome do cliente
Estudo de Caso
Ano
2022
Etapas da Pesquisa
-
Mapeamento da interface pública do site via prints organizados no Figma.
Classificação de componentes em:
Bases (ex: botões, inputs),
Principais (ex: cards, pagination),
Not in DS (elementos visuais isolados sem padrão).
Identificação de inconsistências de estilo: múltiplos radius, box shadows, tamanhos e cores em botões e cards.
-
Uso da ferramenta CSS Stats para mapeamento de cores, fontes e espaçamentos.
Resultado:
79 cores únicas no sistema, utilizadas de forma redundante.
Tipografia com 49 tamanhos e pesos diferentes.
92 erros de contraste detectados com o Accessibility Insights — violação da WCAG 2.1, critério 1.4.3.
-
A interface foi avaliada com base nos 5 princípios visuais da Nielsen Norman Group:
Escala e Hierarquia visual mal aplicadas: títulos e conteúdos competem entre si.
Contraste e Equilíbrio comprometem a leitura e a experiência.
Gestalt desrespeitada: ausência de padrão na organização visual e semântica dos elementos.
Ferramentas Utilizadas
-
Documentação de componentes e interface.
-
Levantamento de tokens e propriedades CSS.
-
Testes de contraste e acessibilidade.
Insights e Resultados
A falta de um Design System compromete a experiência do usuário, produtividade da equipe e escalabilidade do produto.
O estudo propôs a criação de um MVP de Design System com foco em:
Padronização de tokens (cores, tipografia, espaçamentos),
Criação de componentes reutilizáveis e acessíveis,
Base para futuras evoluções modulares da plataforma.
Conclusão
Esse projeto demonstrou, na prática, como a ausência de um Design System impacta diretamente na eficiência, acessibilidade e consistência visual de um produto digital. A LigaMagic possui uma identidade consolidada, mas que se perde em meio às falhas visuais e estruturais. A implementação de um Design System não apenas corrige essas falhas, como também reduz retrabalho, melhora a comunicação entre equipes e fortalece a experiência do usuário.