App P2x Pay
Sobre o projeto
O P2x Pay é um app de conta digital. A demanda foi o redesign do app: telas de abertura de conta, home, cartões, depósito por boleto, pagamento de contas, recarga de celular, transferências e extrato, sobre uma identidade visual própria. Em 4 semanas, organizei o trabalho em mapeamento dos fluxos, design system e handoff.
- UX
- UI
- Design System
- Prototipação
- Componentes
- Handoff
- Projeto
- P2x Pay · App
- Setor
- Fintech · Conta digital
- Papel
- Product Design (UX/UI)
- Duração
- 4 semanas
- Entregas
- Design system, telas, protótipo e handoff
- Protótipo
- Acesse o protótipo
Processo de design
Um projeto de redesign em 4 semanas, organizado em três etapas: do mapeamento dos fluxos ao handoff.
- Etapa 01
Mapeamento dos fluxos
- Fluxos de navegação
- Wireframes das telas principais
- Telas e estados
- Estados de erro e vazio
- Etapa 02
Componentização
- Estilos de cor e tipografia
- Átomos
- Moléculas
- Organismos
- Etapa 03
Handoff
- Telas em alta fidelidade
- Protótipo navegável
- Specs e anotações
Decisões de design
Três decisões que mudaram o app, cada uma com o que ela muda para quem usa.
O que mudou
Um passo por tela
Formulários longos viraram etapas curtas, com progresso e ação principal sempre à vista.
- Barra de ação fixa no rodapé
- Progresso em etapas na abertura de conta
- Valor em chips na recarga
- Valor digitado com teclado numérico
Risco visível
Ações irreversíveis têm confirmação, verificação e separação visual do resto.
- Encerrar conta com aviso e verificação
- Sair do aplicativo separado do menu
- Aviso de golpes na revisão da transferência
- Erros de saldo e limite no valor
Menos telas, mais clareza
Variações repetidas foram unificadas e os estados principais ficaram em foco.
- Detalhe e comprovante unificados
- Filtros do extrato em uma só folha
- Cartão resumido na Home
- Estados de carregamento, vazio e erro
Fluxos do usuário
Cada área do app, as telas que a compõem e as etapas de cada tela.
- P2x
- Entrada
- AcessoEntrar no app com segurança
- Boas-vindas
- Login
- Recuperar senha
- Abrir contaCriar sua conta em etapas
- Antes de começar
- Identificação
- CPF
- Cartão
- Contato
- Código SMS
- Senha
- Dados pessoais
- Endereço
- Documentos
- Fotos do documento
- Selfie
- Conclusão
- Documentos pendentes
- AcessoEntrar no app com segurança
- Dia a dia
- InícioSaldo, cartão e atalhos
- Dados do cartão
- Menu do usuário
- Sair do aplicativo
- ExtratoConsultar suas movimentações
- Busca e filtros
- Detalhe da transação
- InícioSaldo, cartão e atalhos
- Pagamentos
- TransferênciaEnviar para P2x Pay e bancos
- Para quem
- Conta P2x Pay
- Valor e comprovante
- Outros bancos
- Escolher banco
- Valor e comprovante
- DepósitosGerar boleto para depositar
- Gerenciar boletos
- Boleto em aberto
- Novo boleto
- Valor e data
- Boleto gerado
- Gerenciar boletos
- ContasPagar boletos pelo código
- Escolher leitura
- Ler código de barras
- Digitar código
- Dados do pagamento
- Comprovante
- Escolher leitura
- Recarga de celularRecarregar o celular
- Dados da recarga
- Selecionar operadora
- Resumo
- Comprovante
- Dados da recarga
- TransferênciaEnviar para P2x Pay e bancos
- Produtos
- CartõesVer, bloquear e adicionar
- Meus cartões
- Dados do cartão
- Redefinir senha
- Adicionar cartão
- Dados e senha
- Bloquear cartão
- Motivo e confirmação
- Desbloquear cartão
- Meus cartões
- CartõesVer, bloquear e adicionar
- Conta e suporte
- AjudaTirar dúvidas e pedir ajuda
- Central de ajuda
- PerfilDados, encerramento e saída
- Dados do perfil
- Endereço
- Contato
- Encerrar conta
- Confirmar e verificar
- Conta encerrada
- Sair da conta
- Dados do perfil
- AjudaTirar dúvidas e pedir ajuda
- Entrada
Style Guide
Visual moderno e confiável: tons de azul-petróleo e tipografia limpa para dar clareza em todas as telas.
Cores
Azul-petróleo da marca com neutros e cores de feedback, todos como variáveis.
- Destaqueblue/100#08C6D2
- Apoio cianoblue/200#2CBFCA
- Primáriablue/300#00A5B2
- Apoio azulblue/400#397C9A
- Secundáriablue/500#365072
Neutros e feedback
- white/300#FDFDFD
- white/400#F5F5F5
- white/500#EBEBEB
- white/600#DEDEDE
- black/300#787878
- black/500#373737
- black/600#1E1E1E
- error/300#E40029
- success/400#1AA768
Tipografia
Poppins em cinco tamanhos, do título ao rótulo, para leitura rápida em telas pequenas.
Poppins
- Regular
- Medium
- Bold
Escala
Token · tamanho
- Conta digitalTitle/Bold · 32
- Saldo disponívelSubtitle/Bold · 24
- Transferir para outro bancoBody/Regular · 16
- Confirmar transferênciaBody/Bold · 16
- Segunda, 18 mar 2024Caption/Regular · 14
- Últimas transaçõesOverline/Regular · 12
Design tokens
Três camadas: o primitivo guarda o valor, o semântico dá o papel e o uso aplica na interface.
Primitivo → Semântico
- neutral/white/300token/background
Fundo das telas
- neutral/white/400token/surface
Cards e superfícies
- neutral/white/600token/on-terciary/600
Bordas e divisores
25 variáveis de cor e 16 de medida no arquivo do Figma.
Elevação
Sombras do sistema aplicadas como estilos.
- 02 dp
- 06 dp
- elevated
- xlarge
Espaçamento
Escala em múltiplos de 4, de 2 a 32 px.
- xxs2
- xs4
- s8
- m12
- l16
- xl20
- xxl24
- xxxl32
Raio
Cantos que vão do reto ao circular.
- none0
- medium4
- x-large8
- 2x-large24
- circular∞
