Assinatura Eletronica UI

Criação das interfaces mobile da etapa de assinatura

Fui escalado para desenhar a interface da etapa de assinatura de contrato digital no processo de credenciamento para consórcio. A tela seria acessada via dispositivo mobile, após o cliente passar pelas etapas iniciais do fluxo.

Criar uma interface que:

• Facilitasse a leitura do contrato em tela pequena;

• Permiti-se ao cliente confirmar que leu o conteúdo;

• Oferecesse uma experiência fluida para desenhar a assinatura com o dedo (touchscreen);

• Finalizasse com um feedback visual claro e confiante.

Desafio de UI

Fluxo Inicial

• Desenho de todas as telas mobile envolvidas nessa etapa;

• Criação dos estados de interface (inicial, interação, sucesso);

• Alinhamento com as diretrizes visuais da Sinqia.

Meu Papel

Fluxo Ajustado

Wireframe

Com o fluxo já corrigido, fui para prancheta desenhar um rabiscoframe e depois traduzi nesse wireframe ao lado.

Conclusão

• Layout responsivo com opção de zoom e visualização em tela cheia do contrato;

• Checkbox de aceite visível e claro, necessário para prosseguir;

• Botão condicional: o botão de assinatura só aparece após o aceite;

• Transição automática para modo paisagem na tela de assinatura, permitindo a assinatura manual com o dedo;

• Após a assinatura, a tela retorna ao contrato com a checkbox já marcada e a assinatura exibida abaixo;

• Tela de sucesso confirmando que o contrato foi assinado e será enviado por e-mail ao cliente.

Soluções aplicadas

Considerações

Mesmo não sendo responsável pela definição do fluxo ou estratégia, tive cuidado em projetar telas que mantivessem:

• Clareza de ações;

• Boa hierarquia visual;

• Fluidez na transição entre etapas;

• Respeito à responsabilidade legal da assinatura.

Solução no figma