o cenário:
o cenário:
o cenário:
o ux bank percebeu que muitos usuários estavam esquecendo de pagar contas no prazo, mesmo com acesso ao app e internet banking. isso gerava multas, atrasos e insatisfação. para resolver, o banco decidiu implementar uma funcionalidade de agendamento de pagamentos recorrentes.
o ux bank percebeu que muitos usuários estavam esquecendo de pagar contas no prazo, mesmo com acesso ao app e internet banking. isso gerava multas, atrasos e insatisfação. para resolver, o banco decidiu implementar uma funcionalidade de agendamento de pagamentos recorrentes.
o ux bank percebeu que muitos usuários estavam esquecendo de pagar contas no prazo, mesmo com acesso ao app e internet banking. isso gerava multas, atrasos e insatisfação. para resolver, o banco decidiu implementar uma funcionalidade de agendamento de pagamentos recorrentes.
o desafio principal:
o desafio principal:
o desafio principal:
no prazo de 3 dias, desenvolvi um fluxo completo de agendamento de pagamentos para web e mobile, atendendo a todas as regras de negócio. tambem criei todo o design system do projeto, incluindo componentes, variables e style guide.
no prazo de 3 dias, desenvolvi um fluxo completo de agendamento de pagamentos para web e mobile, atendendo a todas as regras de negócio. tambem criei todo o design system do projeto, incluindo componentes, variables e style guide.
no prazo de 3 dias, desenvolvi um fluxo completo de agendamento de pagamentos para web e mobile, atendendo a todas as regras de negócio. tambem criei todo o design system do projeto, incluindo componentes, variables e style guide.
o impacto (para o usuário):
o impacto (para o usuário):
o impacto (para o usuário):
a funcionalidade oferece mais autonomia e tranquilidade para os usuários, evitando esquecimentos e facilitando o controle financeiro.
a funcionalidade oferece mais autonomia e tranquilidade para os usuários, evitando esquecimentos e facilitando o controle financeiro.
a funcionalidade oferece mais autonomia e tranquilidade para os usuários, evitando esquecimentos e facilitando o controle financeiro.
meus projetos
meus projetos
meus projetos
topaz case - ux/ui design
topaz case - ux/ui design
topaz case - ux/ui design
o cenário:
o ux bank percebeu que muitos usuários estavam esquecendo de pagar contas no prazo, mesmo com acesso ao app e internet banking. isso gerava multas, atrasos e insatisfação. para resolver, o banco decidiu implementar uma funcionalidade de agendamento de pagamentos recorrentes.
o desafio principal:
no prazo de 3 dias, desenvolvi um fluxo completo de agendamento de pagamentos para web e mobile, atendendo a todas as regras de negócio. tambem criei todo o design system do projeto, incluindo componentes, variables e style guide.
o impacto (para o usuário):
a funcionalidade oferece mais autonomia e tranquilidade para os usuários, evitando esquecimentos e facilitando o controle financeiro.
meu papel e o processo
meu papel e o processo
meu papel e o processo
como designer ux/ui, liderei a concepção da solução, do discovery à prototipagem final, com foco no usuário e utilizando o duplo diamante. iniciei com a matriz csd para guiar o processo, seguindo com desk research e benchmark. a partir dessa organização, desenvolvi personas, jornada do usuário e o fluxo.
tendo o fluxo completo, criei protótipos de baixa e alta fidelidade, garantindo uma interface intuitiva e coesa, focada na experiência do usuário.
como designer ux/ui, liderei a concepção da solução, do discovery à prototipagem final, com foco no usuário e utilizando o duplo diamante. iniciei com a matriz csd para guiar o processo, seguindo com desk research e benchmark. a partir dessa organização, desenvolvi personas, jornada do usuário e o fluxo.
tendo o fluxo completo, criei protótipos de baixa e alta fidelidade, garantindo uma interface intuitiva e coesa, focada na experiência do usuário.
como designer ux/ui, liderei a concepção da solução, do discovery à prototipagem final, com foco no usuário e utilizando o duplo diamante. iniciei com a matriz csd para guiar o processo, seguindo com desk research e benchmark. a partir dessa organização, desenvolvi personas, jornada do usuário e o fluxo.
tendo o fluxo completo, criei protótipos de baixa e alta fidelidade, garantindo uma interface intuitiva e coesa, focada na experiência do usuário.
matriz csd
comecei com a matriz csd, pois ela me ajuda muito a ter uma noção mais clara do que já é conhecido no projeto, do que ainda precisa ser validado e dos principais pontos de incerteza. essa organização inicial foi essencial para direcionar as próximas etapas do processo, garantindo que o fluxo de agendamento fosse pensado com base em riscos reais, necessidades do usuário e alinhamento com as regras do negócio.
matriz csd
matriz csd
comecei com a Matriz CSD, pois ela me ajuda muito a ter uma noção mais clara do que já é conhecido no projeto, do que ainda precisa ser validado e dos principais pontos de incerteza. essa organização inicial foi essencial para direcionar as próximas etapas do processo, garantindo que o fluxo de agendamento fosse pensado com base em riscos reais, necessidades do usuário e alinhamento com as regras do negócio.
comecei com a Matriz CSD, pois ela me ajuda muito a ter uma noção mais clara do que já é conhecido no projeto, do que ainda precisa ser validado e dos principais pontos de incerteza. essa organização inicial foi essencial para direcionar as próximas etapas do processo, garantindo que o fluxo de agendamento fosse pensado com base em riscos reais, necessidades do usuário e alinhamento com as regras do negócio.
comecei com a Matriz CSD, pois ela me ajuda muito a ter uma noção mais clara do que já é conhecido no projeto, do que ainda precisa ser validado e dos principais pontos de incerteza. essa organização inicial foi essencial para direcionar as próximas etapas do processo, garantindo que o fluxo de agendamento fosse pensado com base em riscos reais, necessidades do usuário e alinhamento com as regras do negócio.
benchmark
benchmark
analisei brevemente como bancos conhecidos lidam com esse tipo de fluxo. a ideia aqui é usar os pontos fortes de cada um como referência no seu protótipo.
Fluxo simples e direto
Agendamento recorrente
Resumo antes da confirmação
Notificações úteis
Preenchimento inteligente
Visual limpo e acessível
analisei brevemente como bancos conhecidos lidam com esse tipo de fluxo. a ideia aqui é usar os pontos fortes de cada um como referência no seu protótipo.
Fluxo simples e direto
Agendamento recorrente
Resumo antes da confirmação
Notificações úteis
Preenchimento inteligente
Visual limpo e acessível
analisei brevemente como bancos conhecidos lidam com esse tipo de fluxo. a ideia aqui é usar os pontos fortes de cada um como referência no seu protótipo.
Fluxo simples e direto
Agendamento recorrente
Resumo antes da confirmação
Notificações úteis
Preenchimento inteligente
Visual limpo e acessível
cores e tipográfia
sora e arial
fluxo agendamento
cores e tipográfia
sora e arial
sora e arial
fluxo agendamento
fluxo agendamento
o fluxo mostra as etapas para o usuário agendar um pagamento, escolhendo entre pix, boleto ou cartão. cada caminho exige ações específicas, como selecionar empresa, inserir código ou chave pix. o processo inclui validações de valor mínimo, forma de pagamento e possíveis erros, finalizando com a confirmação das informações colocadas e termos de uso.
o fluxo mostra as etapas para o usuário agendar um pagamento, escolhendo entre pix, boleto ou cartão. cada caminho exige ações específicas, como selecionar empresa, inserir código ou chave pix. o processo inclui validações de valor mínimo, forma de pagamento e possíveis erros, finalizando com a confirmação das informações colocadas e termos de uso.
o fluxo mostra as etapas para o usuário agendar um pagamento, escolhendo entre pix, boleto ou cartão. cada caminho exige ações específicas, como selecionar empresa, inserir código ou chave pix. o processo inclui validações de valor mínimo, forma de pagamento e possíveis erros, finalizando com a confirmação das informações colocadas e termos de uso.
fluxo agendamento
fluxo contas agendadas
fluxo contas agendadas
este fluxo representa a visualização e o gerenciamento de boletos em diferentes estados: ativos, pausados e agendados. o usuário pode aplicar filtros de tempo, acessar detalhes dos boletos, agendar ou pagar manualmente, marcar como pago ou removê-los.
este fluxo representa a visualização e o gerenciamento de boletos em diferentes estados: ativos, pausados e agendados. o usuário pode aplicar filtros de tempo, acessar detalhes dos boletos, agendar ou pagar manualmente, marcar como pago ou removê-los.
fluxo contas agendadas
componentes
componentes
aqui estão os componentes criados e utilizados ao longo do projeto, tanto para as versões mobile quanto web. eles foram desenvolvidos com base no style guide inicial, garantindo consistência visual, responsividade e facilidade de manutenção.
aqui estão os componentes criados e utilizados ao longo do projeto, tanto para as versões mobile quanto web. eles foram desenvolvidos com base no style guide inicial, garantindo consistência visual, responsividade e facilidade de manutenção.
funcionalidades
funcionalidades
funcionalidades
cenários de erros
cenários de erros
componentes
cenários de erros
protótipo
protótipo
cenários de erros
protótipo
resultados esperados
resultados esperados
resultados esperados
com o novo fluxo, espera-se uma redução significativa nos atrasos de contas essenciais, diminuindo a frustração dos usuários e fortalecendo a percepção de confiança na plataforma digital. além disso, o sistema de notificações e o destaque dos agendamentos na tela inicial contribuem para uma experiência mais proativa e organizada no dia a dia.
com o novo fluxo, espera-se uma redução significativa nos atrasos de contas essenciais, diminuindo a frustração dos usuários e fortalecendo a percepção de confiança na plataforma digital. além disso, o sistema de notificações e o destaque dos agendamentos na tela inicial contribuem para uma experiência mais proativa e organizada no dia a dia.
quer bater um papo comigo? é só me chamar!
quer bater um papo comigo? é só me chamar!
jemteraoka@gmail.com
jemteraoka@gmail.com
linkedin.com/in/joaoteraoka/
linkedin.com/in/joaoteraoka/
12 99611-2929
12 99611-2929
2025 João Guilherme Teraoka
quer bater um papo comigo?
é só me chamar!
jemteraoka@gmail.com
linkedin.com/in/joaoteraoka/
12 99611-2929
2025 João Guilherme Teraoka