UX/UI Case Study: e-Docs

e-Docs — A carteira digital para você ter todos os documentos que precisa, sempre com você e sem o risco de perdê-los — um Projeto construído com foco total na experiência do usuário e design de interface.

O Desafio

Como as pessoas podem ter todos seus documentos e números importantes para realizar as atividades burocráticas do dia a dia?

Contexto

Muitas interações com o Governo e com Empresas exigem que você apresente documentação para sua identificação pessoal ou para ter acesso a diversos serviços: carteira de trabalho, carteirinhas de estudante, planos de saúde, carteira de habilitação, passaporte, certidão de nascimento, título de eleitor, certificado de reservista, cartão de crédito e diversos outros documentos.

Andar com esses documentos não é cômodo e ainda é arriscado, pois as pessoas podem ser roubadas ou perdê-los.

Fomos desafiados a pensarmos em como podemos ajudar pessoas a terem sempre consigo todos seus documentos e números importantes para realizar as atividades burocráticas e de uma forma que o estabelecimento aceite essas informações sem a necessidade de apresentar o original.

WHY?

Quem utilizará uma carteira virtual?

Neste primeiro momento de reflexão facilmente nos identificamos como pessoas que se incomodam em ter que carregar documentos físicos, pois todos os integrantes da equipe relataram já ter experimentado o quão desagradável é precisar de um documento e não tê-lo em mãos, então sim, teríamos uma solução também para uso próprio, mas não era o suficiente: precisávamos compreender quem mais seria afetado pela necessidade de ter mais praticidade nas situações do dia-a-dia que exigem apresentação de documentação.

Nossas hipóteses

Quem seriam os usuários?

• Jovens até 30 anos serão os primeiros a adotarem uma solução tecnológica em substituição ao convencional documento físico.

• Pessoas que possuem dependentes (filhos menores de idade ou pais idosos) necessitam levar consigo o documento de seus dependentes além dos próprios documentos.

Quais seriam os problemas?

• A necessidade de ter em mãos documentos específicos ou de identificação em um momento inesperado;

• O incômodo de andar com muitos documentos gerando volume na carteira;

• Segurança de permanecer com os documentos em local seguro evitando perdê-los ou serem objeto de eventuais roubos durante o trajeto residência — trabalho — residência;

• Pessoas que se habituaram a utilizar documentos físicos muito antes do surgimento de smartphones apresentarem mais resistência em utilizar soluções digitais;

• Necessidade de levar consigo documentos de seus dependentes (filhos menores de idade ou pais idosos) além dos próprios documentos.

Validação das hipóteses

Foi elaborada a Lista de Hipóteses, onde para cada hipótese acima foi desenvolvida pelo menos uma pergunta para compor um questionário cujas respostas poderiam validar nossas hipóteses ou nos trazer aprendizados sobre as dores e necessidades de pessoas que seriam usuários potenciais.

Pesquisa com Usuários

A pesquisa quantitativa e qualitativa foi aplicada em canais diferentes e os resultados estão dispostos abaixo:

• 90 respostas utilizando google forms e stories do Instagram;

• 80,2% das pessoas tem costume de andar com documentos na carteira;

• 77,6% das pessoas andam com documentos de terceiros na carteira;

• 64,4% não se sentem seguras andando com documentos;

• 59,8% das pessoas nunca foram assaltados, furtados ou tiveram algum tipo de extravio;

• 43% dos entrevistados têm idade entre 21 e 30 anos;

• 27,7% das pessoas levam apenas a carteira de motorista como documento oficial, enquanto a mesma porcentagem de pessoas (27,7%) além da carteira de motorista andam com a carteira do plano de saúde no cotidiano.

Resultado dos gráficos

As seguintes respostas foram obtidas dentro do mote de perguntas discursivas:

Você já passou por alguma situação em que precisava de algum documento ou carteirinha e não estava com ele gerando algum tipo de problema? Pode compartilhar como foi essa experiência e como você resolveu o problema?

Com essa pesquisa conseguimos validar algumas hipóteses primárias.

• Muitas pessoas deixam de concluir suas tarefas no cotidiano por falta de documentos em suas carteiras;

