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