Voltar aos trabalhos

Braip2026Produto e UI

App Braip v2

Suas vendas na palma da mão.

O app que o produtor abre para saber quanto vendeu, quanto tem para sacar e onde está cada pedido.

Papel
UI/UX Product Designer — app mobile, do fluxo ao motion
Período
2026
Plataforma
iOS e Android · Light e Dark
Cliente
Braip
Problema
O app antigo não acompanhava o design system novo e deixava o produtor sem resposta rápida para as três perguntas do dia — quanto vendi, quanto posso sacar, o que aconteceu com este pedido.
O que eu fiz
Redesenhei os fluxos centrais sobre a Braip Components, com estados de carregamento, vazio e erro em cada tela, paridade Light/Dark e o motion de abertura, biometria e folhas que sobem de baixo.
Resultado
Fluxos aprovados no ciclo de revisão do time e prontos para lançamento nas lojas, com as artes da App Store e do Google Play entregues junto.
Home do App Braip com saldo disponível, botão de solicitar saque e resumo de vendas.
  • Lista de vendas com totais do período e status de cada pedido.02
  • Detalhe da venda com valor, situação do pagamento e resumo do pedido.03
  • Fluxo de solicitar saque com saldo disponível e conta bancária de destino.04
  • Histórico de saques filtrado por status.05
  • Tela de ativação do Face ID para entrar no app.06
Processo completoContexto, decisões e evidências, para quem quer o detalhe.

O problema

O produtor da Braip abre o app com três perguntas: quanto vendi, quanto posso sacar e o que aconteceu com este pedido. A versão anterior respondia as três, mas em telas que não conversavam com o design system novo e sem os estados que ninguém desenha — carregando, vazio, recusado.

O que eu desenhei

Cada fluxo saiu de componentes da Braip Components, nunca de tela solta, e passou por Light e Dark antes de ir para revisão.

  • Home com saldo, atalhos e o resumo de vendas do dia ou do mês.
  • Vendas e detalhe da venda, do pedido pago ao recusado, com a folha de envio subindo de baixo.
  • Saques e histórico, com cada status (processando, realizado, negado) visível sem abrir o item.
  • Biometria na entrada, com o cadeado da abertura como transição.

Motion

O motion não é decoração: ele explica de onde a tela veio. A folha de envio entra de baixo com a mesma curva de todos os overlays do app, o saldo conta até o valor e o cadeado da abertura se desfaz antes da home aparecer. As curvas e durações vêm dos tokens de motion do design system, não de ajuste por tela.

Resultado

Fluxos aprovados no ciclo de revisão do time e prontos para lançamento, com as artes das lojas entregues junto. As métricas de uso ficam com o time de produto — não são minhas para publicar.

Resultados qualitativos: não tenho autorização para publicar as métricas destes projetos.

Capa do arquivo Braip Foundations — "Design System · Foundations & Design Tokens" sobre o monograma da Braip em gradiente roxo.Próximo →Design System BraipDe biblioteca a sistema.