Mobile
Style Guide
UI
Finanças
Wireframe
Fluxo de Usuário
neotrust
neotrust
neotrust
Fluxo de pagamento de boletos
Fluxo de pagamento de boletos
Fluxo de pagamento de boletos
Contexto
Contexto
Contexto
Neotrust foi um aplicativo construído para um desafio de processo seletivo.
Neotrust foi um aplicativo construído para um desafio de processo seletivo.
Neotrust foi um aplicativo construído para um desafio de processo seletivo.
Objetivo
Objetivo
Objetivo
Criar um fluxo de pagamento de boletos pelo celular
Criar um fluxo de pagamento de boletos pelo celular
Criar um fluxo de pagamento de boletos pelo celular
Resultados
Resultados
Resultados
Criação de fluxo de usuário. Criação de um guia de estilos para o aplicativo. Protótipo de alta fidelidade Dark Mode e Light Mode.
Criação de fluxo de usuário. Criação de um guia de estilos para o aplicativo. Protótipo de alta fidelidade Dark Mode e Light Mode.
Criação de fluxo de usuário. Criação de um guia de estilos para o aplicativo. Protótipo de alta fidelidade Dark Mode e Light Mode.
Aprendizados
Aprendizados
Aprendizados
Criação de guia de estilos antes de construir a interface final, ´possibilitando mais coerência e consistência entre as telas.
Criação de componentes no Figma
Pesquisa de concorrentes
Criação de guia de estilos antes de construir a interface final, ´possibilitando mais coerência e consistência entre as telas.
Criação de componentes no Figma
Pesquisa de concorrentes
Criação de guia de estilos antes de construir a interface final, ´possibilitando mais coerência e consistência entre as telas.
Criação de componentes no Figma
Pesquisa de concorrentes
Desafios
Desafios
Desafios
Poucos dias para finalizar o projeto
Poucos dias para finalizar o projeto
Poucos dias para finalizar o projeto
Meu papel
Meu papel
Meu papel
UX/UI designer
UX/UI designer
UX/UI designer
Feito em
Feito em
Feito em
2024
2024
2024
Processo
Benchmarking
Benchmarking
Benchmarking
Fluxo de Usuário
Fluxo de Usuário
Fluxo de Usuário
Wireframes
Wireframes
Wireframes
Telas de Média Fidelidade
Telas de Média Fidelidade
Telas de Média Fidelidade
Protótipos em Alta Fidelidade
Protótipos em Alta Fidelidade
Protótipos em Alta Fidelidade
Benchmarking
Para começar o projeto, pesquisei e executei o fluxo de pagamento de boletos em aplicativos de dois bancos: Banco do Brasil e Nubank:
Como os competidores vendem roupas sob medida online?
Qual é o processo de atendimento para esses clientes?
Como os clientes são orientados a tirar suas medidas em casa?
Principais pontos sobre o mercado de roupas sob medida online:
Além dos aplicativos do banco, busquei por outro aplicativo que fizesse transações financeiras por meio de leitura de QRCode:
Além dos aplicativos do banco, busquei por outro aplicativo que fizesse transações financeiras por meio de leitura de QRCode:
Além dos aplicativos do banco, busquei por outro aplicativo que fizesse transações financeiras por meio de leitura de QRCode:
Arquitetura da Informação
O próximo passo foi definir o fluxo de usuário para o pagamento de boletos, considerando possíveis erros.
O próximo passo foi definir o fluxo de usuário para o pagamento de boletos, considerando possíveis erros.
O próximo passo foi definir o fluxo de usuário para o pagamento de boletos, considerando possíveis erros.
Fluxo de usuário
Wireframes
Com o fluxo de usuário definido, criei os wireframes das telas que farão parte do pagamento de boleto dentro do aplicativo de celular do banco neotrust.
Com o fluxo de usuário definido, criei os wireframes das telas que farão parte do pagamento de boleto dentro do aplicativo de celular do banco neotrust.
Com o fluxo de usuário definido, criei os wireframes das telas que farão parte do pagamento de boleto dentro do aplicativo de celular do banco neotrust.
Olá, Cibely!
Button
Button
Código do boleto
Prosseguir
Parte 1
Parte 1
Parte 1
Parte 1
Parte 1
Prosseguir
Ler código de barras novamente
Prosseguir
Prosseguir
Alterar
Prosseguir
Alterar
Prosseguir
Confirmar com senha
Senha
Confirmar com senha
Novo Pagamento
Voltar para o início
Fluxo com protótipos em média fidelidade
Redesenhei o fluxo completo, desta vez usando protótipos de média fidelidade. Assim pude definir e visualizar os possíveis erros que podem acontecer em um fluxo de pagamento de boletos.
Redesenhei o fluxo completo, desta vez usando protótipos de média fidelidade. Assim pude definir e visualizar os possíveis erros que podem acontecer em um fluxo de pagamento de boletos.
Redesenhei o fluxo completo, desta vez usando protótipos de média fidelidade. Assim pude definir e visualizar os possíveis erros que podem acontecer em um fluxo de pagamento de boletos.
Guia de estilos
Guia de estilos
Guia de estilos
Para manter consistência e coerência nos elementos visuais do protótipo de alta fidelidade, criei um guia de estilos.
Para manter consistência e coerência nos elementos visuais do protótipo de alta fidelidade, criei um guia de estilos.
Para manter consistência e coerência nos elementos visuais do protótipo de alta fidelidade, criei um guia de estilos.
Grid
Tipografia
Cores
Espaçamentos
Componentes e ícones
Protótipo em alta fidelidade
Light mode
Telas do Dark mode
Obrigada por ler!
Obrigada por ler!
Obrigada por ler!
Gostaria de saber mais sobre o projeto? Entre em contato:
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Linkedin:
/in/cibelycssouza/
Gostaria de saber mais sobre o projeto? Entre em contato:
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Linkedin:
/in/cibelycssouza/
Gostaria de saber mais sobre o projeto? Entre em contato:
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Linkedin:
/in/cibelycssouza/
Outros projetos
TraduCapes
2024
Simplificando idiomas, ampliando saberes
Desktop
Redesign
UI
Desenvolvimento
TraduCapes
2024
Simplificando idiomas, ampliando saberes
Desktop
Redesign
UI
Desenvolvimento
TraduCapes
2024
Simplificando idiomas, ampliando saberes
Desktop
Redesign
UI
Desenvolvimento
Patinhas Felizes
2024
Facilitando a adoção de animais
Mobile
Desktop
UX
UI
Social
Patinhas Felizes
2024
Facilitando a adoção de animais
Mobile
Desktop
UX
UI
Social
Arte do Tecido
2024
Mais confiança na compra de roupas sob medida online
Desktop
E-commerce
Descoberta
Teste de Usabilidade
Desenvolvimento
Protótipos
UX
UI
Arte do Tecido
2024
Mais confiança na compra de roupas sob medida online
Desktop
E-commerce
Descoberta
Teste de Usabilidade
Desenvolvimento
Protótipos
UX
UI
Arte do Tecido
2024
Mais confiança na compra de roupas sob medida online
Desktop
E-commerce
Descoberta
Teste de Usabilidade
Desenvolvimento
Protótipos
UX
UI
Cibely Souza
UX/UI Designer
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Cibely Souza
UX/UI Designer
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com
Cibely Souza
UX/UI Designer
Linkedin:
/in/cibelycssouza/
E-mail:
cibelysouzadesigner@gmail.com