• Pais, tutores ou responsáveis são impossibilitados de conseguir até mesmo atendimento médico por falta de documentos de seus dependentes no momento necessário;

• Diversas vezes apenas uma foto do documento pode ajudar o usuário a contornar o problema ;

• Uma considerável quantidade de pessoas acabam tendo que se deslocar para buscar documentos, isso gera transtornos, desgastes e inviabilidades;

Sugestões

Algumas sugestões foram feitas pelos entrevistados, porém todas foram sintetizadas na resposta da Graciele, 27 anos. “No meu ponto de vista, eu acho que esse tanto de documentos não tem fundamento nenhum, acho que tinha que ampliar e fazer um só que servisse para tudo”

Benchmark

Como andar com seus documentos de forma segura? Essa pergunta foi feita diversas vezes durante o desenvolvimento desse benchmark com o objetivo de analisar as opções disponíveis no mercado, procurar soluções parecidas com a proposta deste projeto e comparar quais pontos positivos e negativos de cada concorrente.

Analisando o mercado foram encontrados aplicativos que trabalham com propostas para solucionar problemas semelhantes àqueles propostos como foco das soluções propostas no e-Docs:

CNH Digital

A Carteira Digital de Trânsito (CDT) é a evolução da CNH Digital. Agora, além da Carteira Nacional de Habilitação — CNH, também é possível baixar a versão digital do Certificado de Registro e Licenciamento de Veículo — CRLV (Documento do Veículo).

A CNH Digital e o CRLV Digital são as versões digitais da Carteira Nacional de Habilitação e do Certificado de Registro e Licenciamento de Veículo com o mesmo valor jurídico das respectivas versões impressas.

As funcionalidades que se destacam no aplicativo:

1. Login no aplicativo com uso de CHAVE DE ACESSO

2. Possibilidade de exportar os documentos para PDF com assinatura digital (.P7S) no padrão da ICP-Brasil com validade legal conforme MP 2.200–2/2001

3. Compartilhar o CRLV para até 5 pessoas

4. Autenticação do documento através do QR-Code

5. Exclusão de documentos

e-Título

O e-Título, aplicativo móvel para obtenção da via digital do título de eleitor, permitirá ao eleitor o acesso rápido e fácil às suas informações junto à Justiça Eleitoral.

As funcionalidades que se destacam no aplicativo:

• Acesso à via digital do título de eleitor

• Leitura com QR Code

Pessoa Física

Aplicativo da Receita Federal do Brasil destinado às Pessoas Físicas.

As funcionalidades que se destacam no aplicativo:

• Envio de mensagens (alertas) sobre a Restituição IRPF;

Storytelling

Com a utilização da ferramenta Pixar Storytelling, alinhamos nossa visão sobre as frustrações e necessidades dos usuários, buscando compreender cada vez mais como nosso produto irá se encaixar em suas vidas.

“Um dia destes, durante meu expediente de trabalho, recebi uma ligação da escola da minha filha, ela estava com aqueles sintomas típicos de virose. Fui rapidamente pegá-la para levar ao pronto atendimento, na certeza de que o RG e a carteirinha de saúde dela estavam onde sempre costumo deixar: dentro da minha bolsa. Mas só por eu estar te contando isso, você já imaginou: não estavam! E lá fui eu tentar negociar o atendimento sem ter que enfrentar o trânsito de volta pra casa com a criança passando mal, mas não tive saída, fui buscar o RG e a carteirinha em casa e durante os 18 Km que me separavam deles me perguntava: do que me adianta tanta tecnologia na palma da mão se na hora que mais preciso ainda não inventaram jeito melhor do que um pedaço de papel para provar quem é quem neste mundo!

Até que um dia, contei esta história para uma amiga e ela apenas sorriu pra mim abrindo com alguns cliques no celular os documentos de identificação dela, do filho e até da mãe dela, todos digitais — e ainda me fez suspirar quando mostrou além do cartão do plano de saúde, a carteirinha de estudante do filho, o cartão de acesso da academia e o passaporte de todos eles!”

“Era uma vez um jovem chamado Felipe.

