Facilitando a utilização de Documentos Digitais

Como utilizei UX Design para tornar a utilização de documentos digitais mais prática e segura, tanto para o usuário que está fornecendo, quanto para quem recebe.

Image for post
Image for post

O desafio

No mês de Junho de 2020, durante o Programa UX Unicórnio, aceitei o desafio de ajudar as pessoas a terem sempre consigo os principais documentos para atividades burocráticas e as instituições aceitarem a documentação sem necessidade da apresentação da versão física original.

Como facilitar a utilização de documentos oficiais de maneira digital?

O cenário atual

O uso de documentos oficiais está presente em diversas atividades do cotidiano de cidadãos brasileiros e as vezes acarretam alguns imprevistos. Seja roubo, extravio, deterioração ou até mesmo o esquecimento de um documento, acaba privando o cidadão de efetuar determinados processos, como abertura de uma conta em banco, cadastramento em algum serviço público, formalização de negócios ou qualquer outra atividade que exija a apresentação de documentos oficiais.

Além do aspecto do usuário do documento, existe o do receptor (empresas privadas e órgãos públicos), que lida diariamente com o possível uso de documentos falsificados, acúmulo de papel/cópias e com a impossibilidade de resolver problemas de clientes por falta de documentos.

Atualmente no Brasil grande parte da população utiliza smartphones, e tem acesso a internet, interagindo com diversos recursos que facilitam seu dia-a-dia. Nesse sentido o governo já disponibiliza alguns documentos digitais oficiais, porém os mesmos estão em diferentes aplicativos.

Image for post
Image for post

Fontes:
Digital 2020 (We Are Social / Hootsuite)
IBGE (Última atualização / 2018)

Objetivo do projeto

Entendendo o desafio proposto e o contexto atual, defini o seguinte objetivo para o projeto:

Desenvolvimento de uma plataforma que reúna em um único sistema os principais documentos oficiais, sendo benéfico e seguro tanto para o usuário “entregador” quanto para o “receptor” de documentos, aumentando a utilização de documentos digitais na sociedade a médio prazo.

Image for post
Image for post

Usuários

Seguindo o objetivo do projeto, temos dois tipos de usuário identificados:

  1. O cidadão comum que necessita utilizar os documentos em situações diversas
  2. O receptor de documentos, que irá receber e conferir os documentos para dar andamento em algum serviço/processo/atividade

Sendo assim tracei as personas de cada um deles para entendê-los e ajudá-los da melhor maneira possível.

Personas

As personas a seguir foram validadas com as pesquisas e documentações que serão apresentadas a diante.

Image for post
Image for post
Persona do Usuário Cidadão Comum
Image for post
Image for post
Persona do Usuário Receptor de Documentos

Contexto do usuário

Definidas as personas, tracei as jornadas de usuário, de uma possível situação sem a existência da nova plataforma, levando em consideração os dois lados, tanto da Joana (Cidadão Comum) quanto do Felipe (Receptor de Documentos).

Jornadas

Image for post
Image for post
Jornada do Usuário Cidadão Comum
Image for post
Image for post
Jornada do Usuário Receptor de Documentos

Resumo das Jornadas

A situação descrita nas jornadas consiste no caso da Joana receber uma ligação enquanto está na rua, sendo informada de que será contratada em um novo emprego e precisa ir no mesmo dia, a tarde, abrir uma nova conta no banco. A mesma confere e nota que não está com todos seus documentos em mãos. Ela lembra que uma vez já cadastrou documentos digitais em aplicativos do governo, mas eram vários apps diferentes e a mesma acabou desistindo de usá-los, sendo assim ela decide ir em casa buscar os documentos.

Ao chegar na agência, é recepcionada pelo Felipe que logo percebe que ela não levou as cópias dos documentos e nem o comprovante de residência. Sem poder abrir exceções e tão frustrado quanto Joana, Felipe tenta ajudar sugerindo que ela vá a uma lan house próxima ao banco para efetuar as cópias e emitir o comprovante, ficando na torcida, pois depende dessa abertura de conta para bater as metas do seu mês.

No fim das contas Joana não consegue resolver pois a lan house estava fechada e precisou voltar na manhã do dia seguinte para finalizar a abertura da conta, faltando ao primeiro turno no novo trabalho.

Primeira etapa de validação

Tendo como base as personas e jornadas citadas, listei as Certezas, Suposições e Dúvidas (Matriz CSD) referentes ao tema em questão, para que ficasse mais claro o que eu precisaria descobrir.

Image for post
Image for post

Pesquisa quantitativa

Com intuito de validar as suposições, eliminar as dúvidas e entender melhor a perspectiva das pessoas sobre diferentes aspectos do tema, realizei uma pesquisa quantitativa através do Google Forms, com dois questionários diferentes, direcionados para os públicos dos potenciais usuários da futura solução, 117 Cidadãos Comuns e 37 Receptores de Documentos. Seguem abaixo os resultados:

