Oportunidade de comunicação
- Apresentar o benefício antes dos detalhes técnicos.
- Relacionar a proposta ao cotidiano de quem vende.
- Explicar os termos necessários para começar.
UX/UI DESIGN / LANDING PAGE
SUMUP PIX.
Landing page para explicar
o Pix a quem vende.
Pesquisa, hierarquia de conteúdo e uma direção visual em dark mode para apresentar o Pix a quem vende com a SumUp.
EXPLORE O CASE ↓
01 / CONTEXTO E PAPELO desafio: explicar o produto
O desafio: explicar o produto
e orientar o cadastro.
A página precisava apresentar o Pix, explicar seu uso e responder às dúvidas de quem vende antes da chamada de cadastro.
Este projeto foi desenvolvido no curso de Profissão UX/UI Designer da EBAC. O briefing propunha uma landing page para anunciar a chegada do Pix à SumUp, apresentar seus benefícios e orientar o uso.
Meu trabalho reuniu pesquisa documental, análise de referências, exploração de estrutura e design da interface. A proposta também abriu espaço para experimentar uma linguagem visual mais fluida e uma composição em dark mode.
- CONTEXTO
- Projeto de curso
Profissão UX/UI / EBAC - MEU PAPEL
- Pesquisa, wireframes
e design de interface - PRODUTO
- Landing page
SumUp Pix - FOCO
- Comunicação do produto
e hierarquia de conteúdo
MINHA CONTRIBUIÇÃO
Conectei pesquisa documental e benchmark à ordem do conteúdo e às chamadas de cadastro. O trabalho demonstra arquitetura da informação, wireframes e aplicação de um sistema visual na landing page.
02 / PESQUISA E ANÁLISEPesquisa documental
Pesquisa documental
e análise de concorrentes.
A pesquisa documental olhou para a relação dos brasileiros com o dinheiro e para a adoção de pagamentos digitais no contexto da chegada do Pix.
O material levantou fatores que poderiam aproximar ou afastar o público: familiaridade com soluções digitais, busca por pagamentos sem contato, desigualdade de acesso bancário e desconfiança em relação a fintechs.
Esse diagnóstico orientou uma comunicação que combina apresentação do produto, explicações práticas e espaço para dúvidas.
O que o benchmarking apontou
A análise de concorrentes diretos e indiretos destacou benefícios, perguntas frequentes e conteúdos voltados a empresas. Comparativos apareceram como uma oportunidade para apoiar a compreensão.
A estrutura da página passou a combinar essas formas de apresentar informação.
Os percentuais na prancha pertencem ao levantamento documentado no projeto; o PDF não detalha a amostra ou o método de cálculo.
03 / EXPLORAÇÃO E WIREFRAMESWireframes para ordenar
Wireframes para ordenar
benefícios, explicações e FAQ.
Os esboços exploraram como distribuir conteúdo explicativo e chamadas de cadastro ao longo de uma mesma página.
A sequência escolhida começa com a apresentação do Pix, explica as chaves, aproxima os benefícios do negócio e termina com perguntas frequentes.
Os wireframes ajudaram a definir essa ordem antes do acabamento visual. O cadastro reaparece nos momentos em que a página oferece contexto para a ação.
04 / CONCEITO E SISTEMA VISUALConceito visual aplicado
Conceito visual aplicado
à hierarquia da página.
“Liquify” foi o conceito que conectou formas fluidas, superfícies abstratas e uma presença visual mais elegante.
O azul mantém a conexão com a identidade da SumUp e destaca ações e palavras-chave. Os fundos escuros criam profundidade; as seções claras marcam mudanças de assunto e abrem espaço para a leitura.
A Lato organiza os níveis de informação: títulos com peso forte, textos regulares e legendas menores. A paleta documentada explora variações de azul e cinza.
Liquify.
Clareza · Fluidez · Formas · Minimalismo
#31A9E4#257FAB#113B50#121212#E7E7E7
05 / DECISÕES NA INTERFACEQuatro blocos com funções
Quatro blocos com funções
de comunicação definidas.
Cada bloco tem uma função na narrativa: apresentar, explicar, contextualizar e responder.
01 / DESIGN DE INFORMAÇÃO
Apresentar a novidade.
O hero conecta a mensagem sobre o Pix aos produtos da SumUp. O título tem presença, a imagem reconhecível dá contexto e a chamada de cadastro aparece já na abertura.
02 / DESIGN DE INFORMAÇÃO
Explicar sem interromper.
A seção sobre chaves Pix traduz o termo em uma explicação curta. O fundo claro distingue o conteúdo educativo da abertura e a faixa de atributos resume os pontos destacados no estudo.
03 / DESIGN DE INFORMAÇÃO
Contextualizar os benefícios para quem vende.
A imagem de uma transação aproxima o conteúdo do cotidiano de quem vende. O bloco de vantagens e o comparativo exploram diferentes formas de comunicar os benefícios propostos pelo briefing.
04 / DESIGN DE INFORMAÇÃO
Dar espaço às perguntas.
A proposta de FAQ usa respostas expansíveis para preservar a organização da página. A prancha mostra um estado aberto, tornando visível como a informação adicional se encaixa na composição.
As telas são recortes do PDF original. Informações sobre tarifas, prazos e meios de pagamento fazem parte do exercício da época.
A INTERFACE COMPLETAA landing page inteira,
A landing page inteira,
da abertura ao rodapé.
Veja a sequência de conteúdo na proposta final: apresentação do Pix, chaves, benefícios para o negócio, comparativo e perguntas frequentes.
07 / ENTREGA E APRENDIZADOLanding page com conteúdo
Landing page com conteúdo
organizado da oferta ao cadastro.
Resultado da proposta
Uma proposta de landing page que conecta pesquisa documental, análise de concorrentes, wireframes, tipografia, cores e interface final.
A contribuição está na sequência de conteúdo: apresentar o Pix, explicar as chaves, relacionar os benefícios ao negócio e responder às dúvidas. Os wireframes definiram essa ordem; cor, tipografia e alternância de fundos reforçaram as diferenças entre os blocos.
A entrega é uma proposta de curso. A compreensão do conteúdo e o desempenho das chamadas de cadastro ainda precisam de validação com usuários.
Explore a página inteira.
Veja a sequência completa da interface e consulte as pranchas que deram origem a este case.
ABRIR PRANCHAS NO FIGMA ↗
Jorge Yasuo / Product Designer
Todos os projetos ↗