Todos os dias Felipe ia para faculdade na parte da manhã e à tarde, logo após as aulas, ele ia para o estágio.

Um certo dia Felipe recebeu um e-mail dizendo que ele tinha sido selecionado para uma entrevista de emprego.

Por causa disso ele ficou muito animado e no dia da entrevista, ao sair de casa, o nervosismo foi tão grande que acabou esquecendo os documentos pessoais.

Por causa disso ao chegar no local e não ter documento algum para provar a sua identidade e prosseguir com o processo de entrevista, ele sentiu-se muito constrangido. Até que finalmente, depois desse dissabor, ele conheceu o e-Doc através de uma pesquisa na internet e descobriu como era fácil e seguro carregar todos os seus documentos no celular.

Deste dia em diante ele nunca mais se preocupou com esse esquecimento.”

WHO?

Personas

Com base nas hipóteses, storytelling e pesquisa com usuários, as personas foram criadas para representar os usuários que irão utilizar o produto:

WHEN / WHERE?

Mapa da Jornada do Usuário

Para entender as necessidades dos usuários, utilizamos o Mapa da Jornada do Usuário, assim pudemos estudar e acompanhar seu passos, desde o começo do problema até a solução, e identificar as possíveis tomadas de decisão e oportunidades de negócios.

WHAT?

Neste momento a equipe já estava em consenso sobre qual o problema, quem é o usuário e o que ele precisa, então começamos a propor hipóteses de solução e análise sobre Impacto x Esforço, para então definirmos o MVP do e-Docs.

Para gerar valor financeiro o aplicativo será oferecido para empresas privadas que emitem documentos de identificação, como plano de saúde, academia, carteira estudantil, assim o e-Docs funcionará como o intermediador entre o órgão/empresa que emite documento e o seus clientes.

Matriz Impacto X Esforço

Rabiscoframes / Solução:

Após pesquisa com usuários realizada na 1° semana do hackathon, chegamos aos seguintes rabiscoframes de soluções para nossas hipóteses:

Rabiscoframe 1 / Rabiscoframe 2 / Rabiscoframe 3 / Rabiscoframe 4 / Rabiscoframe 5 /

Identidade Visual

Marca

A necessidade de um nome e uma logo para diferenciar nosso produto dos concorrentes foi atendida com a escolha do nome “e-Docs”: o prefixo “e-” significa uma solução digital para o problema e “Docs” faz referência à “Documentos”.

Para construção da logo utilizamos as referências: “documentos, tecnologia e carteira”. O propósito foi construir um símbolo que remetesse à carteira digital.

A tipografia utilizada é a Bahnschrift com característica monoespaçada.

Para representar os documentos físicos disponibilizados pelos órgãos do governo foi escolhida as cores azul e verde, fazendo alusão ao azul utilizado no clássico cartão físico do CPF e o verde que remete às cores do RG e da CNH. Em contraste a estas cores, complementamos com vermelho para representar quaisquer outros tipos de documentos, uma vez que nosso aplicativo tem como solução a versão digital de documentos de empresas privadas além dos documentos pessoais.

Guia de Estilos

Fluxograma

Criamos um fluxograma para organizar as informações, identificar as ações principais que o usuário precisa para alcançar seu objetivo, e facilitar o desenvolvimento do wireframe com as soluções para a interface.

Identificamos as funcionalidades mais importantes que precisam estar acessível com menor número de cliques:

• Lista dos documentos pessoais e dos dependentes;

• Adicionar novos documentos;

• Visualizar os documentos.

Outras funcionalidades;

• Acesso através da biometria ou chave de acesso criada no cadastro;

• Cadastro de novos documentos através de QR Code ou Manual;

• Opção de compartilhar documentos por tempo determinado ou não.

Wireframe

Levando em consideração as funcionalidades destacadas no fluxograma, criamos um wireframe para organizar as soluções, hierarquia da informação e a navegabilidade.

• Da tela inicial do aplicativo é possível acessar as 3 funcionalidades mais importantes com apenas um clique;

• Pensando na segurança das informações do usuário, o aplicativo conta com uma chave de acesso criada no cadastro e para smartphones atuais é possível realizar o login através da biometria;