Image for post
Image for post
Pesquisa Quantitativa (Cidadão Comum)
Image for post
Image for post
Pesquisa Quantitativa (Receptor de Documentos)

Pesquisa qualitativa

Além da pesquisa quantitativa, efetuei uma pesquisa qualitativa, entrevistando pessoas, dos dois espectros, para conseguir extrair detalhes e informações importantes para construção da melhor solução. Foram entrevistadas 14 pessoas, sendo 09 pessoas de diferentes áreas (cidadãos comuns), e 05 profissionais que lidam com recebimento de documentos (Banco, Cartório e Venda de Veículos). Com essas conversas consegui captar os seguintes aprendizados:

Image for post
Image for post

Alternativas de solução

Baseado nas pesquisas e entendendo todo o contexto estudado, listei as principais funcionalidades de solução para o problema, utilizando a Matriz de Esforço x Impacto, para poder fazer a priorização e definir a continuidade do projeto.

Matriz Esforço x Impacto

Image for post
Image for post

A solução

Avaliando a matriz e levando em consideração a priorização das funcionalidades, percebi a necessidade da criação de duas versões da solução, uma versão Mobile para quem estivesse entregando os documentos e a versão Desktop para os receptores, com as seguintes características:

Image for post
Image for post
Image for post
Image for post

Com essas funcionalidades amenizaríamos os principais problemas referente a utilização dos documentos no dia-a-dia, seja extravio, esquecimento, insegurança quanto a veracidade, impossibilidade de finalizar processos, necessidade de uso de cópias e perda de prazo para renovação.

Rabiscoframes

Tendo as soluções definidas comecei a colocar no papel as possibilidades de como seria o projeto, com anotações, desenhos e os sketches de como ficaria o aplicativo (Desktop / Mobile), conforme imagens abaixo.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Protótipo de Baixa Fidelidade

Para poder entender melhor o fluxo das telas, criei um protótipo de baixa fidelidade para cada versão do app (mobile/desktop) utilizando o aplicativo Marvel.

Protótipos de baixa fidelidade: Mobile / Desktop

Primeiro teste de usabilidade

Pensando em evitar erros graves e re-trabalho, decidi aplicar o teste de usabilidade com os protótipos de baixa fidelidade, solicitando que 5 usuários (cidadãos comuns) utilizassem o app mobile com a tarefa de importar a CNH Digital e adicionar um documento extra (não oficial). Também fiz o teste da versão desktop com 3 usuários (receptores de documentos) com a tarefa de solicitar a permissão para acesso de documentos de um cliente. Através desses testes, obtive feedbacks significativos.

Versão Mobile:

  • Tela de tutorial sobre os Documentos Oficiais pode ser mais detalhada, explicando da necessidade do uso (na primeira vez) dos Apps Oficiais para importação dos Documentos
  • Botões primários podem ser melhor trabalhados, chamando maior atenção para a opção que possivelmente será a escolhida
  • Exibição da tela com menu e saída do aplicativo

Versão Desktop:

  • Exibição da tela com os clientes que já tiveram os documentos acessados

Wireframes

Com o primeiro teste de usabilidade efetuado, desenvolvi os wireframes com a estrutura mais detalhada da solução, já aplicando as melhorias com os aprendizados captados através dos usuários.

Image for post
Image for post
Wireframe Mobile (Receptor de Documentos)
Image for post
Image for post
Wireframe Desktop (Receptor de Documentos)

Fluxo dos Usuários

Image for post
Image for post
Fluxo da Versão Mobile (Cidadão Comum)
Image for post
Image for post
Fluxo da Versão Desktop (Receptor de Documentos)

Protótipo de Média Fidelidade

Utilizando o Figma, criei o protótipo de média fidelidade para cada versão da solução (mobile/desktop).

Protótipos de média fidelidade: Mobile / Desktop

Segundo teste de usabilidade

Com o fluxo dos usuários definidos e o protótipo de média fidelidade pronto, apliquei um novo teste de usabilidade, sempre em busca de uma melhor experiência para o usuário e atendo aos feedbacks para corrigir possíveis problemas.

Feedbacks:

  • Possibilidade de utilizar uma foto para identificar o usuário (nas duas versões)
  • Na versão Mobile, os usuários tiveram dificuldade em entender onde apareceriam as Solicitações de Acesso aos Documentos, essa opção poderia estar mais evidente

Identidade Visual (Nome e Marca)

Levando em consideração a importância do branding para uma boa comunicação do projeto, criei uma identidade visual amigável, moderna, que não remetesse a algo arcaico e burocrático. O nome escolhido foi DIGIDOC, fazendo alusão ao termo DIGItal DOCument.

Image for post
Image for post

Styleguide

Tendo a marca e identidade visual definidas, chegou o momento de organizar o Guia de Estilos, parametrizando as cores, tipografia, botões e formulários a serem utilizados no projeto.

