bg_propledgers03.jpg
PropLedgers . Sistema de Gestão de Contratos Digitais e App de Assinatura Eletrônica . UX and UI Design

PropLedgers é uma plataforma para contratos digitais e assinatura eletrônica. A plataforma web permite que empresas criem templates padronizados de documentos e contratos e enviem para seus clientes assinarem.  E os clientes podem usar o aplicativo para assinar o documento eletrônicamente. As interfaces web e mobile seguem a mesma identidade, mas considerando o contexto de cada usuário. 

Projeto

Sistema Web para criação de templates de documentos e gestão de contratos

...

Aplicativo híbrido para assinatura eletrônica com validação de Identidade Digital

...

Website do Produto

Requerimentos

Criar uma interface dinâmica e simples de usar, para que equipes das empresas possam criar templates de documentos rapidamente

...

 

Criar um dashboar para o controle e gestão dos contratos

...

 

Criar um aplicativo com as funcionalidades de cadastro da identidade digital e assinatura eletrônica

...

Sistema Web e Aplicativo são integrados, formando a Plataforma PropLedgers

 

Minha Atuação

Pesquisa das melhores práticas para a interface web, considerando as necessidades do projeto

...

Desenho de Wireframes da Interface Web para validação das funcionalidades

...

Design das Interfaces  para o Sistema Web e para o site do produto

...

UI Design para o aplicativo, desenhando wireframes e depois layouts da interface
...

 

Acompanhamento da implantação do Design junto à equipe de desenvolvimento

 

 

Ferramentas

Figma

...

Invision

...

ProtoPie

Wireframes e Fluxos de Telas

Para o Sistema Web, uma das principais funções era a criação de templates de documentos. Assim como o conceito de template dos programas de edição de texto, o usuário pode criar um template do seu contrato e depois incluir apenas as informações específicas de cada negócio. Era fundamental que a inteface desta funcionalidade fosse o mais intuitiva possível para o usuário. A partir de avaliações heurísticas, comparações entre ferramentas e um trabalho de arquitetura de informação para organizar as informações e rótulos a serem usados, desenhei os wireframes usando o conceito de cards que podem ser criados, editados e arrastados para reorganizar a informação, de acordo com o desejo do usuário.

PropLedgers
APP
Desenho do Aplicativo

O aplicativo PropLedgers tem três funcionalidades principais: criação de uma identidade digital, acesso aos contratos digitais e assinatura eletrônica. Meu papel era cuidar para que cada uma destas etapas oferecesse a melhor experiência ao usuário, para isso o trabalho em conjunto com a equipe de desenvolvimento foi fundamental para que fosse possível alinhar as necessidades de usabilidade e os requisitos de segurança do aplicativo. Através de wireframes, protótipos e rodadas de iterações, foi possível criar um processo simples, agradável e seguro.

Identidade Digital

O fluxo de cadastro da identidade digital tinha algumas exigências de segurança, entre elas o processo de reconhecimento facial por foto e a prova de vida por vídeo. Era importante que estas etapas acontecessem de forma natural para o usuário. Por isso o fluxo de telas foi simplificado e o layout da tela é clean com textos assertivos e ícones.
 

Identidade Digital
O fluxo de cadastro da identidade digital tinha algumas exigências de segurança, entre elas o processo de reconhecimento facial por foto e a prova de vida por vídeo. Era importante que estas etapas acontecessem de forma natural para o usuário. Por isso o fluxo de telas foi simplificado e o layout d tela é clean com textos assertivos e ícones.

Contrato Digital

Depois de cadastrar sua identidade, o usuário deseja apenas acessar os contratos que deve assinar, revisar os dados e realizar as assinaturas. Por isso  a interface do aplicativo é baseada numa listagem organizada e simples, separada por abas que categorizam os contratos (a assinar, assinados e rejeitados)

Contrato Digital
Depois de cadastrar sua identidade, o usuário deseja apenas acessar os contratos que deve assinar, revisa os dados e realizar as assinaturas. Por isso a interface do aplicativo é baseada numa listagem organizada e  simples, separada de acordo com os status de cada documento (a assinar, assinado e rejeitado)

Assinatura Eletrônica

Como a assinatura do usuário já é cadastrada no processo da Identidade Digital, para assinar um contrato o usuário precisa somente dar um duplo tap onde sua assinatura deve aparecer no documento, facilitando e agilizando o processo.
 

Assinatura Eletrônica
Como a assinatura do usuário já é cadastrada no processo da Identidade Digital, para assinar um contrato o usuário precisa somente dar um duplo tap onde sua assinatura deve aparecer no documento, facilitando e agilizando o processo.

pl_bg4.jpg
pl_bg5.jpg
pl_bg03.jpg