• O cadastro de documentos pode ser realizado através do QR Code ou manualmente;

• É possível compartilhar o documento por tempo indeterminado ou não, e para maior segurança do usuário é possível encerrar o compartilhamento a qualquer momento.

Wireframe XD

Protótipo de Alta Fidelidade

Utilizamos as diretrizes do Material Design, a linguagem oferecida pela Google, para construir nosso aplicativo que será apresentado através do protótipo de alta fidelidade. O intuito é projetar uma solução de forma rápida sem perder em usabilidade, uma vez que essas diretrizes já foram testadas.

Protótipo

HOW?

Métricas

A partir do Framework H.E.A.R.T. (Happiness, Engagement, Adoption, Retention, Task Success), entendemos que especialmente dois tipos de métricas nos ajudariam a medir o sucesso do e-Docs baseando-se na experiência dos usuários:

• Happiness (felicidade): mede as atitudes do usuário e seu nível de satisfação, normalmente coletadas através de pesquisa: Uso da ferramenta NPS (Net promoter Score)

• Task success (sucesso da tarefa): mede a eficácia, eficiência e taxa de erros cometidos ao tentar realizar uma tarefa: Uso da ferramenta QuantUX

Testes com usuários — Usabilidade

Decidimos utilizar a ferramenta Quant-UX para testar e analisar a usabilidade do protótipo. A ferramenta nos auxilia em alguns testes de usabilidades, por exemplo o mapa de calor, mostrando as áreas com maior número de cliques pelo protótipo, podendo concluir algumas dificuldades e aflições para realizar a atividade solicitada.

Segue abaixo algumas imagens sobre o mapa de calor de telas relevantes.

QuantUX

Com este mapa de calor identificamos algumas dificuldades de usabilidade durante os testes, então as seguintes funcionalidades não foram bem aceitas pelo usuário e teremos que modificar:

• Adicionar Documento do dependente

• Compartilhamento do documento

Nossa proposta é que sejam utilizadas outras ferramentas de análise como o teste A / B, auxiliando nas tomadas de decisões para gerar uma versão 2.0 do nosso produto.

Golden Path

Verificamos ainda que o nosso Golden Path foi validado pelo usuário:

• Cadastrar nova conta >> Registrar documento >> Consultar documento

Processo contínuo

Os próximos passos que daríamos no produto seriam:

• Criar uma landing page para o produto, deixando claro qual o valor, os benefícios e demonstração de como funciona. A landing page precisará ser voltada para o usuário e para empresas;

• Realizar testes de usabilidade;

• Pesquisar mais amplamente obtendo dados e feedbacks sobre as funcionalidades disponíveis no protótipo;

• Aumentar as informações sobre a tecnologia, custos e viabilidade para investidores;

• Acompanhar os resultados, dados e métricas para validar a necessidade de existência do produto.

Conclusão

Com este Projeto encerramos o Hackathon UX Unicórnio 2019 organizado por Leandro Rezende.

Iniciado com capacitação teórica de 30 dias através dos cursos online: UX & Design Thinking: Experiência do Usuário nos negócios / Design de Interfaces do Zero ao Avançado: UI com foco em UX, o Hackathon proporcionou durante as 2 semanas seguintes a nossa vivência numa experiência de Design Sprint com equipe remota e multidisciplinar, composta por integrantes de Brasília — DF, Campinas — SP, Goiânia — GO e São Paulo — SP. Nesta Sprint criamos o Projeto e-Docs colocando em prática os nossos conhecimentos, com foco total na experiência do usuário e design de interface.

Quer saber mais sobre o e-Docs e seus criadores? Entre em contato conosco:

Alexsandra Bandeira, São Paulo, Customer Success, LinkedIn

Cris Messias, Goiânia, UI Designer focused in UX, Behance

Daniel Carvalho, Brasília, UI designer com foco em UX

Ghabriel Severo, Brasília, UX/UI Design e Web Design, Behance

Mayara Bezerra, Brasília, UX/UI Designer, Medium

Rafaela Albieri, Campinas/SP, UX Researcher | Assessora RH | Professora de Física, LinkedIN