Voltar aos trabalhos

Braip2026Produto e UI

App Braip — Lançamento

Suas vendas na palma da mão.

Sessenta segundos para mostrar um app inteiro — vendas, saques e biometria — sem dizer uma palavra a mais.

Papel
UI/UX Product Designer — direção de motion, roteiro e montagem
Período
2026
Plataforma
LinkedIn (feed 4:5 e stories 9:16) · One Page web
Cliente
Braip
Problema
O app novo estava pronto, mas um print estático não mostra o que mudou — e no feed o produtor decide em dois segundos se para ou rola.
O que eu fiz
Roteirizei um filme de 60 segundos em cinco atos, um por pergunta do produtor, animado com as telas reais do app e as curvas de motion do design system.
Resultado
Filme em dois formatos (feed e stories), abertura da marca e peças de motion da One Page entregues para o lançamento.
Parede com as telas do App Braip — home, vendas, detalhe, saque, histórico e biometria — lado a lado.
  • Home do App Braip em close: saudação, atalhos de saldo, saque e vendas, e o saldo disponível.02
  • iPhone inclinado na tela de vendas com o total do período e um balão de valor flutuando acima.03
  • Detalhe da venda em close: produto, valor pago e situação do pagamento.04
  • Três iPhones em coverflow sobre fundo escuro com detalhe da venda, solicitar saque e histórico.05
  • iPhones no fluxo de solicitar saque com a lista de contas bancárias subindo de baixo.06
  • Histórico de saques com filtros por status e cadeados em 3D ao fundo.07
  • Tela de ativação do Face ID com cadeados em 3D entrando pelas bordas.08
  • Logo da Braip em branco sobre o roxo da marca, quadro final do filme.09
Processo completoContexto, decisões e evidências, para quem quer o detalhe.

Uma pergunta por ato

O filme segue as perguntas que o produtor faz ao abrir o app. Cada ato tem uma frase, uma tela real e um movimento.

Vendas

Saques

Segurança e fecho

Como foi feito

  • Roteiro antes de animar. 120 BPM, cada corte na batida, 1.800 quadros por formato.
  • Telas reais, não mockup refeito. As artes saem do arquivo do app, em camadas, para separar e girar em 3D.
  • Mesmas curvas do produto. As entradas e saídas usam as curvas de motion do design system; o filme se move como o app.
  • Render determinístico em HTML + GSAP com HyperFrames, nos formatos 4:5 e 9:16 a partir da mesma fonte.

O design das telas está no case App Braip v2; aqui está só o lançamento. Métricas de alcance ficaram com o time de marketing da Braip.

O que eu faria diferente

Começaria pelo formato 9:16. Montei o feed 4:5 primeiro e adaptei o stories depois, e o coverflow perdeu espaço lateral na versão vertical — teria sido mais simples desenhar para o quadro mais estreito e abrir para o mais largo.

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

iPhone com a home do App Braip — saldo disponível, botão de solicitar saque e o resumo de vendas — sobre fundo lilás claro.Próximo →App Braip v2Suas vendas na palma da mão.