Barbara Costa
XP Zone
Plataforma para comunidade gamer — UX/UI Design · UX Writing · Landing Page
Visão geral do projeto
XP Zone é uma plataforma digital desenvolvida para conectar gamers da mesma cidade, permitindo comprar, vender e trocar jogos, além de incentivar a interação entre membros da comunidade.
O projeto é conceitual e foi desenvolvido em 2026 como uma landing page / plataforma web — pensada para apresentar a proposta da plataforma, explicar seu funcionamento e converter novos usuários.
Meu papel
Ferramentas
Objetivo do Projeto
Criar uma landing page capaz de:
Apresentar a proposta da plataforma
Comunicar de forma clara e imersiva o que é a XP Zone e a quem ela se destina.
Explicar o funcionamento da comunidade
Mostrar como funciona a rede de gamers — compra, venda, troca e interação local.
Incentivar novos usuários a participar
Guiar o visitante com CTAs estratégicos e proposta de valor clara e direta.
Facilitar a compra, venda e troca de jogos
Estruturar a jornada para que o caminho até a ação seja simples e sem fricção.
Wireframes
Os wireframes foram utilizados para estruturar a arquitetura da landing page e definir a hierarquia das informações antes do design visual final.
Foram mapeados os blocos principais de conteúdo — hero, comunidade, recompensas, card zone e CTA — garantindo que o fluxo de conversão estivesse bem resolvido antes de partir para o visual.
💡 Substitua os placeholders acima pelas imagens dos wireframes exportadas do Figma.
UX Writing
Durante o desenvolvimento da landing page foram definidas mensagens claras e objetivas para apresentar os benefícios da plataforma e guiar o usuário durante a navegação.
O tom de voz escolhido é direto, energético e próximo — alinhado ao universo gamer e à proposta de comunidade da XP Zone. Cada microcopy foi pensado para reduzir fricção e incentivar a ação.
Tom de voz
Direto, energético e próximo ao universo gamer. Sem jargão corporativo.
Headlines
Foco em benefício imediato e chamada para ação clara em cada seção.
Microcopy
Textos de botão, labels e mensagens de suporte que reduzem dúvidas e aumentam a conversão.
Design System
Foi criado um design system para garantir consistência visual e facilitar a escalabilidade da interface.
O sistema inclui paleta de cores, tipografia, componentes reutilizáveis e estados de interação — pensados para o universo gamer com uma estética imersiva e escura.
Detalhes da Interface
A landing page foi estruturada em seções estratégicas, cada uma com um papel claro na jornada do usuário:
Hero Section
Apresentação imersiva da plataforma com proposta de valor imediata e CTA principal em destaque.
Comunidade Gamer
Seção que evidencia a rede de jogadores e o diferencial da conexão local entre usuários.
Sistema de Recompensas (XP)
Explicação do sistema de pontos que incentiva a participação ativa na plataforma.
Card Zone
Seção de compra, venda e troca de jogos — o coração funcional da plataforma.
💡 Substitua os placeholders pelas telas exportadas do Figma — Card Zone, Hero, Comunidade e Recompensas.
Responsividade
A interface foi adaptada para diferentes dispositivos, garantindo uma experiência consistente em desktop, tablet e mobile.
💡 Substitua pelos mockups de responsividade exportados do Figma.
Conclusão
O projeto resultou em uma landing page imersiva e alinhada ao universo gamer, facilitando a compreensão da proposta da XP Zone e incentivando a participação na comunidade.
Durante o desenvolvimento foi possível aplicar conceitos de UX Writing, arquitetura de informação e design system para construir uma experiência clara e consistente.
seções estratégicas mapeadas
breakpoints de responsividade
design system criado do zero
O que aprendi nesse projeto
Construir presença digital do zero para um nicho específico exige entender a linguagem e os valores da comunidade — o briefing é o projeto.
UX Writing e design visual precisam trabalhar juntos desde o início: a copy define o ritmo da interface, e a interface dá força à copy.
Um design system bem definido desde o wireframe garante coerência em todos os breakpoints e acelera a fase de refinamento visual.