Cores

A seleção da cor teve como objetivo a transmissão de uma sensação de segurança, responsabilidade e tecnologia. Dessa forma foram escolhidos dois tons de azul para as cores primárias e secundárias.

Image for post
Image for post

Tipografia

A tipografia escolhida para o projeto foi a Montserrat, pois trata-se de uma fonte não serifada, com boa legibilidade e que dispõe diversos estilos, facilitando na organização hierárquica. Para a obtenção dos tamanhos de fonte, foi utilizada a proporção perfect fourth (ratio 1.333), trazendo uma boa harmonia para leitura.

Image for post
Image for post

Botões

Os botões seguiram as diretrizes de cores e tipografia já definidas, e para dar um aspecto mais amigável e moderno, foi utilizado o radio nas bordas.

Image for post
Image for post

Formulários

Seguindo o estilo dos botões, os formulários obedeceram as cores e tipografia escolhidas, com as variações para os estados de Perigo/Sucesso.

Image for post
Image for post

Protótipo de Alta Fidelidade

Com base nos wireframes e definição do styleguide, desenvolvi os Protótipos de Alta Fidelidade navegáveis, através do Figma.

Protótipo de alta fidelidade da versão Mobile

Image for post
Image for post
Protótipo de Alta Fidelidade Versão Mobile (Cidadão Comum)

Protótipo de alta fidelidade da versão Desktop

Image for post
Image for post
Protótipo de Alta Fidelidade Versão Desktop (Receptor de Documentos)

Terceiro teste de usabilidade

Tendo os protótipos de alta fidelidade prontos, foi aplicado um novo teste com os mesmos usuários da primeira etapa de testes, para validação dos ajustes e melhorias feitos no projeto. Através desse último teste pude obter feedbacks e insights importantes:

  • Na versão Mobile, com a nova organização da tab bar, os usuários tiveram maior facilidade em utilizar todas as funcionalidades do app
  • Nas duas versões, o uso da foto de perfil, foi uma característica elogiada, pois facilmente você consegue identificar o usuário
  • Houve um questionamento sobre o prazo de validade/renovação dos Documentos Oficiais, se haveria alguma informação referente a isso no app
  • Mais de um usuário questionou se não haveria possibilidade dos Documentos Oficiais serem cadastrados diretamente no DigiDoc, sem haver necessidade da importação dos mesmos através dos seus aplicativos oficiais

Métricas

Por se tratar de um estudo de caso, não existe a possibilidade real da avaliação do seu desempenho. Porém acho importante listar algumas métricas que poderiam ser utilizadas caso a plataforma fosse de fato lançada:

  • Número de Downloads (Play Store / App Store)
  • Comentários e avaliações (Play Store / App Store)
  • Taxa de Retenção
  • Churn Rate (taxa de cancelamento)
  • Quantidade de Instituições que se cadastraram para utilizar a versão Desktop
  • Pesquisa com as Instituições que utilizam a solução, verificando o que melhorou (ou não) após a instalação
  • Volume de Documentos Oficiais armazenados na plataforma

Possíveis melhorias

Um produto digital dificilmente estará 100% pronto, é necessária uma constante evolução e atualização, buscando melhor atender as necessidades dos usuários. Este estudo chegou ao MVP (Minimum Viable Product) para o desafio em questão, mas com certeza existem muitas oportunidades e melhorias a serem feitas, como:

  • Possibilidade de utilização da Impressão Digital para os acessos/autorizações no app
  • Lembrete de prazo de validade para renovação dos Documentos Oficiais
  • Tentar parceria com o Governo para que o app se tornasse a plataforma Oficial dos Documentos, evitando a necessidade do cadastro em vários aplicativos

Considerações Finais

Aprendizados

Meu maior aprendizado durante esse estudo de caso foi na estruturação e no processo dentro de um projeto de UX Design. Poder estudar e me aprofundar em outras áreas, que não faziam parte do meu dia-a-dia, é muito gratificante. Hoje esse conhecimento, agregados ao que eu já desenvolvia, me permitem realizar projetos mais complexos e impactantes no mercado digital.

Trilhar todo o caminho da solução, desde o objetivo, criação das personas, pesquisa com usuários, às análises das possibilidades a serem desenvolvidas, com testes de usabilidades e métricas, foi muito interessante e enriquecedor!

Agradecimentos

Agradeço ao Leandro Rezende, idealizador e mentor do Programa UX Unicórnio, o qual está sendo de suma importância para minha evolução na área do UX Design, entregando conhecimento e conteúdo de muita qualidade. Deixo também meu muito obrigado a Equipe de Suporte do Programa, em especial ao Rafael Frota, que contribuiu de forma relevante para toda assessoria necessária no decorrer do projeto.

Rafael Vieira
Linkedin | Portolio | Instagram

Written by

UX/UI Designer | rafaelvieira.com.br

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store